jQueryを使って、スクロールしてコンテンツが現れたときにアニメーションさせてみる

最近更新ペースが遅くなっています。最近仕事の関係でサイトを作っているのですが、そこで使った方法を紹介します。スクロールしてコンテンツが現れたときにアニメーションが開始します。jQueryを使っています。

scroll-tittle.png

言葉ではイメージしにくいかもしれません。百聞は一見にしかず、ということでサンプルをご覧ください。画像が画面内に表示されると右にアニメーションします。

プラグインもありそうですが、安易にプラグインを使うのではなく自分で作った方が勉強になります。また、プラグインによっては色んな機能があるために無駄に容量が大きくなってしまうこともあります。そんな場合は、必要な機能だけ自分で書く方が読み込み速度的にも効果的なのかなと思います。

jQuery全体はこんな感じになります。

$(function(){
  $('.effect').css("opacity",".3");
  $(window).scroll(function (){
    $('.effect').each(function(){
      var imgPos = $(this).offset().top;    
      var scroll = $(window).scrollTop();
      var windowHeight = $(window).height();
      if (scroll > imgPos - windowHeight + 200){
        $(this).animate({ 
          "margin-left": "50px",
          "opacity": "1"
        }, 1000);
      }
    });
  });
});

クラス「effect」が指定されている要素に適用されることになります。今回のサンプルでは画像にクラスを指定しています。

<img src="img/sample1.png" alt="" class="effect" />

では、jQueryの内容をできるだけ丁寧に説明してみます。jQueryが苦手な人は、今回がjQueryを学ぶきっかけになればうれしいです。

2行目
$('.effect').css("opacity",".3");

まず、「.effect」を半透明にします。CSSで指定してもいいわけですが、何らかの理由でjavascriptが動かない場合は半透明のままになってしまうのでこちらで指定してみます。

3行目
$(window).scroll(function () {

スクロールしたときに以下の内容がおこなわれます。

4行目
$('.effect').each(function(){

「.effect」が現れるたびに以下に記述する内容を繰り返します。

5行目
var imgPos = $(this).offset().top;

「.effect」の位置をimgPosとします。

6行目
var scroll = $(window).scrollTop();

ユーザーがスクロールした量をscrollとします。

7行目
var windowHeight = $(window).height();

ウインドウの高さをwindowHeightとします

8行目
if (scroll > imgPos - windowHeight + 200) {

スクロールしてコンテンツが200px以上現れたときに後で記述するアニメーションが開始します。

図で説明すると以下のようになります。

scroll.png
9~12行目
        $(this).animate({ 
          "margin-left": "50px",
          "opacity": "1"
        }, 1000);

変化の内容を指定します。内容はいくつでも追加することができます。 「1000」は変化に要する時間です。ミリ秒で指定しますので、「1000」だと1秒です。

ということで説明してみました。ウェブサイトにちょっとした動きを付けたいときに役立つと思います。

今回のサンプルの他にも色んな動きを付けることができますので、今後色々紹介できればと思います。

フィードやTwitterで最新情報をチェック
follow us in feedly
この記事に付いているタグの最新記事一覧
loading...
コメント
大変参考になります。ありがとうございます。
ひとつ質問があります。
スクロール後に動かしたオブジェクトが
画面の外にでたときに戻しておく
=再度スクロールした時に動かしたい場合は、
どうすれば良いのでしょうか?
【2014/06/19 18:01】 | tanigu #eivUm7So | [edit]
taniguさん!codeだけですけど... ご参考してください.
http://jsfiddle.net/n48vo11b/
【2015/02/23 14:26】 | codeRecipe #1l5FXNLU | [edit]









※コメントはご意見ご感想や間違いのご指摘等にしていただけますようお願いいたします。コメントを確認する時間がなく、技術的なご質問をいただいても答えできません。申し訳ございませんがご理解のほどお願いいたします。

Recent Entry
Popular Entry
  • このエントリーをはてなブックマークに追加