横スクロールのサイトのプラグイン『jinvertscroll』

お正月もあっという間にすぎちゃいますね、色ピエロです。

今日は最近よく見かけるパララックスページのメモ。

今回は横スクロールの『jinvertscroll』の使い方について。

まずは『jinvertscroll』ページにあるjinvertscroll.zipをダウンロードします。
jinvertscrollのページ

解凍して、その中のexampleフォルダを参考にすれば私の解説なんか見なくても、
すぐにできると思います。

解説はexampleを少しいじった感じで書いていきます。

まずはhtmlファイルにスクリプトの呼び出し記述します。

この2つの呼び出しは必須みたいです。

あと以下のjavascriptも記述します。

これはexampleのまんまですが、コメントだけ自分で変えてます。

htmlはこんな感じです。

時間差で動いて欲しい背景画像の数だけ、<div>を増やしてください。

一番前に来る<div>(ここでは.front)には文章等を記述していきます。
.frontの中身はsectionなどでテキストページを分けとくいいと思います。

次にCSS

前半

ポイントはpositionとz-indexですかね？
図で説明するとこうなってる感じです。

後半はこう

positionはabsoluteにしてください。
これは図で説明するとこんな感じです。

4ページもleftの数値だけ変更してあるのみです。
私自身まだ使いこなせてないので、更に勉強しなくては・・・