Привет! Каждый месяц мы публикуем 10 разнообразных интересных решений со всего мира на no-code-инструментах и немного рассказываем, как реализованы некоторые из них. В этот раз мы собрали подборку сайтов на конструкторе Webflow, чтобы продемонстрировать возможности платформы. Поехали.
№ 1. Launchpad — удобные процессы производства оборудования
by Relume Studio. Сидней, Австралия
Решения:
— Анимация логотипа при загрузке страницы. Чтобы реализовать такую анимацию, нужно перекрыть весь экран контентом, загрузить подготовленную заранее анимацию логотипа и настроить тайминги скрытия контента. Всё это реализуется при помощи инструмента Page load в Webflow.
— Параллакс элементов дизайна из интерфейса. Реализован анимацией при скролле (инструмент Page scroll).
— Новостной блог подключён при помощи CMS инструмента Webflow. С его помощью можно создать как отдельные карточки на главной, так и подключить внутренние страницы.
— Видео в лайтбоксе по клику с анимированной заставкой. Здесь по факту 2 видео: первое на заставке, а второе открывается по клику. Чтобы реализовать такой функционал, нужно залить само видео на Youtube или Vimeo, а обложку разместить на самом сайте. Не забывайте оптимизировать размер загружаемых видео.
№ 2. People & Property — агентство недвижимости
by Not Another. Новая Зеландия
Решения:
— Видеоотзывы с YouTube. Нужно лишь создать канал на YouTube, куда можно выгружать реальные отзывы и показывать их на сайте.
— Страница недвижимости и мини-карточки. заводятся через CMS со множеством разнообразного контента (заголовок, теги, фотогалерея, описание, контакты, карта).
— Фильтры с выпадающими списками и поиск по недвижимости. Здесь сложнее. Чтобы реализовать фильтры по карточкам из CMS — нужно подключить кастомный код. Но ребята из Finsweet уже нашли готовые решения, остаётся только скопировать и применить.
№ 3. Sessionmysteries — корпоративные квесты и мероприятия
by Danfosterdesign. Лондон, Великобритания
Решения:
— Необычное оформление отзывов и возможность перетаскивать карточки по экрану. Сами отзывы – это загруженные изображения, а функционал перетаскивания реализован с помощью low-code подключения скрипта {draggable} к элементу.
№ 4. Deadgood — дизайнерская мебель
by Founded. Великобритания
Решения:
— Параллакс-эффекты при скролле страницы. Реализовано инструментами анимации Page scroll.
— Появление спрятанного меню реализовано анимацией по клику на элемент. Само меню зафиксировано по скроллу и спрятано за пределами экрана.
№ 5. Veri — система трекинга уровня глюкозы
by Joseph Berry. Лондон, Великобритания
Решения:
— Интересная анимация загрузки страницы. Реализуется с помощью инструмента Page loader.
— Подложка хедера с эффектом матового стекла. Так можно сделать c помощью настроек прозрачности элемента и применения low-code. Нужно в настройках страницы задать CSS-стиль самой подложке {backdrop-filter: blur(10px)}.
№ 6. Regencor — развитие регенеративной медицины
by Parabolae, Бейрут, Ливан
Решения:
— Во втором блоке по скроллу заполняется круговая диаграмма.
№ 7. NODES — развитие и продвижение науки о жизни
by Parabolae, Бейрут, Ливан
Решения:
— Необычная анимация сферы на фоне — очень трудоёмкая работа. Сама сфера состоит из десятков элементов, которые подвергаются движению и перекрашиванию обводки по заданному таймингу. В итоге мы получаем псевдо-3D-эффект, да ещё и анимированный.
№ 8. Okalpha — студия моушн-анимации
by Okalpha, Кейптаун, ЮАР
Решения:
— Интересное решение блока с командой. При наведении на карточке пропадают фигуры. Это реализовано самой простой анимацией, при которой одна фотография меняется на другую.
№ 9. Timeframe — сайт-презентация приложения
by JP, Сан-Франциско, США
Решения:
— Весь сайт содержит составную анимацию по скроллу. Это очень сложная, достойная и кропотливая работа.
№ 10. UJET — производство электрических скутеров в Люксембурге
by Joseph Berry. Лондон, Великобритания
Решения:
— Блок с наградами в футере сделан простой зацикленной анимацией движения без привязки к скроллу. Отличное решение, если нужно разместить большое количество логотипов в блоке.
Пока всё )) Хотели бы вы увидеть более подробные разборы по каждому кейсу? Напишите ответ в комментариях, подписывайтесь и следите за интересными новостями от Subzero
Я, конечно, понимаю, что кинетическая типографика — массовый приём и каждый второй использует круговое расположение слов. Но, блин — https://jvetrau.com/digest-2019-mar/ — можно ж было не так в лоб для той же темы дайджестов :)
Юра, привет. Не думаю, что ребята клонировали) Но вышло забавно)
Значит самое время поискать другой подход, потому что дайджест уже три года в таком жанре выходит, а тут вышло уж сильно похоже и по идее, и по структуре :)