jquery.Parallax.jsを使ってパララックス(Parallax)な演出でページを表示してみます。縦長ページの時にエリア毎にイイ感じの演出にしてくれます。
Contents
ディスプレイ広告
jquery.Parallax.jsを使ってパララックス(Parallax)な演出で表示するCSSの記述
※必要に応じて変更して下さい。
<style type="text/css" media="all"> <!-- body{ margin: 0; min-width: 980px; padding: 0; } p{ margin: 0 0 20px 0; } p, ul{ font-family:"Proxima Nova Light", 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size-adjust:0.488; font-weight:200; font-style:normal; } img{ border: 0; } h1, #pixels{ font-family:"Proxima Nova Light", 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size:17px; font-weight:bold; } h2{ font-family:"Proxima Nova Light", 'Helvetica Neue', Arial, Helvetica, sans-serif; font-size-adjust:0.531; font-weight:500; font-style:normal; } #header h1, #pixels{ color: #48941A; } .float-left{ float: left; margin: 0 0 0 20px; } .float-right{ float: right; margin: 0 20px 0 0; } .center{ font-size: 2.5em; padding: 80px 0 0 0; text-align: center; } #nav{ list-style: none; position: fixed; right: 20px; } #nav li{ margin: 0 0 15px 0; } #header, #intro, #second{ width: 100%; } #intro{ background:url(images/firstBG.jpg) 50% 0 no-repeat fixed; color: white; height: 600px; margin: 0 auto; padding: 0; } #second{ background: url(images/secondBG.jpg) 50% 0 no-repeat fixed; color:#333333; height: 1300px; margin: 0 auto; overflow: hidden; padding: 0; } #second .bg{ background: url(images/trainers.png) 50% 0 no-repeat fixed; height: 1300px; margin: 0 auto; padding: 0; position: absolute; width: 900px; z-index: 200; } #third{ background: url(images/thirdBG.jpg) 50% 0 no-repeat fixed; color: white; height: 650px; padding: 100px 0 0 0; color:#000000; } #fifth{ height: 400px; margin: 0 auto; padding: 40px 0 0 0; } .story{ margin: 0 auto; min-width: 980px; overflow: auto; width: 980px; } .story .float-left, .story .float-right{ padding: 100px 0 0 0; position: relative; width: 350px; } --> </style>
jquery.parallax.jsを使ってパララックス(Parallax)な演出で表示するJavaScriptの記述
※jquery、jquery.parallax-1.1.3.js、jquery.localscroll-1.2.7-min.js、jquery.scrollTo-1.4.2-min.jsを読み込みます。ページ読込後、$().parallax()でパララックス効果を出したい箇所を指定します。
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.parallax-1.1.3.js"></script> <script type="text/javascript" src="js/jquery.localscroll-1.2.7-min.js"></script> <script type="text/javascript" src="js/jquery.scrollTo-1.4.2-min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#nav').localScroll(800); $('#intro').parallax("50%", 0.1); $('#second').parallax("50%", 0.1); $('.bg').parallax("50%", 0.4); $('#third').parallax("50%", 0.3); })<br /> </script>
jquery.Parallax.jsを使ってパララックス(Parallax)な演出で表示するHTMLの記述
※パララックス(Parallax)効果を出したいエリア(id=”intro”、id=”second”、class=”bg”、id=”fifth”)を用意します。必要に応じて変更して下さい。
<ul id="nav"> <li><a href="#intro" title="Next Section"><img src="images/dot.png" alt="Link"></a></li> <li><a href="#second" title="Next Section"><img src="images/dot.png" alt="Link"></a></li> <li><a href="#third" title="Next Section"><img src="images/dot.png" alt="Link"></a></li> <li><a href="#fifth" title="Next Section"><img src="images/dot.png" alt="Link"></a></li> </ul> <div id="intro"> <div class="story"> <div class="float-left"> <h1>パララックス(Parallax)効果のページを表示</h1> <h2>第1コンテンツエリアです。</h2> 第1コンテンツエリアの本文です。 </div> </div> <!--.story--> </div> <!--#intro--> <div id="second"> <div class="story"> <div class="bg"></div> <div class="float-right"> <h2>第2コンテンツエリアです。</h2> 第2コンテンツエリアの本文です。 </div> </div> <!--.story--> </div> <!--#second--> <div id="third"> <div class="story"> <div class="float-left"> <h2>第3コンテンツエリアです。</h2> 第3コンテンツエリアの本文です。 </div> </div> <!--.story--> </div> <!--#third--> <div id="fifth"> <div class="story"> <h2>第4コンテンツエリアです。</h2> 第4コンテンツエリアの本文です。 </div> <!--.story--> </div> <!--#fifth-->
jquery.Parallax:パララックス(Parallax)効果のデモページ
jquery.Parallax:パララックス(Parallax)効果のデモページ
ソース元:Nikebetterworld Parallax Effect Demo | Ian Lunn
ソース元:Nikebetterworld Parallax Effect Demo | Ian Lunn
※流用される場合は自己責任でお願いします。
デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。