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

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

Привет! Каждый месяц мы публикуем 10 разнообразных интересных решений со всего мира на no-code-инструментах и немного рассказываем, как реализованы некоторые из них. В этот раз мы собрали подборку сайтов на конструкторе Webflow, чтобы продемонстрировать возможности платформы. Поехали.

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

№ 1. Launchpad — удобные процессы производства оборудования

by Relume Studio. Сидней, Австралия

Решения:

— Анимация логотипа при загрузке страницы. Чтобы реализовать такую анимацию, нужно перекрыть весь экран контентом, загрузить подготовленную заранее анимацию логотипа и настроить тайминги скрытия контента. Всё это реализуется при помощи инструмента Page load в Webflow.

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

— Новостной блог подключён при помощи CMS инструмента Webflow. С его помощью можно создать как отдельные карточки на главной, так и подключить внутренние страницы.

— Видео в лайтбоксе по клику с анимированной заставкой. Здесь по факту 2 видео: первое на заставке, а второе открывается по клику. Чтобы реализовать такой функционал, нужно залить само видео на Youtube или Vimeo, а обложку разместить на самом сайте. Не забывайте оптимизировать размер загружаемых видео.

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

№ 2. People & Property — агентство недвижимости

by Not Another. Новая Зеландия

Решения:

— Видеоотзывы с YouTube. Нужно лишь создать канал на YouTube, куда можно выгружать реальные отзывы и показывать их на сайте.

— Страница недвижимости и мини-карточки. заводятся через CMS со множеством разнообразного контента (заголовок, теги, фотогалерея, описание, контакты, карта).

— Фильтры с выпадающими списками и поиск по недвижимости. Здесь сложнее. Чтобы реализовать фильтры по карточкам из CMS — нужно подключить кастомный код. Но ребята из Finsweet уже нашли готовые решения, остаётся только скопировать и применить.

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

№ 3. Sessionmysteries — корпоративные квесты и мероприятия

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

Решения:

— Необычное оформление отзывов и возможность перетаскивать карточки по экрану. Сами отзывы – это загруженные изображения, а функционал перетаскивания реализован с помощью low-code подключения скрипта {draggable} к элементу.

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

№ 4. Deadgood — дизайнерская мебель

by Founded. Великобритания

Решения:

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

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

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

№ 5. Veri — система трекинга уровня глюкозы

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

Решения:

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

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

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

№ 6. Regencor — развитие регенеративной медицины

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

Решения:

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

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

№ 7. NODES — развитие и продвижение науки о жизни

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

Решения:

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

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

№ 8. Okalpha — студия моушн-анимации

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

Решения:

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

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

№ 9. Timeframe — сайт-презентация приложения

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

Решения:

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

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

№ 10. UJET — производство электрических скутеров в Люксембурге

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

Решения:

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

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

Дайджест Zero-code #0 – Октябрь
1818
3 комментария

Я, конечно, понимаю, что кинетическая типографика — массовый приём и каждый второй использует круговое расположение слов. Но, блин — https://jvetrau.com/digest-2019-mar/ — можно ж было не так в лоб для той же темы дайджестов :)

1
Ответить

Юра, привет. Не думаю, что ребята клонировали) Но вышло забавно)

Ответить