スクロールに合わせてアニメーションを実装
JQuery を使ったスクロールイベントの基本的なやり方です。
スクロールした時にただ画面に固定するだけなら CSS で position: fixed; のほうが手軽。
メニュー、ロゴ、キャラクターなど、ゆっくりと降りてくるアニメーションがほしい時に有効。
スクロールすることで2つの要素にアニメーションが掛かります。
黒い三角はゆっくりと上下のスクロールについてきて、黄色い四角はスクロールに合わせて左右に動きます。
See the Pen Untitled by ぼぶ@朝活input中 (@bobu_6326) on CodePen.
解説
CSS
position: absolute; は必須、これがないとJQuery をいくら操作しても要素は動かない
その他の CSS は装飾用
JQuery
- $(window).scroll(function(){ }); = 画面がスクロールするたびに{ } 内の処理判定を行う。
- var y = $(this).scrollTop(); = この場合の this は window(画面に表示されている部分) を示す。
変数には scrollTop(ページの一番上) から「いくつ下がった場所が画面に映っているか」を取得している。 - $(“class名”).animate({top: y},20) = top の値を 変数y で変動させている。
,20 はアニメーションのスピード。 値を小さくすれば早く付いてくる。 - .square には if関数で上限をつけている。
