Как анимировать слово StackOverflow
1,00
р.
У меня есть слово StackOverflow:
Как создать эффект анимации для этого слова, например, в виде волны и одновременно переливания одного цвета в другой?
Я представляю себе следующий сценарий анимации:
Последовательная слева направо смена цвета букв Последовательное увеличение от исходного размера шрифта для каждой буквы Изменение размера шрифта в исходный размер в обратном порядке Обратная смена цвета букв в начальный цвет Зацикливание анимации
Как реализовать подобный сценарий такой анимации, используя любую технологию, указанную в метках вопроса?
Ответ
Не люблю рамки, ни на что не претендую, просто вот вам прикольный эффект:
let s = 620
document.body.innerHTML += `` let ctx = canvas.getContext('2d') let dots = [] let mouse = {x:0, y:0} let startedAt = Date.now()
ctx.font = 'bold '+(s/7.5)+'px Arial' ctx.fillStyle = 'red' ctx.textBaseline = "middle" ctx.textAlign = "center" ctx.fillText('Стековерфлоу', s/2, s/8)
let mask = ctx.getImageData(0,0,s,s/4) for (let i = 0 dots.length < 3000 i++){ let x = s*Math.random() let y1 = s*Math.random() let y2 = -s*Math.random() let offset = parseInt(y1)*s*4 + parseInt(x)*4 if (mask.data[offset]) dots.push({x, y1, y2, speed: {x:0, y:0}, i}) }
ctx.fillStyle = 'black'
requestAnimationFrame(function draw(){ let t = Date.now() - startedAt ctx.clearRect(0,0,s,s) dots.forEach(dot => { let t1 = Math.min(1,(t-dot.x*4)/(500+2000*Math.abs(Math.sin(dot.i*4)))) t1 = t1*t1*t1 let x = dot.x let y = dot.y2 + (dot.y1-dot.y2) * t1 let dx = mouse.x-x let dy = mouse.y-y let lenSq = dx*dx + dy*dy if (lenSq < 900) { let d = 30-Math.sqrt(lenSq) dot.speed.x += dx/30*d dot.speed.y += dy/30*d } x += dot.speed.x y += dot.speed.y dot.speed.x *= 0.92 dot.speed.y *= 0.92 ctx.fillRect(x-0.75, y-0.75, 1.5, 1.5) })
requestAnimationFrame(draw) })
addEventListener('mousemove', e => { let bb = canvas.getBoundingClientRect() mouse.x = e.x - bb.x mouse.y = e.y - bb.y })
['click','touchstart'].forEach(type => addEventListener(type, () => startedAt = Date.now()))
Чтобы расположить точки в виде букв, используется канва, на ней нарисован желаемый текст.
Первым шагом необходимо сгенерировать много точек, и каждую проверить на попадание в маску текста, сделать это можно проверив значение цвета пикселя по координатам точки, пусть это будет красный канал:
let mask = ctx.getImageData(0,0,s,s/4) let red = mask.data[y*width*4 + x*4]
После того, как точки расставлены, можно их заанимировать, для этого каджую точку изначально поднимаем в область отрицательных значений у и со случайной скоростью двигаем вниз, до того, пока она не достигнет своего местоположения, так же к этому добавим задержку, пропорциональную x координате, чтобы анимация происходила слева-направо.
Финальный штрих - реакция на указатель: тут все относительно просто, считаем дистанцию от указателя до точки, и если она меньше определенного порога - меняем координату точки на значение, которое зависит от этой дистанции.
StackOverflow
Как создать эффект анимации для этого слова, например, в виде волны и одновременно переливания одного цвета в другой?
Я представляю себе следующий сценарий анимации:
Последовательная слева направо смена цвета букв Последовательное увеличение от исходного размера шрифта для каждой буквы Изменение размера шрифта в исходный размер в обратном порядке Обратная смена цвета букв в начальный цвет Зацикливание анимации
Как реализовать подобный сценарий такой анимации, используя любую технологию, указанную в метках вопроса?
Ответ
Не люблю рамки, ни на что не претендую, просто вот вам прикольный эффект:
let s = 620
document.body.innerHTML += `` let ctx = canvas.getContext('2d') let dots = [] let mouse = {x:0, y:0} let startedAt = Date.now()
ctx.font = 'bold '+(s/7.5)+'px Arial' ctx.fillStyle = 'red' ctx.textBaseline = "middle" ctx.textAlign = "center" ctx.fillText('Стековерфлоу', s/2, s/8)
let mask = ctx.getImageData(0,0,s,s/4) for (let i = 0 dots.length < 3000 i++){ let x = s*Math.random() let y1 = s*Math.random() let y2 = -s*Math.random() let offset = parseInt(y1)*s*4 + parseInt(x)*4 if (mask.data[offset]) dots.push({x, y1, y2, speed: {x:0, y:0}, i}) }
ctx.fillStyle = 'black'
requestAnimationFrame(function draw(){ let t = Date.now() - startedAt ctx.clearRect(0,0,s,s) dots.forEach(dot => { let t1 = Math.min(1,(t-dot.x*4)/(500+2000*Math.abs(Math.sin(dot.i*4)))) t1 = t1*t1*t1 let x = dot.x let y = dot.y2 + (dot.y1-dot.y2) * t1 let dx = mouse.x-x let dy = mouse.y-y let lenSq = dx*dx + dy*dy if (lenSq < 900) { let d = 30-Math.sqrt(lenSq) dot.speed.x += dx/30*d dot.speed.y += dy/30*d } x += dot.speed.x y += dot.speed.y dot.speed.x *= 0.92 dot.speed.y *= 0.92 ctx.fillRect(x-0.75, y-0.75, 1.5, 1.5) })
requestAnimationFrame(draw) })
addEventListener('mousemove', e => { let bb = canvas.getBoundingClientRect() mouse.x = e.x - bb.x mouse.y = e.y - bb.y })
['click','touchstart'].forEach(type => addEventListener(type, () => startedAt = Date.now()))
Чтобы расположить точки в виде букв, используется канва, на ней нарисован желаемый текст.
Первым шагом необходимо сгенерировать много точек, и каждую проверить на попадание в маску текста, сделать это можно проверив значение цвета пикселя по координатам точки, пусть это будет красный канал:
let mask = ctx.getImageData(0,0,s,s/4) let red = mask.data[y*width*4 + x*4]
После того, как точки расставлены, можно их заанимировать, для этого каджую точку изначально поднимаем в область отрицательных значений у и со случайной скоростью двигаем вниз, до того, пока она не достигнет своего местоположения, так же к этому добавим задержку, пропорциональную x координате, чтобы анимация происходила слева-направо.
Финальный штрих - реакция на указатель: тут все относительно просто, считаем дистанцию от указателя до точки, и если она меньше определенного порога - меняем координату точки на значение, которое зависит от этой дистанции.
