Крутые эффекты для сайта, которые реагируют на движение курсора на JS и CSS
166 любопытных
В современном веб-дизайне очень важно уметь привлечь внимание посетителей и заинтересовать их контентом. Один из способов сделать сайт более интерактивным и привлекательным для пользователей — использование эффектов, которые реагируют на движения курсора мыши.
В данной статье мы рассмотрим крутые эффекты для сайта, которые можно создать с помощью JavaScript и CSS. Вы узнаете, как создать различные эффекты, которые реагируют на движение курсора на сайте.
Мы коротко рассмотрим каждый эффект, предоставим примеры кода. Эта статья будет полезна как для начинающих, так и для опытных веб-разработчиков, которые хотят сделать свой сайт более интерактивным и привлекательным.
Аттрактор
Уникальность этого проекта заключается в том, что даже если частицы удаляются от своего первоначального положения, они всегда стремятся вернуться в круг, создавая захватывающий визуальный эффект. Курсор мыши играет двойную роль — магнита, притягивающего частицы обратно к кругу, и инструмента для отталкивания точек, по крайней мере, на время.
Этот проект является ярким примером того, как эффект отталкивания можно использовать в сочетании с другими физическими концепциями.
Линии
Этот пример эффекта при наведении напоминает набор гитарных струн. На первый взгляд, линии кажутся статичными, но как только вы наводите на них курсор, происходит нечто волшебное. Линии начинают изгибаться и деформироваться, в итоге образуя небольшую сферу.
Панель опций в правой части экрана дает полный контроль над эффектом. Вы можете настроить радиус действия мыши, добавить или уменьшить количество линий, изменить расстояние между струнами — действительно впечатляющая и реалистичная имитация.
30,000 частиц
Пример Джастина Уиндла — это захватывающий пример эффекта, примененного к тысячам точек. Плотно размещённые частицы динамически реагируют на курсор мыши, быстро разбегаясь при наведении на них курсора.
Несмотря на их бешеное движение, курсор мыши удерживает точки на месте, в результате чего образуется большой полый круг. Этот потрясающий и интерактивный дисплей свидетельствует о популярности эффекта отталкивания в современном веб-дизайне.
Логотип из частиц
Если простой прямоугольной рамки недостаточно, чтобы вдохновить вас на творчество, воспользуйтесь проектом Тамино Мартиниуса «Интерактивные частицы». В этой завораживающей демонстрации каждая буква слова построена из сотен точек, которые можно разнести курсором мыши.
В проекте есть элементы управления, с помощью которых можно изменять параметры демо и настраивать его по своему вкусу. Эта ручка — яркий пример того, как можно творчески использовать эффект отталкивания частиц.
Произвольный текст из частиц
Проект Луиса Хёбрегтса «Текст из частиц» — отличный пример того, как цвет и размер могут добавить живости к эффекту отталкивания от курсора. В отличие от приведенного выше решения Тамино Мартиниуса, точки в этом проекте имеют разный радиус и цвет, что делает визуально яркий эффект.
Вы даже можете изменить текст, задав его с помощью ввода, что позволяет экспериментировать с различными фразами и словами. Мягкое поведение курсора мыши рассеивает частицы, что приводит к небольшому, но приятному беспорядку на вашей странице.
Шары и гравитация
Эффект отталкивания от курсора можно комбинировать с другими решениями на основе физики для создания крутых результатов.
Гравитация и эффект отталкивания являются центральными понятиями этой завораживающей демонстрации. В демо-версии вы должны схватить круг и с его помощью оттолкнуть другие круги, почти как в игре в бильярд. Каждый красочный плоский шар реагирует на ваши движения, создавая увлекательный и интерактивный опыт.
Вода
Эффект отталкивания не ограничивается только частицами и решениями на основе физики. Его также можно использовать для создания потрясающих текстовых эффектов, как показано в этом примере, где слово построено из коротких тонких линий, направленных к зрителю, создавая ощущение глубины и объема.
Когда вы наводите курсор мыши и проводите им по тексту, линии начинают танцевать и двигаться в ответ на ваши движения.
Поведение линий плавное и визуально приятное, создавая потрясающий эффект, который подчеркивает резкий и острый характер текста. Кроме того, линии движутся сами по себе, создавая ощущение легкого ветерка, который колышет части демонстрации.
Несмотря на свое предназначение отталкивать детали при наведении на них курсора, отталкивающий эффект, несомненно, притягивает. Его игривое поведение сразу привлекает внимание и побуждает к взаимодействию с чем либо на вашем сайте.
Эффект отталкивания не одинок в своем стремлении привлечь внимание зрителей. В сочетании с другими видами анимации и эффектов он может привести к уникальным и привлекающим внимание решениям.
Возможности безграничны, и веб-дизайнеры могут использовать эффекты при наведении курсора как мощный инструмент для улучшения пользовательского опыта и создания увлекательных веб-страниц.
