Параллакс библиотека Ukiyo

Примеры:

<img>

<picture>

<div>

Пример от авторов

HTML:

Для элемента <img>:

<img class="ukiyo" src="image.jpg">

1	<img class="ukiyo" src="image.jpg">

Для элемента <picture>:

<picture>
  <source srcset="image.webp" type="image/webp">
  <img class="ukiyo" src="image.png">
<picture>

<picture>
  <source srcset="image1.jpg" media="(min-width: 1000px)" />
  <source srcset="image2.jpg" media="(min-width: 700px)" />
  <img class="ukiyo" src="image3.jpg">
</picture>

</picture>

Для других элементов:

<div class="ukiyo"></div>

1	<div class="ukiyo"></div>

JS:

Скачиваем и добавляем библиотеку ukiyo.min.js со своего сайта или с CDN:

<script src="https://cdn.jsdelivr.net/npm/ukiyojs@3.0.1/dist/ukiyo.min.js"></script>

1	<script src="https://cdn.jsdelivr.net/npm/ukiyojs@3.0.1/dist/ukiyo.min.js"></script>

И подключаем к нужному классу:

const images = document.querySelectorAll(".ukiyo");
images.forEach(image => {
	new Ukiyo(image, {
		speed: 2,
		scale: 1.25
		});
});

const images = document.querySelectorAll(".ukiyo");

images.forEach(image => {

new Ukiyo(image, {

speed: 2,

scale: 1.25

});

Настройки:

Название	Тип	По умолчанию	Описание
scale	number	1.5	Коэффициент масштабирования изображения.
speed	number	1.5	Скорость параллакса
willChange	boolean	false	Если значение `true`, элементу будет присвоено значение `will-change: transform`.
wrapperClass	string	null	Название класса, который автоматически генерируется для оболочки элемента.

Для каждого элементы эти параметры могут быть установлены индивидуально с использованием атрибута data-u-*, например:


<img

  data-u-scale="2"

  data-u-speed="1.7"

  data-u-wrapper-class="wrapper-name"

  data-u-willchange

>

Библиотека Ukiyo на github

Примеры:

HTML:

JS:

Настройки:

Смотрите также:

Добавить комментарий: