紙芝居のように見せる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で検索をかけると4つくらいでてくるので、その内のbody指定されている部分をoverflow-y:hiddenにすればOKでした。
これで、bodyにmax-width:1200px;なんかを指定しておくとスクロールバーが出るようになりました。

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

時計の修理

2つの時計の修理のため、購入店に持って行きました。

修理前

1つ目の時計は傷と電池交換の修理で、見積もりは
「3,000円以上かかる場合は、改めてご連絡します」
ということでしたが、後日連絡が来て
「レンズ交換が必要なので、時計の購入金額より高くなります!(キリッ)」
とのこと。
えーっと^^; もちろんキャンセルです。

自分で直せるのでは?って思ってホームセンターへ行ってきました。

コンパウンド

KUREのキズ消しコンパウンド(お試しセット)を700円くらいで買ってきて、説明書通りに
極細 → 中細 → 細目 → 中細 → 極細
という順番で磨いてみたところ・・・

修理後

ほとんど傷が消えました!
これで時間見るときも気にならなくなったので、ストレスがなくなりました!
電池交換は蓋が開かなかったので、近所の時計屋にお願いしようかな。

2つ目の時計は、オーバーホールと部品交換が必要だそうで、なんと36500円もかかるんだそうです。
予算オーバーだったので、こちらもキャンセルしました。

こっちは自分で直せないので、せっせと働いてその内直します・・・