Дайджест Zero-code #0 – Октябрь

Привет! Каждый месяц мы публикуем 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. Великобритания

https://www.deadgoodltd.co.uk

Решения:

— Параллакс-эффекты при скролле страницы. Реализовано инструментами анимации Page scroll.

— Появление спрятанного меню реализовано анимацией по клику на элемент. Само меню зафиксировано по скроллу и спрятано за пределами экрана.

by Joseph Berry. Лондон, Великобритания

https://veri-stable.webflow.io

Решения:

— Интересная анимация загрузки страницы. Реализуется с помощью инструмента Page loader.

— Подложка хедера с эффектом матового стекла. Так можно сделать c помощью настроек прозрачности элемента и применения low-code. Нужно в настройках страницы задать CSS-стиль самой подложке {backdrop-filter: blur(10px)}.

by Parabolae, Бейрут, Ливан

https://www.regencor.com

Решения:

— Во втором блоке по скроллу заполняется круговая диаграмма.

by Parabolae, Бейрут, Ливан

https://www.nodesadvisors.com

Решения:

— Необычная анимация сферы на фоне — очень трудоёмкая работа. Сама сфера состоит из десятков элементов, которые подвергаются движению и перекрашиванию обводки по заданному таймингу. В итоге мы получаем псевдо-3D-эффект, да ещё и анимированный.

by Okalpha, Кейптаун, ЮАР

https://www.okalpha.co

Решения:

— Интересное решение блока с командой. При наведении на карточке пропадают фигуры. Это реализовано самой простой анимацией, при которой одна фотография меняется на другую.

by JP, Сан-Франциско, США

https://timeframe-app.webflow.io

Решения:

— Весь сайт содержит составную анимацию по скроллу. Это очень сложная, достойная и кропотливая работа.

by Joseph Berry. Лондон, Великобритания

https://ujet-wip-2020.webflow.io

Решения:

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

Пока всё )) Хотели бы вы увидеть более подробные разборы по каждому кейсу? Напишите ответ в комментариях, подписывайтесь и следите за интересными новостями от Subzero

#suzero_digest #zerocode #lowcode #nocode #everest #ui