• Web

jQueryプラグイン「Waypoints」でスクロール中に要素が出現するサイトを作ろう!

jQueryプラグイン「Waypoints」

「Bootstrap」テンプレートで特定位置までスクロールすると、要素がフワッと表示されるアニメーションを良く見かけます。何それって方はコチラ(Boxify)
その中でも多くのテンプレートに採用されていたスクロールイベントを制御できるプラグイン「Waypoints」を使用し、実際のホームページ制作でも使えるようにIE8対応を目指してみたいと思います!

まずはデモをご覧ください。


1. デモ

jQueryプラグイン「Waypoints」デモ

特定の位置までスクロールすると、要素が下からフェードインしてきます。

2. ダウンロード

「jQuery」本体はダウンロードするか、Googleにホストされているファイルを読み込みましょう。
「Waypoints」のバージョンは3.1.1です。下記サイトからダウンロードし「lib」フォルダ内の「jquery.waypoints.min.js」を使用します。

3. HTML&CSS

ある程度の高さがないとスクロールできませんので、その辺を注意しながらマークアップしましょう。
ダウンロードしたプラグインも忘れないように読み込ませてください。下記は「body内」です。

<header id="header">
	<h1>Waypoints</h1>
</header>
<p id="text">jQuery Waypoints Demo</p>
<div id="content">
	<div id="wrapper">
		<section class="section">
			<figure class="thumb"><img src="img/thumb1.jpg"></figure>
			<h2>Title</h2>
			<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
		</section>

		<section class="section">
			<figure class="thumb"><img src="img/thumb2.jpg"></figure>
			<h2>Title</h2>
			<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
		</section>

		<section class="section">
			<figure class="thumb"><img src="img/thumb3.jpg"></figure>
			<h2>Title</h2>
			<p>Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text</p>
		</section>
	</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/jquery.waypoints.min.js"></script>

今回はハイライトされている箇所をフワッと表示させていきます!
スタイルは適当で構いませんので、見やすいように整えておきましょう。

