Раскрытие смысла самого красивого проклятия

Испанская инди-рок-группа Hinds анонсировала свой последний альбом The Prettiest Curse, который выйдет 3 апреля. На обложке альбома этого нового альбома изображены четыре участника группы, бездельничающие, окруженные, казалось бы, случайными объектами: зеркалом в форме сердца, колодой карт, паспортом и т. Д. Что ж, как оказалось, некоторые из этих предметов тематически связаны с одна из песен альбома. У Хиндса была идея позволить фанатам открывать эти скрытые значения, взаимодействуя с каждым объектом. Идея напомнила мне те карты со скрытыми картинками, которые вы можете найти в детском журнале Highlights.

Интернету не привыкать к картам изображений. Фактически, на самом деле существует тег <map>, который позволяет вам определять интерактивные области на изображении, которое было введено в 1997 году. 🤯 Ознакомьтесь с великолепной (быстрой) историей Зака ​​Блума на картах изображений на паутина.

Я знал, что хочу обвести точные контуры объекта, а не определять границу прямоугольника или круга. И хотя у тега <map> есть многоугольные области, мне также нужно было, чтобы решение было быстро реагирующим и легко стилизованным на случай, если нам понадобится стилизовать интерактивные области. Я сразу же обратился к SVG как к решению. Мне просто нужно было выбрать подходящее программное обеспечение для отслеживания и экспорта. Как насчет Figma?

Перо Figma - одно удовольствие. Не так сложно, как перо Illustrator, но, конечно, не так неприятно, как перо Photoshop. Что еще более важно, экспорт SVG из Figma прост и понятен. После часа отслеживания у меня осталась разметка SVG, которая определяет форму каждого из 10 скрытых объектов. Эта разметка состоит из <svg> родителя и 10 <path> дочерних элементов.

<svg width="1024" height="1024" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M1722 656C1714.33 647.667 1692.7 636 1667.5 656C1642.3 676 1655.33 705 1665 717L1712 780C1718.5 788.5 1733.5 798 1752.5 780L1815.5 717C1826.67 705.667 1841.5 677.6 1811.5 656C1804.67 651 1780 644.5 1765.5 656C1751 667.5 1739.5 677 1722 656Z"/>
  ...
</svg>

Я могу отбросить этот SVG прямо в код, чтобы увидеть трассировку объекта, но как насчет исходного изображения? Для этого я просто создаю родительский div и применяю исходное изображение в качестве фона. Вот немного CSS, который также даст вам идеально квадратный div с адаптивным SVG внутри. 👌🏻

<div id="artwork">
  <svg>
    ...
  </svg>
</div>
<style>
#artwork{
  background: url(artwork.jpg);
  background-size: cover;
}
#artwork:after{
  content: '';
  display: block;
  padding-bottom: 100%;
}
#artwork svg{
  height: 100%;
  width: 100%;
}
</style>

Теперь, когда у вас есть SVG, расположенный поверх исходного изображения, вы можете захотеть стилизовать пути. К счастью, это можно сделать и в CSS. Например, превращение дорожек в белый цвет:

#artwork svg path{
  cursor: pointer;
  fill: rgba(255, 255, 255, 1);
}

Последняя задача - что-то делать при щелчке по объектам. Для этого мы можем просто настроить несколько прослушивателей событий в Javascript для каждого из элементов <path>.

let paths = Array.from(document.getElementsByTagName('path'))
paths.forEach(path => {
  path.addEventListener('click', (e) => {
    // do something with e.target
  })
})

В нашем приложении мы интегрировали информационный модал Contentful для каждого из них, который включает название песни, значение и предварительный просмотр звука. Обязательно загляните в Hinds и откройте для себя скрытый смысл их записи здесь.