jQueryで画像切替後に、テキストを時間差でスライド表示
「FLORABeautyオンラインカレッジ」の制作に携わった際に使用したスライドショウの実装方法をメモ。スライドショウを単調に見せないだけでなく、文字を表示するタイミングを画像と変えることで、自然と文字へと誘導可能。 HTML <div id="mainimage"> <ul> <li id="topimage01" class="active"> <div class="inner"> <h2>キャッチコピーを記載しています。</h2> <p>キャッチコピーに対しての簡易説明を記載しています。</p> </div> </li> <li id="topimage02"> <div class="inner"> <h2>キャッチコピーを記載しています。</h2> <p>キャッチコピーに対しての簡易説明を記載しています。</p> </div> </li> <li id="topimage03"> <div class="inner"> <h2>キャッチコピーを記載しています。</h2> <p>キャッチコピーに対しての簡易説明を記載しています。</p> </div> </li> </ul> </div> <script> $(function(){ setInterval('slideSwitch()', 7500 ); //7500は次の画像に切り替わるまでのミリ秒 }); </script> CSS #mainimage{ height: 80vh; margin: 0 0 10px; position: relative; overflow: hidden; } #mainimage:before{ background: #212121; content: ""; width: 100%; height: 80vh; display: block; position: absolute; left: 0; bottom: 60px; } #mainimage ul li{ width: 80%; height: 80vh; right: 0; position: absolute; } #mainimage ul li.active{ z-index:9; } #mainimage ul li.last-active{ z-index:8; } #mainimage #topimage01{ background: url(画像URL) center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; } #mainimage #topimage02{ background: url(画像URL) center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; } #mainimage #topimage03{ background: url(画像URL) center; background-size: cover; -webkit-background-size: cover; -moz-background-size: cover; } #mainimage ul li .inner{ position: absolute; top: 60px; left: -20%; opacity: 0; } #mainimage ul li:first-of-type .inner{ opacity: 1; } jQuery function slideSwitch(){ var $active = $('#mainimage ul li.active'); if($active.length == 0 ) $active = $('#mainimage ul li:last'); var $next = $active.next().length ? $active.next() : $('#mainimage ul li:first'); $active.find('.inner').animate({'opacity':'0', 'left':'-30%'}, 750, function(){ $active.addClass('last-active'); $next.css({'opacity':'0'}) .addClass('active') .animate({'opacity':'1.0'}, 3000, function(){ $next.find('.inner').css({'left':'-20%'}).animate({'opacity':'1.0'}, 750, function(){ $active.removeClass('active last-active'); }); }); }); }; 美容・痩身の通信講座のFLORABeautyオンラインカレッジ
