実際の案件でつまづいたポイントまとめ。
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を再生させる
}
}
});
});