スクロールした値の分、要素がゆっくりついてくる[スクロールイベント基本]

スクロールに合わせてアニメーションを実装

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関数で上限をつけている。
jquery.logo

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!

この記事を書いた人

bobuのアバター bobu Webクリエイター

ホームページ制作、リメイク、バナー、画像制作を行っています。
毎朝5:00-7:00 まで朝活で ITの知識を インプット+ Twitter へアウトプット。
お仕事のご依頼は「お問い合わせページ」からご連絡ください。