特定のセレクタ、クラスが来た時にアニメーションさせる〜JQuery本体編〜
備忘録として記載しますので、参考程度に見てください。
参考にしたのは以下のブログ。非常にわかりやすく記述されていました
http://weboook.blog22.fc2.com/blog-entry-385.html
ここから少し自分なりにカスタマイズ
至ってシンプル!
とりあえずJQueryを読み込んで
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
あとはJQueryで動かしたいセレクタ、またはクラスが来た時の処理を記述するだけ
$(function(){ $(window).scroll(function (){ $('セレクタ名またはクラス名').each(function(){ var point = $(this).offset().top; var scroll = $(window).scrollTop(); var windowHeight = $(window).height(); if (scroll > point - windowHeight + 200){ $(this).animate({"top": "600px"}, 1000); } }); }); });
CSSで初期値というか動かしたい要素を最初どこに配置するのか、その辺もしっかり計算して
最初にCSSで制御する必要あり!