【Illustrator・Ai】イラレの手書きクレヨン風の自作ブラシで、ひよこのキャラクターを作ってみた。
|
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
東京・吉祥寺でKOHIMOTO Inc.というWebサイト制作の会社をやっているエンジニアとデザイナーが、発信を通して成長していくためのラボ🧪 IT企業出身。サイト制作を通じて微力ながら社会が良くなる手助けをしたいと思っている。
INDEX
PICK UP
