jquery.superscrollorama.jsを使ってページ内のコンテンツをパララックスや色々なエフェクトを使って表示する方法をご紹介します。
Contents
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>
jquery.superscrollorama.jsを使ってページ内にパララックスや色々なエフェクトを使って表示するデモページ
jquery.superscrollorama.jsを使ってページ内にパララックスや色々なエフェクトを使って表示するデモページ
ソース元:SUPERSCROLLORAMA
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。
ディスプレイ広告