Googleの画像生成AI「ImageFX」でアイキャッチ画像を作ってみる
|
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); } |
KOHIMOTO LABO
WebプロダウションKOHIMOTO Inc.が発信を通して成長していくためのラボ🧪 IT企業出身。世界中の人へ発信できるWebサイトを通じて、社会がより良い方向へアップデートしていく為に日々学び、技術を生かしていきます。
INDEX
PICK UP
