Все для веб-дизайнера
Динамичный фон с эффектом параллакса на JS
Параллакс-это одна из наиболее просматриваемых тем на нашем сайте, пользователей чрезвычайно интересует данная рубрика, и это не удивительно, ведь она не только интересует разработчиков, но и обычных посетителей, которые запоминают все необычное, и делятся этим между собой, зачастую эффект параллакса применяться к фону сайта, он помогает существенно оживить Ваш ресурс, придав ему изюминку, в данном уроке мы рассмотрим именно процесс создание замечательного легкого фона сайта с эффектом параллакса.
Задумка состоит в том, чтобы оживить фон сайта при движении курсора мыши, при этом визуально не отяготить сайт, и так, давайте приступим.
Шаг 1. HTML
После того как Вы подключили все скрипы к Вашему сайту, необходимо создать вызов нашего параллакса, для этого мы создадим контейнер, в который будут заключены три класса, каждый из которого содержит определенный слой нашего параллакса:
|
1 2 3 4 5 |
<div id="simple3D"> <div class="dot"></div> <div class="kinoco"></div> <div class="star"></div> </div> |
Кроме этого мы создали блок с текстом, чтобы Вы могли полноценно понимать, как этот фон будет смотреться в сочетании с другими элементами на странице.
Шаг 2. CSS
Стили будут очень простыми, нам необходимо, для начала, определить общие параметры нашего контейнера, затем привязать заготовленные заранее изображения:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
#simple3D { position: absolute; z-index: 1; width: 100%; height: 900px; } #simple3D div { min-height: 1100px; width: 120%; } #simple3D div.dot { background: url(../images/dot2.png); } #simple3D div.kinoco { background: url(../images/kinoco.png); } #simple3D div.star { background: url(../images/star.png); } |
Шаг 3. JS
Последним, но не менее важным элементом, будет реализация самого эффекта, и анимации при движении курсора, для этого нам понадобится немного магии и следующий код:
|
1 2 3 4 5 6 7 8 9 10 |
<script> $("#simple3D").simple3D({ moveX:3, // 1 - 5 moveY:3, // 1 - 5 bgImage:true, targetAll:true, reverseX: true, reverseY: true }); </script> |
Применив такой замечательный эффект у себя на сайте Вы явно привлечете внимание пользователя к своему ресурсу. Надеюсь урок был Вам интересен.
Вот и все. Готово!
Читайте также:
Интересно:
| Print article | Опубликовал admin 21.07.2014 в 14:06, в категории jQuery. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |
Загрузка ...