Автор

30 06.2016
Прокрутка с эффектом параллакса на jQuery

Прокрутка с эффектом параллакса на jQuery


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

 

ДЕМО
ИСХОДНИКИ

 

Для того чтобы создать данный эффект будет использовано 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, в дело вступают «якоря» используемые на ссылках. Они по-прежнему позволяют перемещаться по странице, но уже без анимации.

 

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.


vk.com/club.ssdru

Подписывайтесь на нашу группу в контакте vk.com/club.ssdru


Статьи по темеjQuery

29 09.2014
Прокрутка с эффектом параллакса на jQuery

На многих сайтах реализована функция всплывающего окна при входе на сайт. Такой элемент позволяет преподнести посетителю необходимую информацию, которая, на мнение, автора, является ценной для посетителя или на оборот-предупреждающей.


28 12.2014
Прокрутка с эффектом параллакса на jQuery

Библиотека WebGL позволяет создавать в браузере удивительные 3D игры, сцены и эффекты. Пока большинство из них только для развлечений, но некоторые могут быть уже сегодня использоваться на динамичных сайтах. Сегодня мы бы хотели привести пример реализации эффекта воды, который не оставит Вас равнодушным. Впечатляет, что так просто можно реализовать объемную графику прямо в окне браузера. Кроме этого данная технология стремительно набирает обороты и пользуется популярностью в веб-дизайнеров. Советуем Вам присмотреться к данной технологии.


10 06.2013
Прокрутка с эффектом параллакса на jQuery

В последнее время анимированные кнопки с помощью css стали вытеснять старые кнопки в виде простых изображений, это не удивительно, ведь новые технологии, да и привлекательная анимация позволят привлечь взор пользователя к необходимой информации. Зачастую на кнопке содержится малая доля информации, которая информирует нас о ее содержании, но иногда места на кнопке не достаточно, и хотелось добавить бы еще полезной информации, тогда следуют пойти на небольшую хитрость, и сделать выпадающею кнопку с дополнительной информацией.


24 06.2017
Прокрутка с эффектом параллакса на jQuery

Фиксированная навигация, которая позволяет вашим пользователям получать доступ к меню в любое время, пока они испытывают ваш веб-сайт. Он меньше фиксированного заголовка полной ширины и заменяет кнопку «назад к началу» более умным решением UX.


105 Публикаций

Раскрутка в соцсетях

В данном блоге описано где и как сделать накрутку групп, сообществ и личных страничек в популярных социальных сетях и тест платных сайтов занимающихся накруткой.


Перейти в Блог

О КОМПАНИИ

Studio Design существует с 2001 года. Основной нашей деятельностью до 2007 года было видеопроизводство ( видеореклама и документальные фильмы, о чем подробно описано в нашем блоге ). С 2007 года, вот уже как лет, наша основная специфика - это создание сайтов для бизнеса или частной деятельности, веб дизайн, а также поддержка и администрирование готовых проектов. Каждая выполненная нами работа - это уникальный, а самое главное, адаптивный под все современные мобильные устройства дизайн сайта. Мы готовы создать сайт с нуля для каждого клиента с любого уголка России! Мы поможем Вам в создании, как одностраничных сайтов – визиток, так и крупных интернет магазинов или корпоративных сайтов. А все наши работы, большинство из которых действуют и по сей день!

Close

Целовальников Сергей


Веб-дизайн, HTML5, CSS3, jQuery, JavaScript, Верстка.

Верстальщик с большим опытом работы. Занимаюсь созданием сайтов с 2005 года. Постоянно обучаюсь и совершенствую свои навыки. Веду свои проекты, в том числе и данный блог.

Close