8 фрагментов, демонстрирующих эффект отталкивания в веб-дизайне

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

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

Давайте рассмотрим коллекцию вдохновляющих демонстраций с фрагментами кода, чтобы вы могли сами увидеть уникальную тенденцию.

Отталкивающие линии

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

Панель параметров справа позволяет управлять эффектом. Вы можете установить радиус диапазона мыши, добавить или уменьшить количество линий или изменить расстояние между строками. Обратите внимание на физику. Он хорошо продуман и тщательно воспроизведен.

См. «Линии, отталкивающие перо» Даниэля Веласкеса.

30 000 частиц

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

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

См. Pen 30,000 Particles Джастина Уиндла

Интерактивные частицы

Если простая прямоугольная рамка не вдохновляет вас на творчество, вы всегда можете собрать все эти точки в персонажей, как это сделал Тамино Мартиниус в своем проекте Interactive Particles.

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

См. логотип Pen Interactive Particle от Тамино Мартиниуса

Текст в частицы

Давайте поиграем с цветом и размером, чтобы обогатить две предыдущие концепции некоторыми живыми поворотами, как это сделал Луи Хёбрегтс в своем проекте Text to Particles.

В отличие от решения Тамино Мартиниуса, здесь точки имеют разный радиус и разный цвет. Более того, вы можете изменить текст, задав его с помощью ввода. Курсор мыши имеет плавное и мягкое поведение, которое рассеивает толпу и приводит к небольшому беспокойству на игровой площадке. Это действительно приятная для глаз демонстрация.

См. «Текст пера к частицам» Луи Хобрегтса.

Шары и гравитация

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

Название проекта говорит само за себя. Гравитация, а также эффект отталкивания лежат в основе концепции, что делает опыт интригующим.

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

Взгляните на ручку BALLS&GRAVITY от Marco Dell'Anna

Аттрактор

Этот проект Марко Делл'Анны также основан на гравитации. Вы можете управлять им с помощью курсора мыши. Используйте его для перемещения частиц и изменения их положения.

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

См. Pen Attractor — MatterJS от Marco Dell'Anna

Активировать

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

См. «Активация пера» Джерарда Феррандеса

Моарская плазма

Эффект отталкивания также может быть очень полезен для анимации частиц. Вы можете сделать их еще более захватывающими. Взгляните на Moar Plasma.

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

Посмотрите на плазму Pen Moar от Джона Чин-Джу.

Снежные частицы

Snowy Particles — еще один отличный пример, где традиционная анимация частиц получает усиление. Нэт, автор ручки, использовал два приема.

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

См. Снег Pen Particles.js от Nat

Отпугиватели

Еще одна область, где отталкивающий эффект приносит пользу и легко превращает унылую сцену в феерию, — это текстовые эффекты. Мы уже видели, как замечательно выглядят слова, составленные из тысячи точек. Пришло время превратить точки в линии и приправить все отталкивающим эффектом. Рассмотреть возможность Отпугиватели на всякий случай.

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

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

См. «Отпугиватели ручек» Рейна ван дер Вурда.

Притяжение через отталкивание

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

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