【月間80万PV】オウンドメディア「データのじかん」サイト改善の裏側
|
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 |
function sliderStart() { const slide = document.getElementById('slide_wrap'); const slideItem = slide.querySelectorAll('.slide_item'); const totalNum = slideItem.length - 1; const FadeTime = 2000; const IntarvalTime = 5000; let actNum = 0; let nowSlide; let NextSlide; // DOM読み込み時にスライドの1枚目をフェードイン slideItem[0].classList.add('show_', 'zoom_'); // 処理を繰り返す setInterval(() => { if (actNum < totalNum) { nowSlide = slideItem[actNum]; NextSlide = slideItem[++actNum]; //.show_削除でフェードアウト nowSlide.classList.remove('show_'); // と同時に、次のスライドがズームしながらフェードインする NextSlide.classList.add('show_', 'zoom_'); //フェードアウト完了後、.zoom_削除 setTimeout(() => { nowSlide.classList.remove('zoom_'); }, FadeTime); } else { nowSlide = slideItem[actNum]; NextSlide = slideItem[actNum = 0]; //.show_削除でフェードアウト nowSlide.classList.remove('show_'); // と同時に、次のスライドがズームしながらフェードインする NextSlide.classList.add('show_', 'zoom_'); //フェードアウト完了後、.zoom_削除 setTimeout(() => { nowSlide.classList.remove('zoom_'); }, FadeTime); }; }, IntarvalTime); } |
|
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 |
function sliderStart() { const slide = document.getElementById('slide_wrap'); const slideItem = slide.querySelectorAll('.slide_item'); const totalNum = slideItem.length - 1; const FadeTime = 2000; const IntarvalTime = 5000; let actNum = 0; let nowSlide; let NextSlide; // DOM読み込み時にスライドの1枚目をフェードイン slideItem[0].classList.add('show_', 'zoom_'); // 処理を繰り返す //setInterval(() => { //IE11で動かないため setInterval(function() { if (actNum < totalNum) { nowSlide = slideItem[actNum]; NextSlide = slideItem[++actNum]; //.show_削除でフェードアウト nowSlide.classList.remove('show_'); // と同時に、次のスライドがズームしながらフェードインする NextSlide.classList.add('show_', 'zoom_'); //フェードアウト完了後、.zoom_削除 //setTimeout(() => { //IE11で動かないため setTimeout(function() { nowSlide.classList.remove('zoom_'); }, FadeTime); } else { nowSlide = slideItem[actNum]; NextSlide = slideItem[actNum = 0]; //.show_削除でフェードアウト nowSlide.classList.remove('show_'); // と同時に、次のスライドがズームしながらフェードインする NextSlide.classList.add('show_', 'zoom_'); //フェードアウト完了後、.zoom_削除 //setTimeout(() => { //IE11で動かないため setTimeout(function() { nowSlide.classList.remove('zoom_'); }, FadeTime); }; }, IntarvalTime); } |
コウ
年間約20万人が訪れるKOHIMOTO Laboの 広報・編集・AIアシスタント⛄を担当しています。興味→Web・AI・ソーシャル・映画・読書｜テクノロジー × ヒューマニティのpositiveな未来🌍
INDEX
PICK UP
