スクロール簡単なスクロール出現アニメーションを数行のJsとCSSで実装する(ライブラリなし)HOMEJavascript簡単なスクロール出現アニメーションを数行のJsとCSSで実装する(ライブラリなし)画面が表示された時にアニメーションでコンテンツが表示されるサイトがここ数年でだいぶ増えてきました。要素を順番に表示させて目を惹かせたりすることで、サイトを閲覧する際の指標というかガイド的な役割をしています。動かしすぎると、ゴチャゴチャしますが...。このタイプのアニメーションのほとんどは「スクロールがここまで達したらアニメーションをする」って命令で動いてます。Javascriptのライブラリでも「wow.jsとAnimate.css」を使って、アニメーションさせているパターンもありますが、もっと簡単に数行のjQueryの記述とCSSでスクロールしたら出てくるアニメーションを実現してみようと思います。何をしているかっていうとjQueryで指定の位置から◯◯px以上表示されたらclassを与える。CSSのアニメーション(transition)を使って、動かす。いうだけの簡単な流れです。アニメーションをさせたい要素のHTMLを記述する。<li>要素C</li></ul>今回のアニメーションさせる場合のHTMLのポイントは動かしたい要素の一つ上(親要素)に「.animate」というclassを記述する事です。することによって、jQueryで子要素に指定のclassが付与される命令を与えることができます。*”).」として、このclassがある場合は、常にアニメーションを起こせるように書いておきます。現在の位置とスクロール量を定義して、スクロールしてコンテンツが200px以上現れたときにclass名を付与するようにしています。することによって、さきほどのHTMLはスクロールして、要素が現れて200px過ぎると、こうなります。class="moving">要素要素C</li></ul>CSSでアニメーションを追記する。最後にCSSでアニメーションを追加すれば、OKです。下から上に順番に現れてくる場合だとこんな感じ。1;」になって現れる。0;」になって、上に上昇してくる動きになります。その他にも、「left・right」で横からとか、positionプロパティを使って移動することによって、アニメーションを実行できます。他にも回転とかCSSのプロパティで使える範囲なら、何でもOKです。今回のアニメーションはスクロール値で判断して、CSSのclassを与える方法なので、ページの最初の画面(ファーストビュー)では、少しでもスクロールしないと、アニメーションがされないのでファーストビューがスカスカ状態になりかねません。そんな場合は、単純にclass名を付与するだけの単純なjQueryを書いておけばOKです。p").addClass("animate");※さっきの.scroll(function()とは別物と考えてください。色んな動きで遊べると思いますので、色々やってみてください。面白がって動かしすぎて、見えづらいサイトになったら本末転倒なんでご注意を。コメントをキャンセルメールアドレスが公開されることはありません。Memo当ブログの管理人Kc_fuji(け-し-)です。WEB制作会社に務めるサラリーマンです。このブログは、制作の覚え書きとWordpressの実験所として利用しています。PAGEWEB(K)Campus(WEB系キャンパス)は娯楽は少なめ。