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

javascript, jQuery, WEB制作

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

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

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

スポンサーリンク

サンプル

サンプルコード

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

HTML

<div id="contents_box">
	<p>Let's scroll down</p>
	<h1 class="item_1">scroll_effect</h1>
	<div class="item_box item_2">
		<img src="http://placehold.jp/150x150.png">
	</div>
</div>

CSS

body{background:#ddd;}
#contents_box{
	margin:auto;
	height:2000px;
	width:80%;
	padding:10px;
	border:1px solid #ddd;
	background:#fff;
}

.visibility{
	visibility:hidden;
}

.item_1{
	text-align:center;
	margin:300px 0 0 0;
}
.item_box{
	margin:30px;
	text-align:center;
}

.effect_1 {
	-webkit-animation: effect_1 1s;
	animation: effect_1 1s;
	visibility: visible !important;
}
@-webkit-keyframes effect_1 {
	0% { opacity: 0; -webkit-transform: translateY(-20px); }
	100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes effect_1 {
	0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
	100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

.effect_2 {
	-webkit-animation: effect_2 1s;
	animation: effect_2 1s;
	visibility: visible !important;
}
@-webkit-keyframes effect_2 {
	0% { opacity: 0; -webkit-transform: translateX(-200px); }
	100% { opacity: 1; -webkit-transform: translateX(0); }
}
@keyframes effect_2 {
	0% { opacity: 0; -webkit-transform: translateX(-200px); -ms-transform: translateX(-200px); transform: translateX(-200px); }
	100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); }
}

javascript

(function ($) {
    $(function () {
        var item = $('#contents_box').find('.item_1 , .item_2');
        item.addClass('visibility');
        $(window).scroll(function () {
            var wh = $(window).height(),
                t_h = $(window).scrollTop();
            item.each(function () {
                var s_p = $(this).offset().top;
                if (t_h > s_p - wh + 100) {
                    var item_1 = $(this).hasClass('item_1'),
                        item_2 = $(this).hasClass('item_2');
                    if (item_1) {
                        $(this).addClass('effect_1');
                    } else if (item_2) {
                        $(this).addClass('effect_2');
                    }
                }
            });
        });
    });
}(jQuery));

コードの解説

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

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’);
こんな感じで追加してあげます。

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

var item_1 = $(this).hasClass('item_1'),
item_2 = $(this).hasClass('item_2'),
item_3 = $(this).hasClass('item_3'),
item_4 = $(this).hasClass('item_4');

if(item_1){
	$(this).addClass('effect_1');
} else if(item_2){
	$(this).addClass('effect_2');
} else if(item_3){
	$(this).addClass('effect_3');
} else if(item_4){
	$(this).addClass('effect_4');
}

CSSの記述解説

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

.effect_1 {
	-webkit-animation: effect_1 1s;
	animation: effect_1 1s;
	visibility: visible !important;
}
@-webkit-keyframes effect_1 {
	0% { opacity: 0; -webkit-transform: translateY(-20px); }
	100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes effect_1 {
	0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); }
	100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

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

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

備忘録

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

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

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