jQueryを使って、スクロールしてコンテンツが現れたときにアニメーションさせてみる
最近更新ペースが遅くなっています。最近仕事の関係でサイトを作っているのですが、そこで使った方法を紹介します。スクロールしてコンテンツが現れたときにアニメーションが開始します。jQueryを使っています。 言葉ではイメージしにくいかもしれません。百聞は一見にしかず、ということでサンプルをご覧ください。画像が画面内に表示されると右にアニメーションします。 プラグインもありそうですが、安易にプラグインを使うのではなく自分で作った方が勉強になります。また、プラグインによっては色んな機能があるために無駄に容量が大きくなってしまうこともあります。そんな場合は、必要な機能だけ自分で書く方が読み込み速度的にも効果的なのかなと思います。 jQuery全体はこんな感じになります。 $(function(){ $('.effect').css("opacity",".3"); $(window).scroll(
jQueryでパララックスサイトの様にスクロールして要素が出現した時点でアニメーション等のイベント処理を実行させる実験｜BLACKFLAG
パララックスサイトやAppleのプロダクトページの様な動きを付ける為の スクロールして特定の位置でアニメーション等の処理を実行させることができる jQueryプラグイン等をここでも何度か紹介しましたが プラグインのバージョンによって動作仕様が変わってしまっていたり 上からのスクロールと、下からのスクロールの判断が微妙だったりしたので なんとか簡単にスクロールの上下を判別させて、 なにか処理を実行させるスクリプトができないものか 試しに作ってみたので紹介してみます。 まずはサンプルから。 下記の画面をスクロールするとコンテンツ要素が順々にフェードインします。 「jQueryでパララックスサイトの様にスクロールして要素が出現した時点でアニメーション処理実行させる実験」サンプルを別枠で表示 上記サンプルでは6つコンテンツエリアを縦に配置してあります。 上からスクロール（ダウン）してそれぞれのコン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
