fullpage.jsの使い方まとめ

fullapge js ハンバーガーメニュー スクロール

実際の案件でつまづいたポイントまとめ。

fullpage.jsでハンバーガーメニュー内のスクロールを可能にする方法

以下のオプションを指定すればOK。

<script>
$(document).ready(function() {
 $('#fullpageContainer').fullpage({
  normalScrollElements: ".className", //縦スクロールを許容させたい部分のクラス名を記載
 });
});
</script>

<video>タグでautoplayにしたはずの動画が、別のセクションに移動して戻ってくると停止しているときの対策

fullpage.jsを使ったサイトのファーストビューで、全画面表示の動画を埋め込んだ。

今時よくある「サイト開いたらファーストビューいっぱいに動画が再生される」というパターン。

htmlの構造は以下。

<div id="fullpageContainer" class="fullpageContainer">
	<section>
		<h2>セクション①</h2>
		<video class="firstview-movie" autoplay muted loop playsinline src="firstview.mp4"></video>
	</section>
	<section>
		<h2>セクション②</h2>
	</section>
	<section>
		<h2>セクション③</h2>
	</section>
</div>

実際にサイトを見てみると、困ったことが起きた。

サイトにアクセスしてファーストビュー(セクション①)が開いた時は、問題なく動画が自動再生される。しかし、下スクロールで次のセクション(セクション②)に移動したあと、上スクロールで再度ファーストビュー(セクション①)に戻ると、動画は止まったままで自動再生されなくなっていた。

つまり以下である。

【サイトにきてファーストビュー(セクション①)を開いた時
→問題なく動画は再生される

【ファーストビュー(セクション①)で動画の再生を確認した後、動画の途中で画面をスクロールしてセクション①からセクション②に移動して、その後セクション①に戻った時】
→動画は止まったままで自動再生されない。

結論、解決策は以下。

fullpage.js のオプション「onLeave」を使って、セクション②を上にスクロールしたときに、動画を再生する記述を書く。

これで、セクション②からセクション①に戻った時に、動画が止まらず再生されるようになった。

$(document).ready(function() {
	$('class名かid名を入力').fullpage({
		onLeave: function(index,nextIndex,direction) {
			var index = index.index;
			//2つ目のセクションを上にスクロールしたとき
			if(index == 1 && direction == 'up') {
				$('.firstview-movie')[0].play();	//videoを再生させる
			}
		}
	});
});

この記事を書いた人

hiro

美味しいご飯とお酒と一人旅が好き。EC企業に5年▶︎web制作フリーランスへ。ECサイト制作、デザイン、コーディング、サイト分析、CVR改善、ブログ書いたりして生活しています。

旅行ブログ「アジアをひとりで旅してみたら」も運営中。