Javascriptの「setInterval」と「clearInterval」を使用してフェードモーションを管理
トップページなどのメインイメージの切り替えをする際、自動と手動を組み合わせて行うことも多…
「FLORABeautyオンラインカレッジ」の制作に携わった際に使用したスライドショウの実装方法をメモ。
スライドショウを単調に見せないだけでなく、文字を表示するタイミングを画像と変えることで、自然と文字へと誘導可能。
<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>
#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; }
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');
});
});
});
};
トップページなどのメインイメージの切り替えをする際、自動と手動を組み合わせて行うことも多…
電話やメール営業など、自社サービスを営業する上で欠かせないのが営業用のリスト。業種の違い…
以前、画面の端から端まで無限ループするスライダーを実装したのですが、そちらの応用版。適当…