Примеры:
<img>
<picture>
<div>
HTML:
Для элемента <img>:
|
1 |
<img class="ukiyo" src="image.jpg"> |
Для элемента <picture>:
|
1 2 3 4 |
<picture> <source srcset="image.webp" type="image/webp"> <img class="ukiyo" src="image.png"> <picture> |
|
1 2 3 4 5 |
<picture> <source srcset="image1.jpg" media="(min-width: 1000px)" /> <source srcset="image2.jpg" media="(min-width: 700px)" /> <img class="ukiyo" src="image3.jpg"> </picture> |
Для других элементов:
|
1 |
<div class="ukiyo"></div> |
JS:
Скачиваем и добавляем библиотеку ukiyo.min.js со своего сайта или с CDN:
|
1 |
<script src="https://cdn.jsdelivr.net/npm/ukiyojs@3.0.1/dist/ukiyo.min.js"></script> |
И подключаем к нужному классу:
|
1 2 3 4 5 6 7 |
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
Добавить комментарий: