10 красивых примеров анимации частиц в веб-дизайне

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

Как правило, анимацию частиц можно увидеть в разделах героев, как, например, в JetUp Digital.

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

Чтобы воспроизвести этот эффект, первым шагом должен быть файл Particles.js.

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

Как правило, разработчики предпочитают более аккуратные, скромные и спокойные варианты. Например, посмотрите Canvas Particles от Romswell Roswell Parian Paucar. Это сочетание частиц и параллакса, что приводит к привлекательной и динамичной эстетике.

Однако это не означает, что подход ограничивается только такой реализацией. Вспомним «Частицы в космосе» Дина Вагмана, систему частиц только на CSS от Робина Селмера и, конечно же, эффект отталкивания, искусно воспроизведенный и представленный в кодеке Алекса Сафаяна. В то время как концепция Робина Селмера — просто приятное зрелище; два других требуют взаимодействия с пользователем, и это всегда интересно.

Использование анимации частиц, чтобы произвести впечатление

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

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

30 000 частиц Джастина Уиндла

Здесь название говорит само за себя. С 30 000 частиц на борту можно ожидать чего-то грандиозного. И Джастин Уиндл, безусловно, оправдал наши ожидания. Его концепция невероятна. Используйте мышь, чтобы поиграть. Физика просто исключительная. Этот вариант анимации частиц довольно популярен среди разработчиков, хотя и не в таком монументальном масштабе.

«Рыба в воде» Алекса Сафаяна

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

ПЛАНКТОН - Жизнь частиц Марко Делл'Анна

Получив награду за самый душевный проект 2017 года, «Планктон», безусловно, достоин внимания. Проект восхищает не только идеей, но и реализацией. От тонкой окраски, которая подходит здесь, как перчатка, до великолепного поведения, которое выглядит невероятно естественным, Марко Делл'Анна уделяет внимание деталям.

STARDUST от Марко Делл'Анна

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

Точки гравитации Акимицу Хамамуро

Акимицу Хамамуро предлагает вам добавить так называемые «точки гравитации» на его игровую площадку. Они вторгаются в хаотичное движение точек и притягивают их, как магнит. Хотя они и не выполняют роль центра орбиты; тем не менее, они образуют фокусы, которые заставляют частицы двигаться в их направлении.

CSS Particle Orb от Nate Wiley

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

Волны частиц, Кевин Раджарам

Кевин Раджарм взял красоту и элегантность анимации частиц и дополнил ее потрясающими возможностями Three.js, создав утонченную, но по-настоящему сложную концепцию. Удивительная панорама волн кажется футуристической, искусственной и завораживающей.

Неортодоксальное использование

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

Логотип Interactive Particle от Тамино Мартиниуса

Interactive Particle Logo — типичный тому пример. Это похоже на переосмысленное решение приведенного выше фрагмента Джастина Уиндла. Хотя здесь нет 30 000 точек, он состоит из внушительного количества частиц, которые искусно образуют слово «КОДЕПЕН». Это один из тех случаев, когда концепция нашла практическое применение.

Текст к частицам Луи Хобрегтса

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

Частицы пишут текст Марко Делл'Анна

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

ПРОСТО СДЕЛАЙ ЭТО, Марко ДеллАнна

Это еще один шедевр от Марко Делл’Анна. На этот раз анимация частиц принимает участие в формировании знаменитого логотипа Nike. От неясного и полупрозрачного до четкого и твердого, анимация постепенно раскрывает логотип, ненавязчиво захватывая всеобщее внимание.

Текст из 404 частиц Энрико Тониато

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

Эффект привлечения внимания

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