Автор

Прокрутка с эффектом параллакса на 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 и css. Фишкой этих миниатюр является то, что они все склеены, а масштаб миниатюр будет изменяться в зависимости от расстояния между ними и курсором мыши. В демонстрации будет приведены три примера с различными эффектами смены и масштабирования миниатюр.


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

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


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

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


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

Простой слайдер с морфированием изображений предварительного просмотра, анимированных с использованием свойств SVG.


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

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


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

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

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

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


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

О КОМПАНИИ

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

Close

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


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

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

Close