21 мая 2018
Эффект параллакса для контента сайта на JS
Ares Категория: Web-Мастеру » Уроки
У нас вы можете скачать бесплатно Эффект параллакса для контента сайта на JS .

Данный материал предоставлен сайтом Skripter.info исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.
Эффект параллакса для контента сайта на JS

В данном уроке мы рассмотрим достаточно красивый прием стилизации контента для вашего сайта с помощью эффекта параллакса. Для достижения такого эффекта мы будем использовать parallax Content - это плагин jQuery, который применяет эффект плавной прокрутки параллакса к любым элементам при прокрутке вниз или вверх по странице. При этом использует плавную анимацию, что заставляет элементы «парить» на странице. Давайте посмотрим как у нас это получилось.



Шаг 1. HTML

Для начала включите скомпилированные файлы javascript на веб-странице:

<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>


Далее нам необходимо инициализировать плагин и привязать его для нашего контента:

<h3 class="parallax-move">
Заголовок
</h3>


Шаг 2. JS

Инициализируем плагин:

$(document).ready(function () {
$('.parallax-move').parallaxContent();
});


Затем настраиваем эффект прокрутки parallax в атрибуте data-parallax-content:

<h3 class="parallax-move" data-parallax-content='{"shift": 40, "duration": 3}'>
Parallax Header
</h3>


Или можете это сделать в javascript:

$(document).ready(function () {

$('.parallax-move').parallaxContent({
"shift": 10,
"duration": 1.5
});

});


Такой слайдер станет отличным элементом на сайте, мы сами планируем использовать его в дальнейшем, что и вам советуем.

Вот и все. Готово!

Скачивание файлов доступно только зарегистрированным пользователям










Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.