Бум! Изучение взрывов в веб-дизайне

Есть много способов привлечь внимание аудитории. Мы избалованы выбором, хотя нынешнее состояние технологий еще несовершенно. Мы испытываем некоторые проблемы с совместимостью браузеров, и не каждое устройство может справиться со всеми теми грандиозными решениями, которые приносят нам веб-разработчики.

Тем не менее, времена статичных веб-сайтов, где изображения были главной движущей силой, а слайдеры с причудливыми переходами были единственной изюминкой, прошли. Мы являемся свидетелями эпохи смелых идей и экстравагантности.

Одним из самых важных аспектов является то, что разработчики не ограничивают свое внимание большими вещами. Да, мы можем видеть множество анимаций холста, подавляющие VR и видео эксперименты, требующие полноэкранного режима и т. д. Однако сегодня даже мельчайшие детали получают свою дозу внимания.

Веб-сайты кишат микроскопическими решениями, особенно теми, которые основаны на курсоре мыши. Мы можем наткнуться на множество умных идей. Они фантастические, но в большинстве случаев (какое это слово я ищу?) «тихие». Я не говорю о том, что они издают звуки, поскольку некоторые из решений на основе мыши действительно издают звук. Я говорю об их поведении.

Их поведение плавное, спокойное и нежное. В некоторых случаях он настолько бесшовный, что едва заметен. И если вы слишком увлечены контентом или есть какие-то другие отвлекающие элементы, есть вероятность, что вы даже можете их не заметить. Так почему бы не сделать их немного «погромче», чтобы пользователи не упустили возможности насладиться ими?

Как это сделать, спросите вы. У меня есть одно хорошее решение: заставить вещи взорваться в прямом и переносном смысле.

Частицы в космосе Дин Вагман

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

См. перо
Частицы в космосе Дина Вагмана (@deanwagman).

Эффекты взрыва всегда пробуждают ощущение, что произошло что-то громкое. Итак, почему бы не использовать это в наших интересах и добавить немного шума, не создавая реального звука? Тем более, что здесь у нас есть подборка фантастических фрагментов кода. Давайте исследуем их вместе.

Взрыв частиц Алексея / Kaboomerz Кристофера Лиса

Если решение Дина Вагмана кажется вам слишком сложным, вы всегда можете попробовать Взрыв частиц от Алексея. Или, если, наоборот, вам нужно оказать более значительное влияние, вы всегда можете взять на вооружение Kaboomerz от Кристофера Лиса.

Первый фрагмент кода представляет собой «младшую версию» взрыва Дина, где десятки крошечных частиц образуют небольшой взрыв, который быстро появляется и гаснет. В случае с Кристофером Лисом вас удивит размер частиц. Конфетти, которые появляются из-под курсора мыши, невероятно велики. Однако, благодаря их короткому сроку службы, общий эффект не является ошеломляющим. Это просто приятно.

См. перо
Взрыв частиц JS/CSS3 от Алексея (@alek).

См. перо
#Codevember 5 – Kaboomerz от Кристофера Лиса (@chriscourses).

Взрывы DOM Дэвида А.

Если вам нравится эта идея, но вам нужно что-то более цифровое и ретро-вдохновленное, то Дэвид предлагает отличное решение. Он использует прямоугольники разных размеров вместо кругов, чтобы добиться красивого 8-битного прикосновения. В результате мы можем стать свидетелями небольшого взрыва харизмы 80-х.

См. перо
Взрывы DOM Дэвида А. (@meodai).

Искры WebGL от CreateJS

Если вы ищете реалистичную версию, WebGL Sparkles от CreateJS — прекрасный пример для рассмотрения. Несмотря на то, что все частицы здесь белые, благодаря продуманному поведению это похоже на настоящую праздничную стрельбу при нажатии на экран. Более того, у курсора есть прекрасный след, который придает сцене оттенок волшебства.

См. перо
CreateJS: WebGL Sparkles от CreateJS (@createjs).

Автоматическая пусковая установка для фейерверков Кристофера Лиса

Кстати говоря, наша коллекция взрывов не будет полной без дозы пиротехнического безумия. Автоматический запуск фейерверков от Кристофера Лиса — фантастический пример для рассмотрения. Это мультяшный фейерверк. Благодаря разноцветным частицам и формам, напоминающим гвоздики, он напоминает нам настоящий фейерверк, освещающий звездное небо.

См. перо
День 29. Автоматический запуск фейерверков от Кристофера Лиса (@chriscourses).

Концепция уничтожения модального окна от LegoMushroom

Эксперименты с холстом — не единственные в нашем списке. Эффекты взрыва можно применять к различным элементам интерфейса, например к модальному окну. У LegoMushroom есть яркое тому доказательство. Взгляните на их концепцию модального окна. Когда вы закрываете окно, оно не просто исчезает, а разбивается на несколько частей. Это идеальное дополнение ко всем тем причудливым полностью иллюстрированным веб-сайтам, которые довольно популярны в наши дни.

См. перо
Концепция уничтожения модального окна от LegoMushroom (@sol0mka).

Эффект взрыва SCSS от Сильвена Гарно / Взрыв текста SVG от Кацпера Бавола / Взрыв текста на холсте от Тима Хорвуда

Эффекты взрыва могут быть полезны и для типографики. Рассмотрим эффект взрыва SCSS Сильвена Гарно, взрыв текста SVG Кацпера Бавола и взрыв текста Canvas Тима Хорвуда.

Все три демонстрируют эффект взрыва, примененный к тексту. Как и ожидалось, курсор мыши вызывает каждый из них.

Сильвен Гарно позволяет пользователям раздувать каждую букву на сотню крошечных квадратов. Концепция Kacper Bawol выглядит почти так же, но на этот раз символ разбит на маленькие треугольники. А Тим Хорвуд позволяет пользователям разбивать весь текст на крошечные частицы, которые в конечном итоге возвращаются обратно и возвращают все в исходное состояние. Все три идеи просто невероятные.

См. перо
SCSS — Эффект взрыва от Сильвена Гарно (@sylvaingarnot).

См. перо
Текстовый взрыв SVG от Kacper Bawol (@Casperovic).

См. перо
Взрыв текста на холсте, щелкните для просмотра Тим Хорвуд (@tdhorwood).

Взрыв дома от Ko.Yelie

Эффект взрыва можно также применять к изображениям. Эта концепция Ko.Yelie — отличный пример. Нажав на картинку, вы разорвете ее на мелкие кусочки. Хотя трудно найти применение этому в реальных интерфейсах, всегда приятно иметь под рукой какие-то необычные решения, которые могут сделать обычные вещи уникальными.

См. перо
Взрыв дома от Ko.Yelie (@ko-yelie).

Взрывная особенность

Эффект взрыва — спорный инструмент. Он не подходит для каждого интерфейса из-за его «взрывного» характера и мощной харизмы. Хоть он и кажется безобидным и даже нейтральным при применении в паре с курсором мыши, он довольно «громкий» — так что нужно быть осторожным.

Помните, что не все люди ищут развлечений на веб-сайтах. И не всем по плечу экстравагантность и ошеломляющие впечатления. В конце концов, контент всегда остается королем.

Однако, если вы ищете какие-то необычные способы сделать взаимодействие с пользователем захватывающим, игривым и, так сказать, «громким», то эффект взрыва, несомненно, может вам пригодиться.