В последнее время эффект параллакса широко заполонил просторы интернета, каждый день появляются новые сайты с различными применениями данного эффекта, и это не удивительно, ведь это привлекает взор пользователей, и делает ресурс уникальным в своем роде. В данном уроке мы рассмотрим как создать замечательный полноэкранный слайдер с эффектом параллакса с эффектом прокрутки. Данное решение отлично подойдет для одностраничного сайта, который содержит мало информации, и доносит исключительно целевую информацию.
Для того чтобы создать данный эффект будет использовано parallax scrolling. Даже если вы не знакомы с термином «parallax scrolling», вы наверняка знакомы с техникой. Parallax scrolling — это процесс 2D анимации, который создаёт иллюзию глубины. Анимация передних слоёв быстрее, чем анимация фона. Для начала мы рассмотрим разметку HTML, с помощью которой будет организована разметка изображений:
HTML
<!-- Parallax foreground -->
<div id="parallax-bg3">
<img id="bg3-1" src="img/balloon.png" width="529" height="757" alt="Montgolfier hot air balloon"/>
<img id="bg3-2" src="img/balloon2.png" width="603" height="583" alt="Frameless parachute"/>
<img id="bg3-3" src="img/balloon3.png" width="446" height="713" alt="Blanchard's air balloon"/>
<img id="bg3-4" src="img/ground.png" width="1104" height="684" alt="Landscape with trees and cows"/>
</div>
<!-- Parallax midground clouds -->
<div id="parallax-bg2">
<img id="bg2-1" src="img/cloud-lg1.png" alt="cloud"/>
<img id="bg2-2" src="img/cloud-lg1.png" alt="cloud"/>
<img id="bg2-3" src="img/cloud-lg1.png" alt="cloud"/>
<img id="bg2-4" src="img/cloud-lg1.png" alt="cloud"/>
<img id="bg2-5" src="img/cloud-lg1.png" alt="cloud"/>
</div>
<!-- Parallax background clouds -->
<div id="parallax-bg1">
<img id="bg1-1" src="img/cloud-lg2.png" alt="cloud"/>
<img id="bg1-2" src="img/cloud-lg2.png" alt="cloud"/>
<img id="bg1-3" src="img/cloud-lg2.png" alt="cloud"/>
<img id="bg1-4" src="img/cloud-lg2.png" alt="cloud"/>
</div>Вы можете скролить обычным способом, использовать меню навигации в правой части страницы или кнопки следующий/предыдущий, которые появляются под каждой статьей. Страница содержит четыре, независимо друг от друга анимированных слоя, для создания иллюзии глубины.
Теперь рассмотрим стили с помошью CSS, в которых назначено фиксированное положение, также им назначено свойство z-index для того, чтобы новые слои появлялись выше фонового слоя. Используется четыре слоя: небольшие облака, большие облака, воздушный шар/изображение пейзажа, слой со статьями.
CSS
/* передний слой (воздушный шар/изображение пейзажа) */
#parallax-bg3 {
z-index: 3;
position: fixed;
left: 50%; /* выравниваем левый край с центром окна */
top: 0;
width: 940px;
margin-left: -470px; /* двигаем влево на полширины элемента */
}Каждый слой имеет абсолютное позиционирование. Это было самой сложной частью всего процесса, так как элементы должны располагаться таким образом, чтобы при прокрутке к любой из четырёх статей, было одинаковое выравнивание статьи относительно окна браузера. В данном случае, это было достигнуто методом проб и ошибок.
#bg3-1 {
position: absolute;
top: -111px;
left: 355px;
}
#bg3-2 {
position: absolute;
top: 812px;
left: 321px;
}
/* и так далее… */
JavaScript
Всего несколько строк кода с использованием jQuery нужно для создания parallax scrolling эффекта. Я был удивлён, насколько это просто.
$(window).bind('scroll',function(e){
parallaxScroll();
});
function parallaxScroll(){
var scrolled = $(window).scrollTop();
$('#parallax-bg1').css('top',(0-(scrolled*.25))+'px');
$('#parallax-bg2').css('top',(0-(scrolled*.5))+'px');
$('#parallax-bg3').css('top',(0-(scrolled*.75))+'px');
}Остальной jQuery код используется для управления навигацией. Когда пользователь нажимает навигационную кнопку, страница прокручивается до соответствующей статьи. В случае, если у пользователя отключен JavaScript, в дело вступают «якоря» используемые на ссылках. Они по-прежнему позволяют перемещаться по странице, но уже без анимации.
Вот и все. Готово!
Материал взят из зарубежного И представлен исключительно в ознакомительных целях.
