jquery.superscrollorama.jsを使ってページ内にパララックスや色々なエフェクトを使って表示する方法｜DAD UNION

jquery.superscrollorama.jsを使ってページ内のコンテンツをパララックスや色々なエフェクトを使って表示する方法をご紹介します。

Contents

jquery.superscrollorama.jsを使ってページ内にパララックスや色々なエフェクトを使って表示するCSS記述
jquery.superscrollorama.jsを使ってページ内にパララックスや色々なエフェクトを使って表示するHTML記述
jquery.superscrollorama.jsを使ってページ内にパララックスや色々なエフェクトを使って表示するJavaScriptの記述
jquery.superscrollorama.jsを使ってページ内にパララックスや色々なエフェクトを使って表示するデモページ
ソース元：SUPERSCROLLORAMA

jquery.superscrollorama.jsを使ってページ内にパララックスや色々なエフェクトを使って表示するCSS記述

※normalize.cssファイルを読み込みます。パララックスや色々なエフェクト表示エリア（.demo #wrapper、#fly、#scale）のCSS記述です。必要に応じて変更して下さい。

<link rel="stylesheet" href="normalize.css" type="text/css">
<style>
* {
  padding: 0;
  margin: 0;
}
body {
  font-weight: bold;
  font-size: 20px;
  text-align: center;
  visibility: hidden;
}
.demo{
  visibility: visible;
}
.demo #wrapper{
  height: 1600px;
  padding-top: 400px;
  margin-bottom: 100px;
  width: 100%;
}
h1{
  text-align: center;
  font-size: 20px;
  padding: 20px 0 40px 0;
  line-height: 1.8em;
}
h2 {
  font-size: 140px;
  margin: 0;
  color: #4DFFA6;
  padding: 60px;
  text-shadow: 0 4px 2px #000;
  width: 90%;
}
#fly { position: relative; }
#scale { width: 500%; margin: 0px -200%; padding: 0; }
</style>

jquery.superscrollorama.jsを使ってページ内にパララックスや色々なエフェクトを使って表示するHTML記述

※bodyタグにclass=”demo”を追記し、パララックスや色々なエフェクト表示エリア（id=”wrapper”、id=”fade”、id=”fly”、id=”spin”、id=”scale”）を用意します。

<body class="demo">
<h1>jquery.superscrollorama.jsを使ってページ内にパララックスや色々なエフェクトを使って表示します。<br>下にスクロールさせてみて下さい。</h1>

<div id="wrapper">
      <h2 id="fade">フェードイン</h2>
      <h2 id="fly">左から出現</h2>
      <h2 id="spin">回転</h2>
      <h2 id="scale">拡大</h2>
</div>
</body>

jquery.superscrollorama.jsを使ってページ内にパララックスや色々なエフェクトを使って表示するJavaScriptの記述

※TweenMax.min.js、jquery-1.9.1.min.js、jquery.superscrollorama.jsファイルを読み込みます。
$.superscrollorama().addTween(‘エフェクトエリアのid’, TweenMax.from( $(‘エフェクトエリアのid’), オプション}), スクロール時間)を記述します。オプションは「SUPERSCROLLORAMA」を参照。

<script type="text/javascript" src="TweenMax.min.js"></script>
<script src="jquery-1.9.1.min.js"></script>
<script src="jquery.superscrollorama.js"></script>
<script>
$(document).ready(function() {
  var scrollDuration = 200; 

  $.superscrollorama().addTween('#fade', TweenMax.from( $('#fade'), .5, {css:{opacity: 0}}), scrollDuration);
  $.superscrollorama().addTween('#fly', TweenMax.from( $('#fly'), .25, {css:{right:'1000px'}, ease:Quad.easeInOut}), scrollDuration);
  $.superscrollorama().addTween('#spin', TweenMax.from( $('#spin'), .25, {css:{opacity:0, rotation: 720}, ease:Quad.easeOut}), scrollDuration);
  $.superscrollorama().addTween('#scale', TweenMax.fromTo( $('#scale'), .25, {css:{opacity:0, fontSize:'20px'}, immediateRender:true, ease:Quad.easeInOut}, {css:{opacity:1, fontSize:'240px'}, ease:Quad.easeInOut}), scrollDuration);
});
</script>