読み込み中...
画面の中央にスリットが入り、割れてスライドする動きのjQueryプラグイン「Fullscreen Slit Slider」をご紹介します。
ダイナミックな動きでファーストビューにかなりインパクトが出るので、商品やサービスの訴求力アップに効果的ではないでしょうか。
まずはデモをご覧ください。
サンプルデモ・ダウンロード
画像は背景に設定されているので、手前にコピーを入れることができます。CSS3のアニメーションを利用してスムーズでキレのある表現を実現しています。フルスクリーン表示も可能です。
設置方法
上部で、CSSを読込
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<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の記述、
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
<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を読込、設定を記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<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> |
各スライドの動き（角度・方向など）は各ボックスに記述します
|
1 2 |
横方向：data-orientation="horizontal" 縦方向：data-orientation="vertical" |
オプション例
オプションも用意されています。
|
1 2 3 4 5 6 |
スライドのスピード【speed: 600 】 スライドスピード 【speed : 800 】 スライド時の不透明度を調整 【optOpacity : true 】 自動的にスライドさせる【autoplay : true 】 キーボードで操作させる 【keyboard : true 】 スライドの間隔【interval : 5000 】 |
詳しくは、配布サイトをご参考ください。
配布サイト
Fullscreen Slit Slider with jQuery and CSS3 | Codrops
In this tutorial we'll create a fullscreen slideshow with a twist: we'll slice the current slide open in order to reveal
tympanus.net
参考サイト
skuare.net
www.skuare.net
