Все для веб-дизайнера
Эффект параллакса для контента сайта на JavaScript
Параллакс достаточно популярный эффект среди современных веб-разработчиков, много кто пытается оживить свой ресурс благодаря такому подходу, это, несомненно, является отличный прием для скучного сайта, который, буквально, вдыхает новую жизнь в ваш проект и привлекает внимание посетителей. В данном уроке мы рассмотрим достаточно красивый прием стилизации контента для вашего сайта с помощью эффекта параллакса. Для достижения такого эффекта мы будем использовать parallax Content,-это плагин jQuery, который применяет эффект
плавной прокрутки параллакса к любым элементам при прокрутке вниз или вверх по странице. При этом использует плавную анимацию, что заставляет элементы «парить» на странице. Давайте посмотрим как у нас это получилось.
Мы подключили следующие скрипты:
- jQuery
- TweenLite.js
- CSSPlugin.js
Шаг 1. HTML
Для начала включите скомпилированные файлы JavaScript на веб-странице:
|
1 2 3 4 |
<script src="/jquery-3.3.1.slim.min.js"></script> <script src="/gsap/1.20.4/TweenLite.min.js"></script> <script src="/gsap/1.20.4/plugins/CSSPlugin.min.js"></script> <script src="build/app.js"></script> |
Далее нам необходимо инициализировать плагин и привязать его для нашего контента:
|
1 2 3 |
<h3 class="parallax-move"> Заголовок </h3> |
Шаг 2. JS
Инициализируем плагин:
|
1 2 3 |
$(document).ready(function () { $('.parallax-move').parallaxContent(); }); |
Затем настраиваем эффект прокрутки parallax в атрибуте data-parallax-content:
|
1 2 3 |
<h3 class="parallax-move" data-parallax-content='{"shift": 40, "duration": 3}'> Parallax Header </h3> |
Или можете это сделать в JavaScript:
|
1 2 3 4 5 6 7 8 |
$(document).ready(function () { $('.parallax-move').parallaxContent({ "shift": 10, "duration": 1.5 }); }); |
Такой слайдер станет отличным элементом на сайте, мы сами планируем использовать его в дальнейшем, что и вам советуем.
Вот и все. Готово!
| Опубликовал Cooper 05.05.2018 в 17:21, в категории jQuery. Вы можете следить за комментариями через RSS 2.0. Вы можете перейти в конец записи и оставить комментарий. Пинги запрещены. |
