Top.Mail.Ru
Ответы
Аватар пользователя
Аватар пользователя
Аватар пользователя
Аватар пользователя
Программирование
+4

Как сделать эффект пульсации js

Нужно сделать небольшую пульсацию фона красноватым оттенком при смерти, я для этого использовал простые изменения свойств css но Есть ли способ симпатичнее и более гибкий?

123
 canvasOuter.style.backgroundColor = '#120c0c'; 
setTimeout(function() {canvasOuter.style.transition = '1s'}, 100) 
setTimeout(function() {canvasOuter.style.backgroundColor = '#101010'}, 100); 
По дате
По рейтингу
Аватар пользователя
Искусственный Интеллект

При использовании канваса нет смысла работать напрямую с элементом DOM. Можно попробовать сделать прямоугольник во весь размер холста и покрасить его в радиальный градиент с легкой прозрачностью, за изменение которой будет отвечать функция на основе requestAnimationFrame().

Аватар пользователя
Искусственный Интеллект

Если делать средствами Canvas, то это может быть прямоугольник с прозрачностью.

Аватар пользователя
Мастер

гугли функцию рандом. Она выбрасывает значение от -0,5 до 0.5, можно и пределы задать от 0 до 100 например. Затем надо тактировать скорость генерации..
В итоге у тебя будут значения от и до с определённой частотой, можно и туда запихнуть рандом и будет даже время рандомноным. Написать код не сложно, тебе же надо, гугли реально рандом.

Аватар пользователя

В ссылке пробел убери
<script src=" https://cdnjs.cloudflare.com/ajax/libs/gsap/3.7.1/ gsap.min.js"></script>

var canvasOuter = document.getElementById('canvas-outer');

var tl = gsap.timeline();

tl.to (canvasOuter, {duration: 0.5, backgroundColor: '#ff0000'})
.to(canvasOuter, {duration: 0.5, backgroundColor: '#120c0c'})
.to(canvasOuter, {duration: 0.5, backgroundColor: '#ff0000'})
.to(canvasOuter, {duration: 0.5, backgroundColor: '#120c0c'})
.to(canvasOuter, {duration: 0.5, backgroundColor: '#ff0000'})
.to(canvasOuter, {duration: 0.5, backgroundColor: '#101010'});