/ Сайтостроение / Scripts & jquery / Parallax расширение сайта

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

08.05.2016

913

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

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

Поделится информацией с друзьями

  • Комментарии
  • Вложения

Добавить комментарий

Пока нет комментариев. Будь первым!

Parallax расширение сайта
Вывод города по IP
Рекомендации для васВывод города по IPOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.