Анимированные фоны – популярная особенность современных сайтов. Это уже не тенденция или что-то необычное. Это только один из жизнеспособных способов украсить область героя сегодня. Хотя проблема с совместимостью браузеров все еще существует, решению удалось найти нишу для себя.
Существуют разные типы анимации. Ты можешь найти:
Если несколько лет назад анимация частиц в стиле созвездия доминировала в курятнике, то сегодня анимации капель волнуют умы творческих коллективов. Что ты можешь сделать? Чистое поведение неотразимо. Подпрограмма трансформации, которая показывает, как большая капля плавно движется в пространстве, легко побеждает онлайн-аудиторию и выводит ваш сайт в лидеры.
Чтобы воспользоваться преимуществами этого традиционного метода, мы предлагаем коллекцию выдающихся фрагментов кода, которые подскажут вам, как создать собственную пузырьковую анимацию. Вы можете сделать это с помощью новых или традиционных инструментов. Теперь давайте найдем идеальную комбинацию для вашего следующего проекта.
Уве Шардон блоб анимация
Версия Uwe Chardon этого популярного решения практична и вдохновляет. Он имеет простую и плоскую каплю, с красивым оранжевым цветом и гладкими краями, помещенную в чистую среду. Ему удалось очень хорошо имитировать сетевое поведение.
Результатом является выигрышное сочетание простой формы и сложного поведения, которое выглядит довольно впечатляюще.
Посмотрите чистую CSS-анимацию Uwe Chardon’s Pen
Эштон Холгейт Блоб
Приведенный выше пример представляет собой традиционный тип капли с неправильной формой и относительно выразительным преобразованием. Тем не менее, этот проект Эштон Холгейт придерживается более божественной формы, которая почти окружает круг, и изменения почти незаметны. Тем не менее, это также выглядит исключительным.
Кроме того, художник также играл с текстом, заставляя его менять цвет на противоположный, когда он касается области пузыря.
Посмотрите шариковую ручку Эштона Холгейта
Прыгающий жидкий погрузчик Фабио Оттавиани
Фабио Оттавиани воплотил в жизнь игривый характер пленительного поведения, свойственный блоб-анимациям. Его пузырь маленький, но он имеет большое влияние благодаря своей очаровательной трансформации и веселью.
Хотя на паспортной табличке ручки написано «Зарядное устройство», ее легко превратить в декоративный фон. И чтобы сделать это, все, что вам нужно знать, это HTML и CSS, так как художник не использует магию JavaScript. Умный.
Увидеть Жидкий погрузчик с убирающимся копьем Фабио Оттавиани
Тест Холст Пятно Шоу
В отличие от предыдущего примера, это отбрасывание генерируется исключительно JavaScript. Так что будьте готовы погрузиться в захватывающее решение и сложный игровой процесс с графикой. Кроме того, концепция отличается от других своим примитивным аспектом, наряду с очень мягким и спокойным поведением, которое создает общую безмятежную атмосферу.
Это довольно универсальный и нейтральный. Таким образом, он может стать идеальной фоновой анимацией для различных проектов.
См тест Шо ручки Холст
Blob от Джеффри
Это решение Джеффри – выигрышная комбинация двух тенденций. Здесь вы можете найти неровное дно, которое очень популярно сегодня, и сетевое поведение, которое имеет приоритет над другими опциями.
Фрагмент кода сделан с использованием HTML, CSS и JavaScript. Это выглядит одинаково для нескольких браузеров и устройств. Художник использует базовый пружинный алгоритм, который делает взаимодействие с большим пузырем реальным, а не искусственным.
Обратите внимание, что хотя пузырь занимает половину сцены, он не доминирует над зрителями. За этим усмотрением лежит гладкое и безмятежное поведение.
Посмотри на ручку Джеффри
Шарлотта Данн Блобс
Если одной капли недостаточно, чтобы произвести правильное впечатление, вы всегда можете выбрать дюжину. Шарлотта Данн с ее изящным фрагментом кода покажет вам, как это сделать, не разрушая общий эффект и не впечатляя посетителей.
Его фрагмент кода приятно смотреть. У этого есть много маленьких движущихся пузырей, которые взаимодействуют друг с другом. Каждый кажется маленькой точкой света. Вместе они образуют большую каплю, которая излучает тепло на всех фронтах.
Проверьте перья Шарлотты Данн
Теперь давайте перейдем от плоского мира к трехмерному миру.
Blob от Георги Николофф
Подагра Георгий Николафф является примером. Он сразу бросается в глаза своим ярким цветом, высокотехнологичным внешним видом и динамичным поведением. Разработчик в полной мере использует преимущества передовых технологий, используя WebGL, GLSL и шейдеры. Хотя решение зависит от совместимости браузера, оно кажется вдохновляющим.
Посмотри перо Георгий Николафф
Тест 6 Даниэль Дель Core
Daniel Del Core показывает онлайн-аудитории, как играть с шумом Simplex и исправить это с помощью тщательно воспроизведенных текстур. В результате получился вдохновленный конфетами пейнтбольный мяч. Хотя он движется очень быстро, он настолько увлекателен, что трудно сразу оторвать взгляд.
Смотрите эксперимент с перьями № 6 Даниэля Дель Кора
Eli Fitch Поддельное падение частиц
В отличие от приведенного выше примера, который обладает смелой индивидуальностью и харизмой одержимой спандексом поп-звезды 80-х, это звучит как некоторые из скромных техно будущего. Капля построена из крошечных частиц, которые ярче под некоторыми углами для трехмерного взгляда.
Как и ожидалось, художник использует магию Three.js и оригинальную процедурную текстурную работу для реализации этой концепции.
Смотрите фальшивую ручку для частиц Eli Fitch # 3 декабря
CSS Blob Generator от Эдвина Чена
Давайте закончим нашу коллекцию генератором блобов CSS Эдвина Чена. Как следует из названия, эта шариковая ручка имеет небольшую игровую площадку, где можно создать форму капли.
Здесь вы найдете небольшую панель, где вы можете назначить радиус каждому ребру. Хотя он статичный и плоский, вы можете легко скопировать результат и переместить его с помощью JavaScript.
См. Генератор блобов CSS от Эдвина Чена
Идеальная форма для расслабляющей обстановки.
Не удивительно, что спокойный и мягкий характер жидкого поведения становится сегодня популярным. Как захватывающий маленький ручей, протекающий по лесу, он притягивает вас и служит островом спокойствия в постоянно меняющемся онлайн-мире.
Анимации на основе BLOB-объектов предназначены для современных проектов. Они осторожны, хотя, безусловно, привлекают внимание. Если вы выберете элегантное, плоское или экстравагантное 3D-творение, вы легко создадите спокойную атмосферу.
Это обогатит опыт, украсит фон, и в то же время уступит место контенту. Эти фоны помогут сохранить баланс между визуальными и текстовыми данными.
