21
мая
2018
В данном уроке мы рассмотрим достаточно красивый прием стилизации контента для вашего сайта с помощью эффекта параллакса. Для достижения такого эффекта мы будем использовать parallax Content - это плагин jQuery, который применяет эффект плавной прокрутки параллакса к любым элементам при прокрутке вниз или вверх по странице. При этом использует плавную анимацию, что заставляет элементы «парить» на странице. Давайте посмотрим как у нас это получилось.
Шаг 1. HTML
Для начала включите скомпилированные файлы javascript на веб-странице:
Далее нам необходимо инициализировать плагин и привязать его для нашего контента:
Шаг 2. JS
Инициализируем плагин:
Затем настраиваем эффект прокрутки parallax в атрибуте data-parallax-content:
Или можете это сделать в javascript:
Такой слайдер станет отличным элементом на сайте, мы сами планируем использовать его в дальнейшем, что и вам советуем.
Вот и все. Готово!
Эффект параллакса для контента сайта на 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>
<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>
Заголовок
</h3>
Шаг 2. JS
Инициализируем плагин:
$(document).ready(function () {
$('.parallax-move').parallaxContent();
});
$('.parallax-move').parallaxContent();
});
Затем настраиваем эффект прокрутки parallax в атрибуте data-parallax-content:
<h3 class="parallax-move" data-parallax-content='{"shift": 40, "duration": 3}'>
Parallax Header
</h3>
Parallax Header
</h3>
Или можете это сделать в javascript:
$(document).ready(function () {
$('.parallax-move').parallaxContent({
"shift": 10,
"duration": 1.5
});
});
$('.parallax-move').parallaxContent({
"shift": 10,
"duration": 1.5
});
});
Такой слайдер станет отличным элементом на сайте, мы сами планируем использовать его в дальнейшем, что и вам советуем.
Вот и все. Готово!
|
|
|
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Datalife Engine
Релизы
WordPress
Joomla
Другие CMS
Web-Мастеру
Игры/Игровые CMSПоследние комментарии
-
Написал(а): SergTSY
В новости: QR Menu Maker v3.4.0 - бесконтактное меню ресторанаСсылки не рабочие.
Перезалейте, плз? -
Написал(а): anons01
В новости: Akeeba Backup Pro v9.9.2 - компонент резервного копирования для JoomlaUpload doesn't work -
Написал(а): sania4m
В новости: Aoxio v2.1 Nulled - скрипт для бронирования бизнес-услугустановка проходит , но не создается база данных -
Написал(а): Nibiru7
В новости: JRealtime Analytics v3.9.2 - компонент аналитики для Joomlaспасибо за -
Написал(а): jackxren88
В новости: Advanced Custom Fields Pro v2.7.7 - расширенные пользовательские поля для JoomlaМожет есть у кого-то решение как убрать "запрос на ключ"? -
Написал(а): Escudocu
В новости: YOO Glowbar v March 1, 2024 - Joomla шаблон для сайтов о красоте и модеБлагодарю за шаблон!!! -
Написал(а): sendinfo
В новости: Advanced Custom Fields Pro v2.7.7 - расширенные пользовательские поля для JoomlaВиндоус ругается на вирус! Проверьте архив. -
Написал(а): pmvb
В новости: Advanced Module Manager Pro v10.0.18 - расширенный менеджер модулей JoomlaADVANCED MODULE MANAGER PRO V10.0.18 просит ключь???