紙芝居のように見せるfullPage.js

jQueryのプラグインfullPage.jsでスクロールするとsectionをスライドして、紙芝居風のページが作れます。

ウィンドウの高さが無い環境のために、オプションもあるみたいですが、変な所にスクロールバーが出てしまったりで、見た目が良くない感じなので、各sectionの要素を少なめにデザインした方がよいです。

基本的にsection完結型なのですが、コールバックがあるのでトリガーに使うのが良いかも。
もう一つのスクロールコンテンツを作って、fullpageが動く度に、スクロールコンテンツも動かしてあげると、Apple iPhone5のようなパララックス的な感じが作れると思います。

オプション設定が豊富でいろんな用途に使えそうです。

$('#fullpage').fullpage({
	verticalCentered: true,
	resize: true,
	sectionsColor: [],//['#ccc', '#fff']
	anchors:[],//['firstSlide', 'secondSlide']
	scrollingSpeed: 700,
	easing: 'easeInExpo',//default=easeInQuart
	menu: false,
	navigation: false,
	navigationPosition: 'right',
	navigationColor: '#000',
	navigationTooltips: [],//['firstSlide', 'secondSlide']
	slidesNavigation: true,//default=false
	slidesNavPosition: 'bottom',
	controlArrowColor: '#fff',//??
	loopBottom: false,
	loopTop: false,
	loopHorizontal: true,
	autoScrolling: true,
	scrollOverflow: false,
	css3: false,
	paddingTop: 0,//'3em'
	paddingBottom: 0,//'10px'
	fixedElements: null,//'#element1, .element2'※エレメントにposition:fixedのCSSを追加する
	normalScrollElements: null,//normalScrollElements: '#element1, .element2',※Mapやセクション内のスクロールさせたいブロックなどの時
	keyboardScrolling: true,
	touchSensitivity: 5,
	continuousVertical: false,
	animateAnchor: true,
	normalScrollElementTouchThreshold: 5,//normalScrollElementTouchThreshold: 5,

	//events
	onLeave: function(index, nextIndex, direction){},
	afterLoad: function(anchorLink, index){},
	afterRender: function(){},
	afterResize: function(){},
	afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
	onSlideLeave: function(anchorLink, index, slideIndex, direction){}
});

※いくつかのプロパティと仕様が変更していたので、アップデートには注意が必要です。

htmlとbodyにoverflow:hiddenが記述されてしまうので、縦のみにしたい場合には、オリジナルのjsを修正する必要あり。
overflowで検索をかけると４つくらいでてくるので、その内のbody指定されている部分をoverflow-y:hiddenにすればOKでした。
これで、bodyにmax-width:1200px;なんかを指定しておくとスクロールバーが出るようになりました。

【参考】iPhone 5s
http://www.apple.com/jp/iphone-5s/

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル