Все для веб-дизайнера
Простой эффект прокрутки с параллаксом на 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 }); }); }); }); |
Надеюсь данный эффект станет Вам полезным и Вы создадите замечательный сайт, который порадует посетителя красивой графикой и плавностью движения.
Вот и все. Готово!
Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.
Читайте также:
Интересно:
| Print article | Опубликовал admin 26.06.2014 в 12:49, в категории Веб-дизайн. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |
Загрузка ...