まず今回作る物をご紹介します。
スクロールに合わせて左から現れるコンテンツ。
スクロールに合わせて右から現れるコンテンツ。
スクロールに合わせて回転しながら現れるコンテンツ。
skrollr
今回利用するのは「skrollr」というライブラリです。以下のURLよりダウンロードが可能です。
https://github.com/Prinzhorn/skrollr
jQueryを利用しているためそちらも読み込む必要があります。
具体的にはHTMLのheadタグ内で以下のような形でjsファイルを読み込みます。JavaScriptはCSSより下で読み込むようにしましょう。
HTML
<link rel="stylesheet" href="style.css"> <script type="text/javascript" src="jquery-3.4.1.min.js"></script> <script type="text/javascript" src="skrollr.js"></script>
skrollrを使う下準備として、bodyタグ終了の手前（最後の方）で以下のコードを記載します。
HTML
…
<script type="text/javascript">
var s = skrollr.init();
</script>
</body>
これでskrollrを使う準備は完了です。
左から現れるコンテンツ
まずは中央寄せで表示するdivを作って表示確認してみましょう。
HTML
<div class="box"><h2>FIRST</h2></div>
CSS
body {
background-color: lightgray;
}
.box {
width: 600px;
height: 300px;
margin: 500px auto;
text-align: center;
background-color: white;
border-radius: 20px;
}
これで以下のように表示されるはずです。
このボックスをスクロールに合わせて左から現れるように指定すると以下のようになります。
HTML
<div class="box" data-0="opacity:0;" data-bottom-top="transform:translateX(-1000px);" data-center-center="transform:translateX(0px); opacity:1;" data-top-top="opacity:1;" data-top-bottom="opacity:0;"><h2>FIRST</h2></div>
data-0="opacity:0;"
スクロール値が0、つまり最初の段階で要素を100%透過して見えなくします。こうしないと左側から頭が少しだけ見えている不格好な形になります。
data-bottom-top="transform:translateX(-1000px);"
アニメーションの開始位置を指定します。一つ目のbottomはウィンドウの株、二つ目のtopはこのdivの上部を意味します。
つまりウィンドウがスクロールされてきて、最下部がコンテンツの最上部に触れたところからスタート。
translateXでマイナスの値を指定すると画面左側枠外からとなります。
data-center-center="transform:translateX(0px); opacity:1;"
ウィンドウの中央がコンテンツの中央と合う位置までスクロールで透過をとき100%で表示、translateXを0pxとすることで本来表示されている場所へと移動させています。
data-top-bottom="opacity:0;"
これはお遊びの要素ですが、ウィンドウの上部がコンテンツの下部と一致するところで100%透過にしています。
要は画面から非表示になるタイミングで完全に消えるように、スクロールしていくと徐々に消えていく形が確認できると思います。
これは無くてもいいと思いますが念のためこんなこともできるよということで。
これでスクロールに合わせて左から現れるコンテンツの作成は完了です。
右から現れるコンテンツ
基本的には先ほど同じです。-1000pxとして左から登場していた部分を1000pxとして右からにしています。
HTML
<div class="box" data-0="opacity:0;" data-bottom-top="transform:translateX(1000px);" data-center-center="transform:translateX(0px); opacity:1;" data-top-top="opacity:1;" data-top-bottom="opacity:0;"><h2>SECOND</h2></div>
ただしこのままだと右側にずれている時にブラウザに横スクロールバーが表示されてしまいます。それを防ぐためにはCSSで以下の指定を行います。
CSS
html {
overflow: auto;
}
body {
overflow: hidden;
}
左からを応用するだけなので以上です。
透過状態から回転して現れる
文字で表現するとなんのことやらなので、もう一度画像でご覧ください。
この動きを実現させるには以下です。
HTML
<div class="box" data-0="opacity:0;" data-bottom-top="transform:scale(0) rotate(0deg);" data-center-center="transform:scale(1) rotate(360deg); opacity:1;" data-top-top="opacity:1;" data-top-bottom="opacity:0;"><h2>THIRD</h2></div>
data-bottom-top="transform:scale(0) rotate(0deg);"
scale(0)でサイズ0%に縮小、rotate(0deg)は回転無し。
data-center-center="transform:scale(1) rotate(360deg); opacity:1;"
scale(1)でサイズ100%、rotate(360deg)で時計回りに360度、つまり一回転。
これで回転しながら現れるコンテンツの出来上がりです。
パララックスの使いどころ
こんなことをいうと元も子もありませんが、私はパララックスを利用したサイトは見づらいと感じるので好きではありません。
動きのあるサイトを作りたいというのは作り手側の「何かカッコいいものができた」という満足で、見る側は動きを求めてはいないことが多いのではないかなと。
とはいえクライアントがこういう動きのあるカッコいいサイトを作りたい！ということであればそれを実現するのが技術者です。
他の技術者ができないことがあなたにできればそれはあなたが仕事を受ける強みにもなるでしょう。
他の動き
上記は公式サンプルにもある動きを簡単にしたもので、CSSで指定できるものであれば他にもいろいろな動きをつけることができるようです。
一点だけ、モバイルに対応させるにはbodyタグに以下のidをつける必要があるようです。
HTML
<body id=”skrollr-body”>
もしサイトの特性合わせた動きを作れれば、パララックスにも効果的な使い道が生まれると思います。
色々試して、使えるパターンを自分の中に蓄積しておくのも良いでしょう。