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

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

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

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

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

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

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

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