(コードあり)jQuery使ってスクロールすると画像が動くアレをやってみた。

縦長のサイトで、スクロールしていくと画像が動くアレありますよね。あれ。

アレを実装しているサイト
・プロスペックス | セイコーウオッチ
・インド手刺繍の店 タンカ
・お酒卸しの株式会社知多善

jQueryで出来るのは知ってて、いつも挑戦できていなかったアレ。今回試しにやってみました。

スクロール量を知って、ifでわけてみよう。

早速ですがサンプルです。
参考リンク：スクロールすると画像が動く。

やり方は違うかもしれませんが、今回の場合スクロール量を測り、その数値が一定数を超えたら画像にしていたクラスに対してanimateするようにしました。

HTML

CSS

JavaScript

最初の開始コードではfunctionだけではなく、$(window).scrollで始めています。これを指定していないと、スクロールされた時の開始スイッチがなくなるのでコードを書いても無意味になってしまいます。

スクロール量を取得するには$(document).scrollTop();の動作を変数で受けること。

この場合はScrTopを変数宣言して、スクロール量を入れます。

そしてスクロール量が一定数以上いくと【$(“.sampleimg”).animate({marginLeft: “480”});】で移動させます。
CSSの場合、marginをかけるときはmargin-leftという書き方ですが、animateの場合marginLeftの書き方になります。

ちなみにスクロールした下がった後に、もう一度上がった場合に配置を戻すように【$(“.sampleimg2”).animate({marginRight: “0”});】も指定しています。
ただこの書き方がなんかもっと改善できそう。


今回はまず画像を動かすだけをしましたが、animateやfadeを使えば、もっと手の込んだこともできそうです。
スクロールしたらウェブサイトが色々動けるようになりたいなーという方はぜひ試してみてください。思っている以上に簡単なので。

最新投稿された記事はいかがですか？

• 南野どうなる?2015年冬から4大リーグにいったザルツブルクの選手をリストアップ！
• 毎日25分のオンライン中国語レッスンサイトまとめ。結構サイトによって金額と時間が違ってます。
• 中国語で覚えておきたい接続詞まとめ。
• [サッカーまとめ]2007-2016に欧州のクラブチームに移籍して日本人選手リスト。