Автор

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

 

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

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

Многие материалы на сайте взяты из блогов: "Все для веб-дизайнера Rudebox", "A free library of HTML, CSS, JS nuggets Codyhouse" - полностью переведен и представлен в ознакомительных целях!

vk.com/club.ssdru

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



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

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

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


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

Кнопка вызова к действию, которая анимируется и превращается в полноразмерное модальное окно.


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

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


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

Контактна форма является важной составляющей сайта, с помощью данной формы посетитель может связаться с администрацией сайта.


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

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


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

Надёжный хостинг

С нами хостинг удобен и прост, как диван у вас дома. Вы с комфортом размещаетесь, а все внутренние пружины мы берем на себя.

Бесплатный тестовый период, ежедневные бэкапы, неограниченный трафик, акции с бонусами... Конечно, у нас все это есть.


Перейти на хостинг

О КОМПАНИИ

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

Close

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


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

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

Close