背景の画像をクロスフェードで切り替えながらも
少し動きをつけるという手法に挑戦したのですが
動きはするものの、10秒くらい見てるとPCのファンがうなりをあげます。
他のサイトですとそのようなことはありません
参考サイト(http://forest-stand.com)
もしよろしければお教えいただきますと幸いです
HTML
1<div class="slider"> 2 <div class="bgCrossFade"></div> 3</div>
css
1.slider{ 2 width:100%; 3 height: 100%; 4 margin: 0 auto; 5 position: absolute; 6} 7.bgCrossFade { 8 position: relative; 9 height: 100%; 10} 11.bgCrossFade .slides { 12 position: absolute; 13 width: 100%; 14 height: 100%; 15 background-repeat: no-repeat; 16 background-position: center top; 17 background-size: cover; 18} 19.bgCrossFade .slides:not(:first-child) { 20 display: none; 21} 22 23.zoom_move{ 24 animation: moveZoom 15s infinite linear; 25 background-size: contain; 26} 27.height_move{ 28 animation: moveHeight 15s infinite linear; 29} 30 31@keyframes moveZoom{ 32 0% { transform:scale(1,1); } 33 100% { transform:scale(1.3,1.3); } 34} 35@keyframes moveHeight{ 36 0% { background-position: center bottom } 37 100% { background-position: center top } 38}
javascript
1var speed = 3000; // フェードイン・フェードアウトの処理時間(1000で1秒) 2var times = 4000; // 画像切り替えの間隔(1000で1秒) 3var className = '.bgCrossFade'; 4var bgArray = [ 5 "images/topImage1.jpg", 6 "images/topImage2.jpg" 7 ]; 8 9$.each(bgArray.reverse(), function(i, value) { 10 if(i === 0){ 11 $(className).prepend('<div class="slides height_move" style="background-image:url(' + value + ');"></div>'); 12 }else{ 13 $(className).prepend('<div class="slides zoom_move" style="background-image:url(' + value + ');"></div>'); 14 } 15}); 16 17var bgNo = 1; 18var bgLength = bgArray.length; 19 20setInterval(function(){ 21 $(className + ' .slides:nth-child(' + bgNo + ')').fadeOut(speed); 22 $(className + ' .slides:nth-child(' + ( bgNo === bgLength ? 1 : bgNo + 1) + ')').fadeIn(speed/3); 23 if ( bgNo >= bgLength ) { 24 bgNo = 1; 25 } else { 26 bgNo += 1; 27 } 28}, times);
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/02/14 09:27
2018/02/14 09:50