Атака анимированных фонов на основе BLOB-объектов в веб-дизайне

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

Есть разные виды анимации. Вы можете наткнуться на:

• Анимация частиц;
• Калейдоскопические анимации;
• Абстрактные 3D-анимации;
• Плавная геометрическая анимация и многое другое.

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

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

Анимация Blob от Уве Шардона

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

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

Посмотрите анимацию Pen Blob на чистом CSS от Uwe Chardon.

Клякса Эштона Холгейта

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

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

См. Pen Blob Эштона Холгейта

Прыгающий жидкостный погрузчик Фабио Оттавиани

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

Хотя на шильдике проекта пера написано «Загрузчик», его можно легко превратить в декоративную деталь фона. И для этого все, что вам нужно знать, это HTML и CSS, так как художник вообще не использует никакой магии JavaScript. Умный.

Посмотрите на загрузчик жидкости Pen Bouncing от Фабио Оттавиани.

Canvas Blob Test от Шоу

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

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

См. Тест Pen Canvas Blob от Shaw

Клякса от Джеффри

Это решение Джеффри — выигрышная комбинация двух трендов. Здесь вы можете найти пятнистый фон, который очень популярен в наши дни, и плавное поведение, которое преобладает над другими вариантами.

Фрагмент кода сделан с помощью HTML, CSS и JavaScript. Он выглядит одинаково в разных браузерах и на разных устройствах. Художник использует базовый пружинный алгоритм, который делает взаимодействие с огромной каплей реальным и не искусственным.

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

См. Pen Blob Джеффри

Кляксы Шарлотты Данн

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

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

Посмотрите на шарики пера Шарлотты Данн

Теперь давайте перейдем от плоского мира к трехмерному.

Блоб Георгия Николоффа

Blob от Георгия Николоффа — наглядный пример. Он сразу бросается в глаза своей яркой окраской, высокотехнологичным внешним видом и динамичным поведением. Разработчик максимально использует передовые технологии, используя WebGL, GLSL и шейдеры в своих интересах. Несмотря на то, что решение зависит от совместимости браузера, оно выглядит вдохновляюще.

Взгляните на шарик-ручку Георгия Николоффа.

Эксперимент №6 Дэниела Дель Коре

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

См. «Эксперимент с ручкой № 6» Дэниела Дель Коре.

Фальшивая капля частиц Эли Фитча

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

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

Взгляните на поддельную каплю частиц Pen #3December от Эли Фитча.

Генератор BLOB-объектов CSS от Эдвина Чена

Мы собираемся закончить нашу коллекцию CSS Blob Generator Эдвина Чена. Как следует из названия, в этой ручке есть небольшая игровая площадка, где вы можете создать форму капли.

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

См. Генератор BLOB-объектов Pen CSS от Эдвина Чена.

Идеальная форма для успокаивающей атмосферы

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

Анимации на основе BLOB-объектов предназначены только для использования в современных проектах. Они ненавязчивы, хотя и привлекают внимание. Независимо от того, предпочитаете ли вы элегантную, плоскую реализацию или экстравагантное 3D, он легко создаст спокойную атмосферу.

Он обогатит впечатления, украсит фон и в то же время уступит место содержанию. Эти фоны помогут вам сохранить баланс между визуальными и текстовыми данными.