Робимо інтерактивні наліпки за допомогою sticker.js
Бібліотека sticker.js дозволяє за допомогою кількох рядків CSS додати оригінальну і досить безглузду красивість на сайт (мій улюблений тип красивостей).
Процес максимально простий.
-
Скачати бібліотеку з репозиторію на GitHub і підключити її перед основним файлом, в якому ініціалізуються скрипти (у нашому випадку це буде
script.js
).<script src="/assets/js/sticker.min.js"></script> <script src="/assets/js/script.js"></script>
-
Створити HTML-контейнер, який служитиме основою для наклейки. Тег
<img>
не підійде, оскільки бібліотека розрахована на роботу з параметромbackground-image
згенерованого елемента-нащадка контейнера. Найкраще з цією функцією впорається звичайний<div>
2. З цієї причини важливо, щобwidth
іheight
контейнера були задані, оскільки всередині не буде контенту, який запобігатиме його схлопуванню.<figure class="sticker-example"> <div class="sticker-1"></div> <div class="sticker-2"></div> <div class="sticker-3"></div> <figcaption>Інтерактивні наліпки (торкніться курсором/пальцем)</figcaption> </figure> <style> .sticker-example > div { width: 150px; height: 150px; } </style>
-
Присвоїти контейнеру ідентифікатор. Клас
sticker
абоsticker_js
цілком згодиться — головне, аби ідентифікатор не перетинався з іншими елементами на сайті, оскільки ініціалізація скрипта sticker.js відбуватиметься саме тут.<figure class="sticker-example"> <div class="sticker sticker-1"></div> <div class="sticker sticker-2"></div> <div class="sticker sticker-3"></div> <figcaption>Інтерактивні наліпки (торкніться курсором/пальцем)</figcaption> </figure>
-
Зображення на наклейці підключається через CSS на клас
sticker-img
— елемент з цим класом буде створено всередині контейнера, на якому ініціалізуватиметьсяsticker.js
.<style> .sticker .sticker-img { background-size: contain; } .sticker-1 .sticker-img { background-image: url('/assets/images/robots/01.png'); } .sticker-2 .sticker-img { background-image: url('/assets/images/robots/02.png'); } .sticker-3 .sticker-img { background-image: url('/assets/images/robots/03.png'); } </style>
-
Підключити ініціалізацію скрипта при завантаженні DOM.
/* script.js */ document.addEventListener("DOMContentLoaded", event => { Sticker.init('.sticker'); });
Також можемо регулювати ступінь прозорості для тіні та всі стандартні параметри background
: color
, position
, repeat
тощо.
<style>
/* shadow opacity */
.sticker-4 .sticker-shadow {
opacity: 0.6;
}
.sticker-5 .sticker-shadow {
opacity: 1;
}
.sticker-6 .sticker-shadow {
opacity: 0.1;
}
/* background */
.sticker-4 .sticker-img {
background-color: coral;
}
.sticker-5 .sticker-img {
background-image: url("/assets/robots/05.png");
background-size: 10% 10%;
background-repeat: repeat;
}
.sticker-6 .sticker-img {
background-image: linear-gradient(to right, rgba(122, 57, 206, 0.75), rgba(38, 102, 232, 0.75));
}
</style>
Єдиний недолік, який здався суттєвим — sticker.js розрахований на рівносторонні зображення і за замовчуванням малює лише круглі наліпки.