Эффект скроллинга CSS/JS (производительность)

Question

Я пытаюсь добиться эффекта «скроллинга» с прокруткой с использованием Javascript и CSS. Я придумал следующий код, который клонирует содержимое и применяет clip, чтобы он выглядел так, будто он прокручивается при добавлении случайного горизонтального смещения.

function scanglitch() { 
    var e = $('#wrapper').clone().appendTo('#glitchcontainer'); 
    var i = 0; 
    e.css({"clip": "rect(" + i + "px,3830px," + (i + 15) + "px,0px)"}); 
    e.css("z-index",200); 
    var interval = setInterval(function() { 
     e.css({"clip": "rect(" + i + "px,3830px," + (i + 15) + "px,0px)"}); 
     e.css({"left": Math.round(Math.random() * 10) + "px"}); 
     i+=4; 
     if (i > window.innerHeight) { 
      e.remove(); 
      window.clearInterval(interval); 
     } 
    }, 40); 
} 

Fiddle (Нажмите на текст, чтобы увидеть эффект)

Я на самом деле очень доволен эффектом, но реализация явно хак. В результате производительность неприемлемо низкая (при использовании эффекта хром cpu от 5% до 50%).

Может ли кто-нибудь помочь мне выяснить способ достижения этого эффекта в более элегантном и менее производительном режиме?

UPDATE: Я внедрил ваши предложения: используя перевод вместо левого, прокрутку с помощью перевода вместо js-цикла, вычисление вне тега css и использование requestAnimationFrame(). Теперь код более приятный и более предсказуемый, но анимации по-прежнему очень облагаются налогом. New fiddle

Answer 1

Я бы передал как можно больше css-переходов. Поэтому вместо перемещения клипа с помощью js в обратном вызове интервала переместите его сверху вниз (example of transitioning).

Вы можете попробовать что-то подобное с левым свойством, нет случайной функции ослабления, но, возможно, вы могли бы достичь чего-то подобного с одной из функций отскока. Возможно, измените функцию ослабления с интервалом, который будет менее частым, чем ваш текущий.

Также, замедляя интервал вашего текущего решения, вы получите визуально удовлетворительные результаты при меньшем использовании ЦП.

Side-note: для совершенно другого маршрута вы можете реплицировать свой html на холсте и применить к нему некоторые эффекты. Google имеет множество результатов для «canvas glitch».

Update: here's my version of your latest fiddle

Я получаю около 10% меньше использования центрального процессора с ним, когда по сравнению с вашим. Основные отличия:

• использует таймаут вместо requestAnimationFrame. requestAnimationFrame предназначен для поддержания высокой частоты кадров и анимации, но нам не нужно, чтобы для случайного смещения. Тайм-аут также лучше, чем интервал, так как функция loop гарантирована для завершения до начала следующей итерации.

• удален прозрачный фон, поскольку прозрачность имеет рендер стоимость

Answer 2

Вы можете попробовать использовать requestAnimationFrame (он доступен в almost all browsers). Похоже, в Chrome есть большая разница.

JSFiddle

EDIT

Вот переход только версии, и в то время она даже не реализует джиттера, это полезно для сравнения. Удивительно (?) Он показывает примерно то же, если не больше, использование ЦП. (Вы можете проверить профиль и вкладки Временная шкала в Chrome)

CSS3 Transition-Only JSFiddle

Вот some information о том, почему, что и следовало ожидать. По сути, переходы CSS и requestAnimationFrame работают очень точно под капотом.