http://8ya.jp
イメージでは上記のページのような動きの仕組みが知りたいです
現在は試行錯誤でクロスフェードの方は実装できたのですが
合わせてbackground-positionを動かそうとするとうまく行きません
稚拙なコードですが解決策がわかる方いらっしゃいましたらよろしくお願いします。
html
1<section class="topImg"> 2 <div class="slider"> 3 <div class="bgCrossFade bg_move"></div> 4 </div> 5</section>
css
1.topImg{ 2 width: 100%; 3 height: 520px; 4} 5.bgCrossFade { 6 position: relative; 7 height: 520px; 8} 9 10.bg_move{ 11 animation: moveBg 60s infinite linear; 12} 13@keyframes moveBg{ 14 0% { background-position: right top } 15 100% { background-position: left top } 16}
javascript
1$(function(){ 2 3var speed = 3000; // フェードイン・フェードアウトの処理時間(1000で1秒) 4var times = 4000; // 画像切り替えの間隔(1000で1秒) 5var className = '.bgCrossFade'; 6var bgArray = [ 7 "images/topImage1.jpg", 8 "images/topImage2.jpg" 9 ]; 10 11$.each(bgArray.reverse(), function(i, value) { 12 $(className).prepend('<div class="slides bg_move" style="background-image:url(' + value + ');"></div>'); 13}); 14 15var bgNo = 1; 16var bgLength = bgArray.length; 17 18setInterval(function(){ 19 $(className + ' .slides:nth-child(' + bgNo + ')').fadeOut(speed); 20 $(className + ' .slides:nth-child(' + ( bgNo === bgLength ? 1 : bgNo + 1) + ')').fadeIn(speed/3); 21 if ( bgNo >= bgLength ) { 22 bgNo = 1; 23 } else { 24 bgNo += 1; 25 } 26}, times); 27 28 29});
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/02/06 02:09