Робимо інтерактивні наліпки за допомогою sticker.js

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

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

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>². З цієї причини важливо, щоб 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 розрахований на рівносторонні зображення і за замовчуванням малює лише круглі наліпки.