今回は少し触る機会があったのでパララックスを作るときに便利よさげなプラグインをご紹介します。
使用するプラグインは「skrollr.js」
選んだ理由としては…
・軽量
・スマホでも利用可（スクロールに対応）
・IEも（対応のjsを読みこめば）利用可
・感覚的に実装できそう
■skrollr.jsを使用したサイト
・http://kataomoi3.com/
・http://www.larc-en-ciel.com/live2014/
まだ他にもメジャーどころが使ってそうですが。
スポンサードリンク
■読み込むJS
・jquery（1.9以降？古いと動かないらしいです）
・skrollr.min.js
・skrollr.ie.min.js（IEでも動く用）
［プラグインの前に…］
とりあえずスクロール量を取得。自分用のメモで書いておきます。
»DEMOを見る
//HTML部分
<p id="scrollTxt">スクロール値：0</p>
//JS部分
$(document).ready(function() {
$(window).scroll(function() {
$('#scrollTxt').text('スクロール値：' + $(this).scrollTop());
});
});
//CSS部分
#interval {
position:fixed;
top:20px;
right:20px;
z-index:10000; //←他のものがかぶさっていいように一番上になるような値
}
［skrollr.jsの実装について］
ではプラグインの実装についてです。
上記のリンク先でダウンロードした「skrollr.css」「skrollr.min.js」「skrollr.ie.min.js」とjqueryを読み込みます。
//HTML部分 //ダウンロードしたskrollr.cssを読み込む <link href="css/skrollr.css" rel="stylesheet" type="text/css" /> //HTML後半部分↓↓↓ //jqueryは1.8とかだと動かないので1.9以降がよいかも <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="js/skrollr.min.js"></script> //IE用でも動くように「skrollr.ie.min.js」を指定 <!--[if lt IE 9]> <script type="text/javascript" src="js/skrollr.ie.min.js"></script> <![endif]--> //※skrollr起動させる記述は</body>のすぐ上に記述。 <script type="text/javascript"> skrollr.init(); </script> </body>
［skrollr.jsの基本的な動きの書き方］
skrollr.jsの動く部分にはdata属性を使って設定するようになってます。
※skrollr.jsのexampleの中に色々例がありますが、今回は一番単純な指定の仕方でやってます。
»DEMOを見る
//data属性を使った書き方 //スクロール量が0のとき、左から800pxの位置。スクロール量が1000のとき、左から200pxの位置 <div id="slideBox" data-0="left:800px;" data-1000="left:200px"></div> //スクロール量が0のとき、左から1500pxの位置。スクロール量が1000のとき、左から-200pxの位置 <div id="slideBox02" data-0="left:1500px;" data-1000="left:-200px"></div>
基本的な書き方はそんなんでいいかと。
上記の動きを見つつ、色々動きを増やしてみる。
»DEMOを見る
//HTML部分
//背景になる部分
スクロール量が0のとき、透明度0。スクロール量が1500のとき、透明度100％
<div id="section01" data-0="opacity:0;" data-1500="opacity:1;"></div>
//下から上に動いてくるテキスト
スクロール量が0のとき、透明度0。
スクロール量が1000のとき、透明度0で上から500pxの位置。
スクロール量が1500のとき、透明度100％で上から150pxの位置。
スクロール量が3000のとき、透明度0で上から-1000pxの位置。
<div id="txtBlock01" data-0="opacity:0;" data-1000="opacity:0;top:500px;" data-1500="opacity:1;top:150px;" data-3000="opacity:0;top:-1000px;"></div>
//横から出てくるテキスト
<div id="yokoSlideTxt" data-0="opacity:0;top:400px;" data-1500="opacity:1;top:400px;left:1500px;" data-3000="opacity:1;top:400px;left:300px;" data-4500="opacity:0;top:400px;left:-1000px;">横からでますよ横からでますよ横からでますよ横からでますよ</div>
//CSS部分（※skrollr.cssとは別）
//HTML上の「data-0」でも透明度を設定してるが、JSの読み込み順で一瞬見えてしまうのでCSSでも初期設定で「opacity:0」を設定しておく
/* 初期値 opacity:0 */
#section01, #txtBlock01, #yokoSlideTxt {
opacity:0;
}
そんな感じでとりあえず書いてみました。
もっとスマートな書き方があるんだろうなと予想しつつも、割りと簡単な書き方で動いてはくれるので取っ付き易いかもしれません。