jQuery+css3でスクロールすると要素をアニメーションで表示するやつ

javascript, jQuery, WEB制作

画面を下にスクロールしたら画像やらテキストやら等の要素を、ふわっっとアニメーションして表示されるやつのコードを書いてみました。

こういったエフェクトを使用しているページは、キャンペーンサイトとか、商品のランディングページとかによく使われていますね。
実装は比較的簡単なので、結構使いやすいですし、アニメーションの動作にはcss3のanimationを使っているので、自由度も高いです。

ちょっとしたページのアクセントの有無で、ユーザーのアクション・購買意欲に影響が出てくるので効果的に使っていきたいところですね。

サンプル

サンプルコード

このサンプルではjQueryのバージョン1.11.0を使っています。

HTML

CSS

javascript

コードの解説

そんなに長くないコードですが、一応初心者さんの為に噛み砕いて解説していきます。

HTMLの記述解説

jQueryを読み込んでいなければ動かないので、headもしくはbodyの閉じタグ直前あたりにjQueryを読み込ませる記述をしておきましょう。

HTML部分では、ふわっと表示させる要素にclass名を付けておきます。
特に特筆すべき点は無いのですが、要素全体を囲っている親要素にはID名を付けておきましょう。
jQueryの動作速度を早くする為の記述です。

javascriptの記述解説

他のjavascriptライブラリとの衝突(コンクリフト)を回避する為に、カプセル化をしておきます。
勿論、他のライブラリを使わない場合であれば、カプセル化をしなくても大丈夫。

次にDOMの構築完了後に処理を動作させなければ変なエラーが出てしまう場合があるので、$(function(){で処理を囲みます。

jQueryのカプセル化の解説画像
jQueryのカプセル化の解説

次に処理の1行目と2行目で、指定の要素にclassを追加し、CSS側でvisibility:hidden;で非表示にしています。
最初からCSSで非表示にしていると、javascriptをOFFにしているユーザーが、表示される要素を見れなくなってしまうので、javascript側の処理で非表示にします。

処理の解説1の画像
処理の解説1

ここからが肝の部分です。

処理の肝の部分の画像
処理の肝の部分

5行目のif (t_h > s_p – wh + 100) {の【+100】としている部分は、classを追加する処理を実行するスクロール位置の調整です。この数値を200や300に変えることで、処理の実行位置を調節出来ます。

6行目から11行目までで指定している、条件分岐ですが、スクロールアニメーションは1ページで複数使うと思われるのでこういう記述にしました。

新たに要素を追加する場合は、最初のほうで変数に格納した
var item = $(‘#contents_box’).find(‘.item_1 , .item_2’);
これをこういうふうに・・・
var item = $(‘#contents_box’).find(‘.item_1 , .item_2, .item_3, .item_4’);
こんな感じで追加してあげます。

そして条件分岐の方でも同じように変更してあげる必要があります。

CSSの記述解説

CSS3のanimationを使い、アニメーション効果を出しています。
javascript側の処理で追加される【.effect_1】等のclass名で指定しています。
このサンプルではショートハンドを使い簡略して書いています。

animationでnameの設定と実行時間の設定をしています。
実際の処理は@keyframesの中に記述する。

このサンプルでは簡単にtransformとopacityの指定しかしていませんが、色を変えたり幅を変えたりbox-shadowをつけたり・・・と様々なアニメーションが出来ます。

備忘録

久々にjQuery触ったので、解説記事作るのに時間がかかりました(;・∀・)
wordpress触っていると大抵pluginで解決しちゃうことが多いので、どうしてもjQueryのコードを書くことが少なくなっていくんですよね。

pluginを使うのもいいですが、やっぱり自由度を考えると自分で書いて作ったほうがいいですね。

この記事が気に入ったら
『いいね』しよう!