【高度なアニメーション】スクロールと連動したサイズ変更
スクロールと連動したサイズ変更
以下の動画をご覧ください。
最初は小さかった文字が、画面に入ってくるにつれて大きくなっていったのがわかると思います。このようにスクロールと連動して文字サイズを変更する演出を作ります。
実際のコード
<section class="l-section p-jon">
<ul class="p-jon__list">
<li class="p-jon__item">Twitter</li>
<li class="p-jon__item">Facebook</li>
<li class="p-jon__item">Instagram</li>
</ul>
</section>.p-jon__item {
margin-bottom: 70px;
font-size: 40px;
transform-origin: left top;
transform: scale(1);
}$('.p-jon__item').each(function(){
var $win = $(window),
$winH = $win.height(),
$connect = $(this),
position = $connect.offset().top,
current = 0,
scroll;
$win.on('load scroll', function(){
scroll = $win.scrollTop();
current = (1 - (position - scroll) / $winH) * 2;
if (scroll > position - $winH) {
$connect.css('transform', 'scale(' + current + ')');
}
if (current > 1) {
current = 1;
}
});
});解説
HTML / CSSの記述はごくごく簡単ですが、CSSの「transform: scale(1)」という記述のみ注目しておいてください。大まかな仕組みとしては、以下のようになります。
1.スクロールしたタイミングで、スクロール量・要素からみた現在位置を取得
2.あらかじめ変数で取得しておいた要素の座標($position)を用いて計算
3.スクロール量が「要素の座標 – 画面の高さ」より大きい場合、「transform: scale」の値を変動させる
Javascriptの記述を詳しく見ていきましょう。
まずは諸々の変数を定義します。「$win」「$connect」は記述を簡潔にするため、「current」「scroll」は後々使うために変数だけ用意しておくイメージです。重要なのは「$winH = 画面の高さ」「position = 要素のy座標」の2つですね。
変数の用意が終わったら、スクロールしたタイミングで処理する内容を記述していきます。最初に改めて2つの変数を定義しましょう。「scroll = スクロール量」「current = 要素から見た現在位置」の2つになります。2つのif文がありますので、それぞれの内容を確認していきましょう。
「scroll（スクロール量） > position（要素のy座標） – $winH（画面の高さ）」が成り立つ場合、この要素(.p-jon__item)のtransformの値を変動させます。「’scale(‘ + current + ‘)’」という記述では、文字連結を用いてscaleの()の中の値として「current」という変数を代入させています。
「current（要素を基準とした現在位置） > 1」が成り立つ場合、currentの値は必ず1で固定となりそれ以上は大きくなりません。先ほど見たようにcurrentは「transform: scale()」の()内の値として用いられますので、これによって要素が必要以上に大きくなる（100%以上のサイズになる）ことを防いでくれているわけです。
以上で完成です！
