Бібліотека sticker.js дозволяє за допомогою кількох рядків CSS додати оригінальну і досить безглузду красивість на сайт (мій улюблений тип красивостей).

Інтерактивні наліпки (торкніться курсором/пальцем)1

Процес максимально простий.

  1. Скачати бібліотеку з репозиторію на GitHub і підключити її перед основним файлом, в якому ініціалізуються скрипти (у нашому випадку це буде script.js).

     <script src="/assets/js/sticker.min.js"></script>
     <script src="/assets/js/script.js"></script>
    
  2. Створити 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>
    
  3. Присвоїти контейнеру ідентифікатор. Клас 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>
    
  4. Зображення на наклейці підключається через 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>
    
  5. Підключити ініціалізацію скрипта при завантаженні 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 розрахований на рівносторонні зображення і за замовчуванням малює лише круглі наліпки.