画面の中央から割れるような動きの「Fullscreen Slit Slider」プラグインでインパクトアップ

   

画面の中央から割れるような動きの「Fullscreen Slit Slider」プラグインでインパクトアップ

画面の中央にスリットが入り、割れてスライドする動きのjQueryプラグイン「Fullscreen Slit Slider」をご紹介します。

ダイナミックな動きでファーストビューにかなりインパクトが出るので、商品やサービスの訴求力アップに効果的ではないでしょうか。

まずはデモをご覧ください。

サンプルデモ・ダウンロード

画像は背景に設定されているので、手前にコピーを入れることができます。CSS3のアニメーションを利用してスムーズでキレのある表現を実現しています。フルスクリーン表示も可能です。

設置方法

上部で、CSSを読込

続いてHTMLの記述、

最後にJSを読込、設定を記述します。

各スライドの動き(角度・方向など)は各ボックスに記述します
横方向:data-orientation=”horizontal”
縦方向:data-orientation=”vertical”

オプション例

オプションも用意されています。

スライドのスピード【speed: 600 】
スライドスピード 【speed : 800 】
スライド時の不透明度を調整 【optOpacity : true 】
自動的にスライドさせる【autoplay : true 】
キーボードで操作させる 【keyboard : true 】
スライドの間隔【interval : 5000 】

詳しくは、配布サイトをご参考ください。

配布サイト

http://tympanus.net/codrops/2012/06/05/fullscreen-slit-slider-with-jquery-and-css3/

参考サイト

http://www.skuare.net/2012/06/javascriptfullscreen_slit_slid.html

サンプルデモ・ダウンロード