body { margin: 0;}
#header {
	background-image: url('img/image.jpg');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/image.jpg', sizingMethod='scale');
	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/image.jpg', sizingMethod='scale')";
	text-align: center;
	display: block;
	min-width: 960px;
	padding: 360px 0px;
}
h1 {
	border: solid 2px #fff;
	color: #fff;
	font-size: 59px;
	display: inline-block;
	margin: 0;
	padding: 16px 32px;
}
h2 {
	color: #4f4d47;
	font-weight: normal;
	font-size: 23px;
	margin: 0;
	padding: 8px 0;
}
p { color: #4f4d47; font-size: 14px; margin: 0;}
#text { font-size: 23px; text-align: center; min-width: 960px; padding: 64px 0;}
#content { background: #f5f3ec;}
#wrapper { width: 960px; margin: 0 auto; padding: 64px 0;}
#wrapper:after { content: ""; clear: both; display: block;}
.section { box-sizing: border-box; width: 33.33333333%; float: left; padding: 0 8px;}
.thumb { margin: 0;}
.thumb img { display: block; width: 100%; height: auto;}

「Waypoints」とは関係ありませんが、ハイライトの箇所は「background-size:cover」をIE対応させたものです。
「background-size:cover」は背景画像の比率、アスペクト比を保った状態でウィンドウいっぱいに表示させることができるCSS3のプロパティなんですが、IE9からの対応でIE8では使用できません。
今回はIE8対応を目指したいので「filter」でウィンドウ一杯に広げてますが、この方法だとアスペクト比を保てないので、まともな対応をしたい方はプラグインを使用するようにしましょう!

4. Waypoints

スクリプト部分の全体像は下記のような感じです。

$('.section').css({position:'relative', top:'8px', opacity: 0});

var i = 0;
var length = $('.section').length;
var int;

function doThis(){
	if(i >= length){
		clearInterval(int);
	}else{
		$('.section').eq(i).stop().animate({top:'0px', opacity: 1}, 1000);
		i++;
	}
}

$(function(){
	$('#wrapper').waypoint(function(){
		int = setInterval('doThis(i)', 500);
	},{
		offset : '95%'
	});
});

では、小分けにして簡単に説明させてください!

$('.section').css({ position:'relative', top:'8px', opacity: 0 });

「.section」クラスにスタイルを追加しています。
CSSに直接記述しても問題ないですが、スクリプトが読み込まれなかった際に「透明で見えない」ということは避けたいので、念のためスクリプト側に記述しておきます。

var i = 0;
var length = $('.section').length;
var int;

「i」に「0」を、「length」に「.section」要素の数を取得し、代入しています。「.section」というクラスを付与した要素は3つですので、この段階で「length」には「3」が代入されます。

function doThis(){
	if(i >= length){
		clearInterval(int);
	}else{
		$('.section').eq(i).stop().animate({top:'0px', opacity: 1}, 1000);
		i++;
	}
}

「Waypoints」のトリガーポイントで「doThis」という関数を実行したいので、事前に定義しておきます。

「i」のカウントが「length」以上になれば、設定した「Interval(int)」をクリア。そうでない場合は「.section」の「i」番目の要素に「top:’0px’」「opacity:1」に1000ミリ秒かけて変化させ、最後に「i」をインクリメント(1づつ足す)。という条件分岐を記述しています。

$(function(){
	$('#wrapper').waypoint(function(){
		int = setInterval('doThis(i)', 500);
	},{
		offset : '95%'
	});
});

「Waypoints」使用の際は「$(‘セレクタ’).waypoints(処理);」と記述します。
処理の内容は定義しておいた関数「doThis」を500ミリ秒感覚で呼び出します。条件分岐を設定しておいたので「i」が「length」以上になると処理は終了します。

「Waypoints」のトリガーポイントですが、「$(‘セレクタ’)」の要素がブラウザ上部に触れた時がデフォルトとなっています。
今回のように「要素が下部に配置されていてブラウザ上部に届かない」、「タイミングが遅すぎるor早すぎる」場合は「offset」オプションを使います。

「offset」はトリガーポイントの位置を変更できるオプションで、ここでは「95%」を設定しています。これにより「#wrapper」が付与されている要素がブラウザの上部から「95%」の位置にきたときに処理が実行されるようになります。数値はピクセル単位も可能で、マイナスの値も可能ですよ!

デモの内容は以上ですが「Waypoints」には、他にもいくつかオプションがあるので、確認したい方は下記サイトの右上にある「API」からどうぞ!

5. CSS3を使用したい場合

IE9以下の対応を考えてない方は、スムーズにアニメーションできるCSS3のほうがいいですよね!デモの内容を少し書き換えるだけで出来るので、そちらも記載しておこうかとおもいます。

<section class="section">…</section>
<section class="section delay-05s">…</section>
<section class="section delay-1s">…</section>

「.section」が表示されるタイミングを変えたいので、2個目、3個目の「.section」に、それぞれ「.delay-05s」「.dekay-1s」のクラスを足しておきます。

.fadeInUp {
	-webkit-animation: fadeInUp 1s cubic-bezier(.55,0,.1,1) both;
	animation: fadeInUp 1s cubic-bezier(.55,0,.1,1) both;
}
@-webkit-keyframes fadeInUp { from{ opacity: 0; -webkit-transform: translateY(8px); transform: translateY(8px); }}
@keyframes fadeInUp { from{ opacity: 0; -webkit-transform: translateY(8px); transform: translateY(8px); }}
.delay-05s {
	-webkit-animation-delay: 0.5s;
	animation-delay: 0.5s;
}
.delay-1s {
	-webkit-animation-delay: 1s;
	animation-delay: 1s;
}

デモのスタイルにこれらを追加しておきましょう。
「.delay-05s」「.dekay-1s」には「animation-delay」プロパティを設定し、0.5s毎に表示されるようにしておきます。
CSS3アニメーションは下記の記事にて記載してますので、省かせていただきます。

$(function(){
	$('#wrapper').waypoint(function(){
		$('.section').addClass('fadeInUp');
	},{
		offset : '95%'
	});
});

スクリプトはこれだけ。デモでは関数を使用しましたが、CSS3の場合は使いませんので削除してしまいましょう!
ハイライト部分は「.section」に「.fadeInUp」というクラスを追加する処理です。

これでCSS3を使用したアニメーションは以上です!

「Waypoints」いかがでしたか?
簡単に面白い仕掛けを作れるので、色々と試して頂ければ幸いです!

  • このエントリーをはてなブックマークに追加

記事を書いた人

アバター画像

Webディレクター / デザイナー

前川 洋輝

Hiroki Maekawa

高校生のとき、窓際の席でよく外をみてボーッとしてたら、友達から「いつもどこみてるの?」ときかれて「宇宙かな・・・」といったら「サイコ野郎」と言われてしまうくらい痛い青春時代を送りました。青春を取り戻すため、タイムマシンを作れる人を探す活動をしています。

コメント

  • ハルナ

    返信

    大変参考にさせていただいてます。
    動きはcss3でやる場合なんですが同じページに複数回使いたい場合は、jsにどう記述すればいいんでしょうか?
    よろしくお願いいたします。

    • アバター画像

      前川

      ありがとうございます!
      作ってみましたが、大体こんな感じでしょうか・・・。ソースを見て頂けるとある程度解釈できるのではないかと思います。

      https://neganin.com/demo/waypoints/css3.html

      何かあれば、気軽にお尋ねください。

    • ハルナ

      出来ました。とても助かります。ありがとうございます^^

      ちなみに、
      https://daneden.github.io/animate.css/
      ↑↑
      ここのanimateの記述を参考に例えば『bounceIn』を実装してみたのですが、
      どうしてもうまくいきません。

      何かやり方があるんでしょうか?
      連投攻めですいません。

    • アバター画像

      前川

      とんでもないです。解決に至り良かったです!

      animate.cssは「.bounceIn」のみのクラス付与だと動きません。
      試しに「.animated」というクラスも付与してみてください。

      記述はjQueryのクラス付与の箇所を「.addClass(‘animated bounceIn’)」とすれば出来るんではないかなー?と思います!

    • ハルナ

      即返信ありがとうございます!
      早速試してみます^^

  • 野口

    返信

    お世話になります。
    試させていただいたのですがfirefoxで要素の確認をしたところ clearInterval(int); の部分にエラーがでてしまいます。
    これは放置していても問題ないものなのでしょうか。
    素人で申し訳ないのですが教えていただけると幸いです。
    よろしくお願いします。

    • アバター画像

      前川

      コメントありがとうございます。ご指摘の通り「clearInterbal(int)」部分でエラーがでておりました。現在はエラーが出ないものに差し替えております。

      変更箇所は事前に「var int;」の記述を加え、「setInterval」の際に「var int」としていた部分の「var」を取るとエラーがでなくなります。
      大変失礼致しました。

  • 野口

    返信

    ご対応ありがとうございました!
    試してみます!

コメントする

ブログカテゴリー

TOP