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

Сегодня делюсь с вами рецептом простейшего параллакс эффекта. Данный метод можно повесить как на изображение так и на весь блок. Иницианизируется всего-лишь одним классом.

Для применения эффекта параллакса к любому объекту на странице просто добавьте к этому объекту класс parralaxFx 

Jquery код который необходимо подключить к теме вашего сайта:

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

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

Принцип работы данной реализации невероятно простой, к элементу с классом parralaxFx применяется CSS трансформация которая замедляет скролл выбранного элемента ровно в два раза. За счёт этого создаёться видимость многослойной прокрутки.

Так как в данном скрипте задействована CSS трансформация во всех современных браузерах анимация выглядит очень плавно.