jquery-peekaboo.jsが動作しなくて困った件
スクロールしながら特定の場所に指定のセレクタやクラスがあるとき
アニメーションや処理が実行できるjquery-peekaboo.jsが便利そうだし、
とてもよさそうなので、使ってみた。
すごく便利そうなライブラリなんですが、
チュートリアルや使い方などのが少なくて困りました。
本家サイトの通りコードを書いても動かない。
たぶん僕の解釈の能力が使い方についていってない
僕が解釈したのは以下のような感じ。
$('セレクタ').on('appearまたはdisappear', function()
この後におそらくCSSやanimateの構文を書けばイケると踏んだのだが、
びくともしない。
すごく親切なサイトがあって
$(function(){ $('.point').on('appear',function(){ $(this).css({opacity:'0'}).stop().animate({opacity:'1'},1000); }); });
と書いてあったのですが、私の環境では動かない・・・・。
くそう・・・。
あきらめかけたんですが、
以下で動作しましたので、もしお困りの方が一人でも救われれば
幸いです。
僕がやりたかった処理はスクロールしていき
特定の場所でアニメーションさせたい!
もちろん逆から戻しても、アニメーションするリピートするアニメーションがしたい。
では早速やってみよう。
まずはCSSで初期値をセットする。動かしたいならmarginLeftやら、
透過させたいならopacityやらを記述して下さい。
.section1 { opacity:0; }
次にこの二つのJQueryを読み込みます。
JQuery本体とPeekabooです。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script type="text/javascript" src="js/jquery-peekaboo.js"></script>
処理を施したいところを変数として宣言しました。理由は・・・・わかりませんが、動かなかったので
何度もやっているうちに変数にしていましたwww
var $section1 = $('.section1');
後は処理を記述するだけです!
$section1.peekaboo().on('appear',function(){ $(this).css({opacity:'0'}).stop().animate({opacity:'1'},1000); });
このpeekaboo()がみそで、
peekabooを使用してダイナミックなサイトを作っている方は
だいたいこのpeekaboo()を使用していました。
理由はもちろんわかりませんので、だれか教えて下さいwww
複数画像があり、フェードインする際に一個ずつフェードイン、フェードアウトしたい!
そんな時はdelayを使います。
使い方はこちら
$section1.peekaboo().on('appear',function(){ $(this).css({opacity:'0'}).stop().delay(300).animate({opacity:'1'},1000); });
delayを使うと、その要素にスクロールされた際に
指定したミリ秒ずらしてアニメーションされます。
デモは用意してませんので、使ってみて無理やったり
逆にアドバイスいただけるのであればアドバイス欲しいくらいですwww
よろしくお願いします。