Blog

スクロールに応じてコンテンツにエフェクト効果をつける - scrolldeck –

今回はスクロール関係のプラグインを試してみたので、そちらの説明をさせていただきます。

 

scrolldeck.jsというプラグインなのですが、

こちらはscrolloramaというプラグインがもともとあって、それを利用したもののようです。

プラグインのプラグインみたいな感じなんでしょうか。

 

http://johnpolacek.github.com/scrolldeck.js/

 

同じスクロール効果のプラグインですが

違いとしては、

scrolloramaが、スクリプトで、アニメーションの速さや効果、開始時、終了時を設定しないといけないのに対し、

scrolldeckは、クラスに決められたスタイルを指定し、「data-animation」というdata属性を使用し、動きを指定するだけでOKという形です。

(HTML5ですのでご注意ください!)

 

デモを作成したので、よろしければご覧ください。

 

DEMO

 

 

scrolldeckの使い方

 

head内に以下のソースを読み込み、

 

bodyの閉じタグの前に、

 

を記載し、

HTMLは、コンテンツ毎に、

 

とします。

この場合、ダウンロードしたファイルのstlye.cssの.slideの部分をコピーしたほうが良いと思います。

 

あとは、効果を付けたい箇所は、以下のようにします。上記divの中に記載します。

 

demoの説明をさせていただきます。

javascriptは、上記のものと同じなので割愛します。

 

html

 

css

 

 

メニューの箇所については、クラスにnav-buttonを設定すると、

スクロールしている箇所に応じて、メニューのクラスにcurrentが追加されるので、

cssで設定すれば、どこを見ているのかというのがわかりやすくなります。

 

試してみた感想ですが、本家のデモと同じような形にしかできず、

コンテンツ毎の間隔を短くしようとすると、動きがおかしくなってしまいました。

 

ランディングページ等にはいいかもしれませんが、普通のwebサイトだと間隔広すぎてちょっと使いづらいかもしれません。

 

理想としては、以下のサイトのような間隔でできるいいかもしれません。

 

最近気になったサイトです。 

JINS PC

このメガネ欲しい・・・

Author Profile

Y.A

アベと申します。
ディレクター兼デザイナー兼コーダーです。
まだまだ未熟者ですが、日々頑張っています。。。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