Parallax расширение сайта

Parallax при скроллинге смотрится очень эффектно. Задача: гармонично внедрить его в верстку сайта.

Parallax.js

Подключаем скрипт:

wp_enqueue_script( 'parallax', get_template_directory_uri() . '/js/parallax.min.js' , array( ), '1.0' , 'screen' );

Слою к которому нужно применить parallax добавляем следующее

Пример для слоев главной страницы, либо страницы лэндинга

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

<div id="third-block" align="center" class="wrapper plast parallax-window" data-parallax="scroll" data-image-src="https://opttour.ru/wp-content/uploads/2016/05/level-up1.jpg">
<div class="wrapper-2">

<h2>Заголовок</h2>
Содержимое

</div>
</div>

CSS

.parallax-window {min-height: 200px; background: transparent;}

на всякий случай
.plast {
    background-size: cover;
    background-position: center;
    padding: 75px 0;
    border-top: 1px solid #FFFFFF;
}

.wrapper {
    width: 100%;
    float: left;
    overflow: hidden;
    position: relative;
    transition: all .3s 0.5s ease;
    -webkit-transition: all 0.5s ease 0s;
}

Для фона сайта (ставим после wrapper)

<div class="parallax-bg" data-parallax="scroll" data-image-src="<?php echo $url ?>"></div>

CSS

.parallax-bg {
	min-height: 200px;
	background: transparent; 
	position: absolute; 
	width: 100%;
	top: 0;
	bottom: 0;   
}

Parallax ImageScroll

Аналогичное решение (принцип тот же самый), но в отличие от предыдущего не совсем понятно как накладывать поверх параллакса прочие объекты (по умолчанию они скрываются). Из плюсов: в моб. версии вроде как пытается делать эффект, но получается топорно.

simplePARALLAX

Данный скрипт направлен преимущественно на изображения в виде картинок, а не фона. Конечно можно приспособить и под фон, но нужно верхний слой делать position:absolute. Работает очень просто и гладко.

Подключаем скрипт:

wp_enqueue_script( 'simpleParallax', get_template_directory_uri() . '/js/simpleParallax.min.js' , array('jquery'), '1.0' , true );

Инициируем его

<img class="thumbnail" src="image.jpg" alt="image">

jQuery(document).ready(function() { 
// либо для какого либо класса
var image = document.getElementsByClassName('thumbnail');
new simpleParallax(image);

// либо для всех изображений
var images = document.querySelectorAll('img');
new simpleParallax(images);
});	

В данном решении есть горизонтальный параллакс

var image = document.getElementsByClassName('thumbnail');
new simpleParallax(image, {
	orientation: 'right'
});

Отложенный эффект параллакса:

var image = document.getElementsByClassName('thumbnail');
new simpleParallax(image, {
	delay: .6,
	transition: 'cubic-bezier(0,0,0,1)'
});

А также увеличение изображения и эффект параллакса за края изображения (фактически движение изображения):

var image = document.getElementsByClassName('thumbnail');
new simpleParallax(image, {
	scale: 1.5,
	overflow: true
});

Universal Parallax

Еще один скрипт по созданию эффекта параллакса. Скрипт и стили занимают всего 4 Kb. Работает плавно. Работает в мобильной версии.

Инициализация:

new universalParallax().init({
	speed: 4
});

Верстка:

<div class="parallax" data-parallax-image="image.jpg"></div>

Стили можно прописать в теме, их всего два:

.parallax__container {
	clip: rect(0, auto, auto, 0);
	height: 100%;
	left: 0;
	overflow: hidden;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: -100;
}

.parallax {
	position: fixed;
	top: 0;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	-webkit-transform-style: preserve-3d;
	transform-style: preserve-3d;
	width: 100%;

	/* BG behaviour */
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}

[site-socialshare]