Все для веб-дизайнера
Простой эффект прокрутки с параллаксом на CSS3
Параллакс один из самых красивых эффеков в современном сайтостроении, простота, и необычность эффекта заставляет посетителя восхищаться такой изюминкой. Мы много уделяем внимания данной теме, и она все больше набирает обороты в читаемости. В данном уроке мы рассмотрим один из достаточно простых эффектов, это прокрутка с эффектом параллакса реализованного с помощью CSS3 и JS. У нас будет четыре изображения, которые будут плавно замещать друг друга при прокрутке страницы. Такой эффект уже реализован на многих сайтах.
Много различным бесплатных шаблонов вы можете найти на сайте наших партнеров, также имеются и премиум шаблоны с круглосуточной техподдержкой и помощью в настройке:
В этом уроке я покажу, как мы можем построить простой сайт с параллаксом с помощью нескольких строк JavaScript-кода и CSS. Итак, давайте приступим.
Шаг 1. HTML
Первый шагом будет добавление фоновых изображений и классов к ним, кроме этого добавляем параметры data-speed, которые необходимы нам для создания данного эффекта:
|
1 2 3 4 |
<div id="home" class="bg_parralax" data-type="background" data-speed="10"></div> <div id="about" class="bg_parralax" data-type="background" data-speed="20"></div> <div id="blog" class="bg_parralax" data-type="background" data-speed="40"></div> <div id="contact" class="bg_parralax" data-type="background" data-speed="80"></div> |
Кроме этого Вам необходимо подключить в шапку сайта библиотеку jQuery, обратите внимание, если у Вас уже подключена данная библиотека, то может возникнуть конфликт версий, и весь сайт придет в негодность.
Шаг 2. CSS
Теперь нам необходимо определить параметры для каждого изображения, кроме этого изображения будут полностью адаптивными, при сохранении эффекта:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 |
#home { background: url("../images/home.jpg"); background-attachment: fixed; background-origin: initial; background-clip: initial; background-size: cover; background-repeat:no-repeat; background-position:100% 0; position:relative; min-height:1080px; } #about { background: url("../images/about.jpg"); background-attachment: fixed; background-origin: initial; background-clip: initial; background-size: cover; background-repeat:no-repeat; background-position:100% 0; position:relative; min-height:1080px; } #blog { background: url("../images/blog.jpg"); background-attachment: fixed; background-origin: initial; background-clip: initial; background-size: cover; background-repeat:no-repeat; background-position:100% 0; position:relative; min-height:1080px; } #contact { background: url("../images/contact.jpg"); background-attachment: fixed; background-origin: initial; background-clip: initial; background-size: cover; background-repeat:no-repeat; background-position:100% 0; position:relative; min-height:1080px; } |
В результате мы получаем практически функциональный эффект, нам осталось добавить только немного магии для полной работы параллакса.
Шаг 3. JS
Основная идея заключается в переходе слайдов с разной скоростью, пока страница прокручивается вверх или вниз. Это может быть достигнуто лишь с помощью нескольких строчек кода. Ниже приводится JavaScript код, который использует HTML5 селектор типов данных, чтобы все слайды и наборы фоновых позиций каждой страницы прокручивались вверх или вниз.
|
1 2 3 4 5 6 7 8 9 10 11 |
jQuery(document).ready(function(){ $objWindow = $(window); $('div[data-type="background"]').each(function(){ var $bgObj = $(this); $(window).scroll(function() { var yPos = -($objWindow.scrollTop() / $bgObj.data('speed')); var coords = '100% '+ yPos + 'px'; $bgObj.css({ backgroundPosition: coords }); }); }); }); |
Надеюсь данный эффект станет Вам полезным и Вы создадите замечательный сайт, который порадует посетителя красивой графикой и плавностью движения.
Вот и все. Готово!
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
Интересно:
| Опубликовал admin 26.06.2014 в 12:49, в категории Веб-дизайн. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |
Загрузка ...