Привет! Каждый месяц мы публикуем 10 разнообразных интересных решений со всего мира на no-code-инструментах и немного рассказываем, как реализованы некоторые из них. В этот раз мы собрали подборку сайтов на конструкторе Webflow, чтобы продемонстрировать возможности платформы. Поехали.
by Relume Studio. Сидней, Австралия
https://launchpad-relume.webflow.io
Решения:
— Анимация логотипа при загрузке страницы. Чтобы реализовать такую анимацию, нужно перекрыть весь экран контентом, загрузить подготовленную заранее анимацию логотипа и настроить тайминги скрытия контента. Всё это реализуется при помощи инструмента Page load в Webflow.
— Параллакс элементов дизайна из интерфейса. Реализован анимацией при скролле (инструмент Page scroll).
— Новостной блог подключён при помощи CMS инструмента Webflow. С его помощью можно создать как отдельные карточки на главной, так и подключить внутренние страницы.
— Видео в лайтбоксе по клику с анимированной заставкой. Здесь по факту 2 видео: первое на заставке, а второе открывается по клику. Чтобы реализовать такой функционал, нужно залить само видео на Youtube или Vimeo, а обложку разместить на самом сайте. Не забывайте оптимизировать размер загружаемых видео.
by Not Another. Новая Зеландия
https://www.peopleandproperty.co.nz
Решения:
— Видеоотзывы с YouTube. Нужно лишь создать канал на YouTube, куда можно выгружать реальные отзывы и показывать их на сайте.
— Страница недвижимости и мини-карточки. заводятся через CMS со множеством разнообразного контента (заголовок, теги, фотогалерея, описание, контакты, карта).
— Фильтры с выпадающими списками и поиск по недвижимости. Здесь сложнее. Чтобы реализовать фильтры по карточкам из CMS — нужно подключить кастомный код. Но ребята из Finsweet уже нашли готовые решения, остаётся только скопировать и применить.
by Danfosterdesign. Лондон, Великобритания
https://www.sessionmysteries.com
Решения:
— Необычное оформление отзывов и возможность перетаскивать карточки по экрану. Сами отзывы – это загруженные изображения, а функционал перетаскивания реализован с помощью low-code подключения скрипта {draggable} к элементу.
by Founded. Великобритания
Решения:
— Параллакс-эффекты при скролле страницы. Реализовано инструментами анимации Page scroll.
— Появление спрятанного меню реализовано анимацией по клику на элемент. Само меню зафиксировано по скроллу и спрятано за пределами экрана.
by Joseph Berry. Лондон, Великобритания
https://veri-stable.webflow.io
Решения:
— Интересная анимация загрузки страницы. Реализуется с помощью инструмента Page loader.
— Подложка хедера с эффектом матового стекла. Так можно сделать c помощью настроек прозрачности элемента и применения low-code. Нужно в настройках страницы задать CSS-стиль самой подложке {backdrop-filter: blur(10px)}.
by Parabolae, Бейрут, Ливан
Решения:
— Во втором блоке по скроллу заполняется круговая диаграмма.
by Parabolae, Бейрут, Ливан
Решения:
— Необычная анимация сферы на фоне — очень трудоёмкая работа. Сама сфера состоит из десятков элементов, которые подвергаются движению и перекрашиванию обводки по заданному таймингу. В итоге мы получаем псевдо-3D-эффект, да ещё и анимированный.
by Okalpha, Кейптаун, ЮАР
Решения:
— Интересное решение блока с командой. При наведении на карточке пропадают фигуры. Это реализовано самой простой анимацией, при которой одна фотография меняется на другую.
by JP, Сан-Франциско, США
https://timeframe-app.webflow.io
Решения:
— Весь сайт содержит составную анимацию по скроллу. Это очень сложная, достойная и кропотливая работа.
by Joseph Berry. Лондон, Великобритания
https://ujet-wip-2020.webflow.io
Решения:
— Блок с наградами в футере сделан простой зацикленной анимацией движения без привязки к скроллу. Отличное решение, если нужно разместить большое количество логотипов в блоке.
Оставить комментарий и обсудить статью можно на vc.ru
