【インタビュー】課題であった、UI改善やライターのモチベーションアップができました。―WingArc1st Inc.
|
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); } |
Web Trends Lab.編集部
KOHIMOTO Inc.所属。トレンドやノウハウ中心にWebサイトを作るための知見を現場から発信していきます👀また、制作したWebサイトでの活用法や、最前線での施策を伺う企業へのインタビューも実施予定。
INDEX
PICK UP
KOHIMOTOは実用的なWebサイトを追求するWeb制作会社です。
現場から最前線のWebトレンドやノウハウなどをお届けしていきます。
