Создание простого параллакса на Jquery

Рецепт создания простейшего эффекта параллакса. Метод универсален — можно применить как к отдельному изображению, так и ко всему блоку. Активируется добавлением всего одного класса.

Как применить эффект

Чтобы активировать параллакс-эффект на любом элементе страницы, необходимо добавить ему класс parralaxFx.

Код jQuery

$(document).ready(function() {
  $(window).on('scroll', function() {
    var st = $(this).scrollTop();

    $('.parralaxFx').css({
      'transform': 'translateY('+ (st/2) +'px)'
    });
  });
});

Принцип работы

К элементу применяется CSS-трансформация, которая замедляет прокрутку выбранного объекта в два раза. Это создаёт иллюзию многослойной прокрутки. Благодаря использованию CSS-трансформации, анимация выглядит плавно во всех современных браузерах.