Prinzhorn / skrollr

最近、パララックス効果(視差効果)を利用したワンページスクロールサイトをよく見かけるようになりました。スクロールすることで画像や文字に動きや演出が加わり印象的なWebサイトを実現しています。

今回はこのパララックス効果を利用したワンページスクロールサイトを比較的簡単に導入できる「skrollr」を紹介します。

サンプルを作ってみました。

→ Parallax(パララックス)効果を実現できる「skrollr」サンプル

エフェクトや背景画像の組み合わせ次第で、とてもお洒落でクールなワンページのスクロールサイトが実現出来ます。

作り方もエフェクトやコンテンツを<div>要素毎に設定するので比較的わかりやすく導入出来ると思います。


「skrollr」の使用方法

まず、Prinzhorn/skrollrからファイル一式をダウンロードします。

ダウンロードしたこのファイル一式の中には、cssファイル等の他にもエフェクトの使用例などのサンプルやデモがありますので参考にしてみて下さい。

<head>部分にcssを指定します。

</body>の直前にJavaScriptを設定します。

<body>部分に<div>要素毎に高さとエフェクト、コンテンツを記入していきます。高さはdataで設定します。

例えばdata-0つまりページ最上位ではパディング0、data-1000つまり最上部から1000ピクセルスクロールしたところでは、パディング300ピクセルの位置に「WOOOT」という文字を移動させるには、

となります。

最もシンプルなソースはこのような感じになります。上の<div>要素を利用してみましょう。

このソースを実行させてみます。→サンプル1
最上位0pxから下へ1000pxのスクロール間にpaddingで設定した位置へと文字が移動したと思います。

他の動きもさせてみましょう。<div>要素を以下のように変更します。

実行させてみます。→サンプル2
今度は最上位0pxから下へ1000pxのスクロール間に文字が180度回転しました。

先ほども述べましたが、本家からダウンロードしたファイルには様々なエフェクトのソースファイルなども含まれていますので、参考にして色々試してみて下さい。

今回のサンプルページのソースは以下の通りです。どうぞご参考まで。

この記事と関連してると思われる記事: