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