Сетчатые градиенты используются на современных веб-сайтах, и до недавнего времени я не знал, как их создать. Затем я столкнулся с Vanta.js.

Градиенты - одна из самых крутых техник для использования на веб-сайтах, и при правильном использовании пользовательский интерфейс и возможности значительно улучшаются. Используя CSS, мы можем создавать хорошие градиенты, такие как линейные, радиальные, круговые градиенты, однако, когда мы хотим иметь более сложные и полированные градиенты, мы должны глубоко погрузиться в JavaScript и холст.

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

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

Что такое Vanta.js?

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

Итак, давайте создадим проект и посмотрим, как он работает. Я буду использовать Vite для быстрой загрузки проекта Vanilla JavaScript. Введите npm init vite и выберите шаблон vanilla. На этом этапе вы можете использовать любой пакет, который хотите, или не использовать его. Если вы хотите увидеть финальную версию того, что мы будем строить, вы можете зайти отсюда.

Теперь, когда у нас есть настройка нашего проекта, пришло время установить Vanta и некоторые зависимости для создания красивого анимированного градиента.

При создании этих фонов Vanta использует Three.js или p5.js для рендеринга на холсте. Итак, нам нужно установить и добавить один из них, чтобы Vanta сделала все остальное.

Чтобы установить необходимые зависимости, введите в терминал следующий фрагмент. Я решил использовать Three.js, но вы также можете использовать p5.js.

npm install --save vanta three

Внутри index.html находится div#app, который будет корнем проекта. Внутри него давайте создадим section, который будет содержать заголовок и кнопку.

Теперь, когда у нас есть настройка разметки, пришло время стилизовать приложение. Я заставлю section занять все пространство, доступное во вьюпорте, и центрировать содержимое внутри. Я не буду рассказывать о кодах CSS в этой истории, но вы можете найти их в этом репозитории.

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

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

Чтобы добавить эффект Fog, мы должны импортировать его из vanta/dist/vanta.fog.min. Источник импорта будет меняться в зависимости от используемого вами эффекта. Итак, просто измените последний импорт на vanta.effectName.min. Кроме того, нужно импортировать и THREE.

После импорта выберите раздел, который мы хотим добавить, и реализуем эффект, используя импортированный эффект Vanta Effect.

Вот и все! Теперь у нас есть этот удивительный анимированный фон на веб-сайте, и это довольно круто, да?

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

И это тот фон, который он создал.

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

Для этого давайте начнем с присвоения переменной созданному нами экземпляру FOG и назовем его effect или как хотите. Затем определите переменную с именем speed и установите для нее значение 1.5. Это будет начальное значение скорости. Теперь пора добавить к кнопке прослушиватель событий и в зависимости от скорости переключать его между 1,5 и 4,5.

Это все для этой истории. В следующем я расскажу о том, как использовать Vanta с React и другими библиотеками. Убедитесь, что вы видите финальный проект по этой ссылке. Если вы хотите увидеть полный исходный код, вы можете посетить репозиторий здесь.

Спасибо, ребята, что прочитали. Надеюсь, тебе понравится. Увидимся в следующей истории.

Больше контента на plainenglish.io