Ваша корзина пуста
Форма входа

Бесплатный раздел

Вы здесь: Главная страница » Файлы » Хаки / Дополнения
Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!

jQParralax - Эффект параллакса для элементов DOM с изображениями BG

Дата добавления: 30.09.2020 - 21:01
Добавил: Buger
Количество просмотров: 446
Количество комментариев: 0
Размер файла: 6.9 Kb
Рейтинг материала: 0.0 / 0
jQParralax - Эффект параллакса для элементов DOM с изображениями BG
БЕСПЛАТНО
Скачать файл с сервера
рейтинг 0.0
/
голосов 0
jQParralax - это супер-крошечный плагин jQuery, который применяет эффект прокрутки параллакса к любым элементам DOM с фоновыми изображениями.

Как это использовать:
1. Добавьте фоновые изображения в контейнеры параллакса с помощью CSS-класса parallax-background.
Код
<div class="parallax-background" style="background-image:url('https://images.unsplash.com/photo-1601452168062-ead9e4519929');">
  Parallax Effect 1
</div>

<div class="parallax-background" style="background-image:url('https://images.unsplash.com/photo-1601403193933-7621c7da5fc8');">
  Parallax Effect 2
</div>

<div class="parallax-background" style="background-image:url('https://images.unsplash.com/photo-1593642532400-2682810df593');">
  Parallax Effect 3
</div>

<div class="parallax-background" style="background-image:url('https://images.unsplash.com/photo-1599423561457-55f6911c46c3');">
  Parallax Effect 4
</div>


2. Укажем начальное положение этих фоновых изображений.
Код
.parallax-background {
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  transform: translate3d(0,0,0);
  -moz-transform: translate3d(0,0,0);
  -webkit-transform: translate3d(0,0,0);
}


3. Подключем основной скрипт jQ-parallax.js после jQuery, и плагин позаботится обо всем остальном.
Код
<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="jQ-parallax.js"></script>
Добавлять комментарии могут только зарегистрированные пользователи.


Поделись с друзьями: