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

      2019/05/19

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

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

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

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

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

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

設置方法

上部で、CSSを読込

<link rel=”stylesheet” type=”text/css” href=”css/style.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 id=”slider” class=”sl-slider-wrapper”>

<div class=”sl-slider”>

<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><!– /sl-slider –>

<nav id=”nav-dots” class=”nav-dots”>
<span class=”nav-dot-current”></span>
<span></span>
<span></span>
<span></span>
<span></span>
</nav>

</div><!– /slider-wrapper –>

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

<script src=”js/modernizr.custom.79639.js”></script>
<script src=”js/jquery-1.11.3.min.js”></script>
<script src=”js/jquery.ba-cond.min.js”></script>
<script src=”js/jquery.slitslider.js”></script>

<script type=”text/javascript”>
$(function() {
var Page = (function() {
var $nav = $( ‘#nav-dots > span’ ),
slitslider = $( ‘#slider’ ).slitslider( {
speed : 800, //スライドスピード
optOpacity : true, //スライド時の不透明度を調整
autoplay : true, //自動的にスライドさせる
keyboard : true, //キーボードで操作させる
interval : 5000, //スライドの間隔
onBeforeChange : function( slide, pos ) {
$nav.removeClass( ‘nav-dot-current’ );
$nav.eq( pos ).addClass( ‘nav-dot-current’ );
}
} ),
init = function() {
initEvents();
},
initEvents = function() {
$nav.each( function( i ) {
$( this ).on( ‘click’, function( event ) {
var $dot = $( this );
if( !slitslider.isActive() ) {
$nav.removeClass( ‘nav-dot-current’ );
$dot.addClass( ‘nav-dot-current’ );
}
slitslider.jump( i + 1 );
return false;
} );
} );
};
return { init : init };
})();
Page.init();
});
</script>

各スライドの動き(角度・方向など)は各ボックスに記述します
横方向: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

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