2016年3月2日 / 最終更新日時 : 2025年1月27日 GASS Webデザイン

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

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

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

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

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

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

設置方法

上部で、CSSを読込

<style>

.sl-slider-wrapper { width: 100%; height: 600px; overflow: hidden; position: relative; }

.sl-slider h2, .sl-slider blockquote { padding: 100px 30px 10px 30px; width: 80%; max-width: 960px; color: #fff; margin: 0 auto; position: relative; z-index: 100; }

.sl-slider h2 { font-size: 100px; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2); }

.sl-slider blockquote { font-size: 28px; padding-top: 10px; font-weight: 300; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.2); }

.sl-slider blockquote cite { font-size: 16px; font-weight: 700; font-style: normal; text-transform: uppercase; letter-spacing: 5px; padding-top: 30px; display: inline-block; }

.bg-img { padding: 200px; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; position: absolute; top: -200px; left: -200px; width: 100%; height: 100%; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; background-position: center center; }

.nav-dots span { background: rgba(150, 150, 150, 0.1); margin: 6px; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -ms-transition: all 0.2s; -o-transition: all 0.2s; transition: all 0.2s; box-shadow: 0 1px 1px rgba(255, 255, 255, 0.4), inset 0 1px 1px rgba(0, 0, 0, 0.1), 0 0 0 2px rgba(255, 255, 255, 0.5); }

.nav-dots span.nav-dot-current, .nav-dots span:hover { box-shadow: 0 1px 1px rgba(255, 255, 255, 0.4), inset 0 1px 1px rgba(0, 0, 0, 0.1), 0 0 0 5px rgba(255, 255, 255, 0.5); }

.bg-img-1 { background-image: url(img/img01.jpg); }

.bg-img-2 { background-image: url(img/img02.jpg); }

.bg-img-3 { background-image: url(img/img03.jpg); }

.bg-img-4 { background-image: url(img/img04.jpg); }

.bg-img-5 { background-image: url(img/img05.jpg); }

@media screen and (max-width: 660px) {

.sl-slider-wrapper { height: 500px; }

.sl-slider h2 { font-size: 36px; }

.sl-slider blockquote { font-size: 16px; }

}

</style>

続いてHTMLの記述、

<div class="sl-slide" data-orientation="horizontal" data-slice1-rotation="-25" data-slice2-rotation="-25" data-slice1-scale="2" data-slice2-scale="2">
<div class="sl-slide-inner">
<div class="bg-img bg-img-1"></div>
<h2>ダミーテキスト</h2>
<blockquote><p>画像タイプのデモです。</p><cite><a href="index2.html">フル表示のデモはこちら</a></cite></blockquote>
</div>
</div>

<div class="sl-slide" data-orientation="vertical" data-slice1-rotation="10" data-slice2-rotation="-15" data-slice1-scale="1.5" data-slice2-scale="1.5">
<div class="sl-slide-inner">
<div class="bg-img bg-img-2"></div>
<h2>ダミーテキスト</h2>
<blockquote><p>画像タイプのデモです。</p><cite><a href="index2.html">フル表示のデモはこちら</a></cite></blockquote>
</div>
</div>

<div class="sl-slide" data-orientation="horizontal" data-slice1-rotation="3" data-slice2-rotation="3" data-slice1-scale="2" data-slice2-scale="1">
<div class="sl-slide-inner">
<div class="bg-img bg-img-3"></div>
<h2>ダミーテキスト</h2>
<blockquote><p>画像タイプのデモです。</p><cite><a href="index2.html">フル表示のデモはこちら</a></cite></blockquote>
</div>
</div>

<div class="sl-slide" data-orientation="vertical" data-slice1-rotation="-5" data-slice2-rotation="25" data-slice1-scale="2" data-slice2-scale="1">
<div class="sl-slide-inner">
<div class="bg-img bg-img-4"></div>
<h2>ダミーテキスト</h2>
<blockquote><p>画像タイプのデモです。</p><cite><a href="index2.html">フル表示のデモはこちら</a></cite></blockquote>
</div>
</div>

<div class="sl-slide" data-orientation="horizontal" data-slice1-rotation="-5" data-slice2-rotation="10" data-slice1-scale="2" data-slice2-scale="1">
<div class="sl-slide-inner">
<div class="bg-img bg-img-5"></div>
<h2>ダミーテキスト</h2>
<blockquote><p>画像タイプのデモです。</p><cite><a href="index2.html">フル表示のデモはこちら</a></cite></blockquote>
</div>
</div>
</div>

</div>

<h2>ダミーテキスト</h2>