画面の中央にスリットが入り、割れてスライドする動きの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/