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

      2021/01/26

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

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

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

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

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

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

設置方法

上部で、CSSを読込

続いてHTMLの記述、

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

各スライドの動き(角度・方向など)は各ボックスに記述します

オプション例

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

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

配布サイト

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

参考サイト

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

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