Улучшенная CSS-анимация.

Мища

Привет, ребята, по сути, у меня есть мозаичный фоновый узор высотой 345 пикселей.

Я пытаюсь анимировать его движение вверх для крутого эффекта.

Проблема в том, что это заводит поклонников моих ноутбуков! Есть ли менее интенсивный способ сделать это? Сначала я использовал только Javascript, примерно так:

 
var count = 0

setInterval(function() {

$('.hero-image').css('background-position', "0 " + count + "px")

count -= 345
}, 5175)

Код (разметка): Потом я подумал, что, возможно, css сделает это лучше, поэтому попробовал вот так:

  .pattern { background-image: url('pattern.png'); background-size: auto 345px; transition: 5175ms background-position; transition-timing-function: linear; }

Код (разметка):

  var count = 0 setInterval(function() { if (count == -345) { count = 0 } $('.hero-image').css('background-position', "0 " + count + "px") count -= 1 }, 15)

Код (разметка): Есть ли лучший, менее требовательный способ справиться с этим? Спасибо

benix

Вы имеете в виду CSS-анимацию? #ссылка: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations

#демо: https://jsfiddle.net/2oLsen5k/

Это не гарантирует, что вентилятор вашего ноутбука будет работать медленнее. Я считаю, что, как и JS, CSS также требует некоторой обработки процессором.

Похожие темы	Дата
Какие средства для веб-дизайна используете?	19.10.2024, 18:10
Учебник по Adobe Illustrator CS2	19.10.2024, 18:10
Обсуждаем тему подготовки к печати	19.10.2024, 18:10
ВИДЕО-ШАБЛОН, какой посоветуете?	19.10.2024, 18:10
помогите с циклом while	19.10.2024, 18:10
Сделать подменю раскрывающимся по клику	19.10.2024, 18:10
Форма Php Mail отправляет пустые письма?	19.10.2024, 18:10
Отображать элементы HTML рядом друг с другом, а не занимать несколько строк?	19.10.2024, 18:10
как перейти от офисных документов к документам, основанным на современных веб-технологиях	19.10.2024, 18:10
CSS для макета Flexbox или Grid 4 Box (должен быть простым)	19.10.2024, 18:10

Улучшенная CSS-анимация.

Мища

benix

I AM

Интересно