読者です 読者をやめる 読者になる 読者になる

東京の会社辞めて地方で生きるわ。

勢いで会社を辞めて縁のない地方で生きることはできるのか

【jQuery】fullpage.jsの使い方

html

<!--sectionタグごとにぐりっとスクロールする -->

<div id="fullpage">
  <section class="section"></section>
  <section class="section"></section>
  <section class="section"></section>
  <section class="section"></section>

</div><!-- fullpage -->

css

head内に記述

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.6/jquery.fullPage.min.css">

javascript


/bodyのすぐうえに記述

scrollOverflowオプションはウィンドウサイズより縦が長いコンテンツのボックスの場合は普通にスクロールするように設定できる。
onleaveはスクロールしたあとに関数を呼ぶためのオプション。
これをしないと他のjsが動かない。

<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.6/vendors/jquery.easings.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.6/vendors/jquery.slimscroll.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.6/jquery.fullPage.min.js"></script>

$(document).ready(function() {
 $('#fullpage').fullpage({
    scrollOverflow: true,
		onLeave: function(index, nextIndex, direction){
			if(index == 1 && direction =='down'){
			//セクション1を下にスクロールしたとき実行されます
				particlesJS();
			}
			else if(index == 2 && direction =='up')
			//セクション2を上にスクロールしたときに実行されます
				alert('2枚目を上にスクロールして、こんにちは1枚目!');
		}
 });
});


【参考url】

・ここにオプションの意味が記載
http://www.electric-fruits.com/creator-blog/fullpage-js-memo-201507/
http://cly7796.net/wp/javascript/plugin-fullpage/

・ここにオプションの書き方が記載
https://github.com/alvarotrigo/fullPage.js#fullpagejs