ru24.pro
«Фрилансим»
Декабрь
2024
1 2 3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

Сверстать лендинг из Figma в Webflow

0

Сверстать лендинг в вебфлоу. Макеты подготовлены так чтобы легко было переносить через плагин Webflow.

Десктоп

https://www.figma.com/proto/jNmI8u6398P1hEXinFII9a/Avenue?page-id=91%3A18839&node-id=91-18840&node-type=frame&viewport=656%2C-1903%2C1&t=KiNfAo9ZDuGj9tmP-1&scaling=min-zoom&content-scaling=fixed&starting-point-node-id=91%3A18840

Мобилка

https://www.figma.com/proto/jNmI8u6398P1hEXinFII9a/Avenue?page-id=0%3A1&node-id=12-1010&node-type=frame&viewport=363%2C413%2C0.13&t=vMZQrifnl0GYqoq3-1&scaling=scale-down&content-scaling=fixed&starting-point-node-id=12%3A1010&show-proto-sidebar=1 (мобилка длинная, надо кликнуть на первый экран просто)

Из эффектов

1. Моушен эффекты элементов в первом экране по загрузке (Page load) (подъезд заголовков, появление блоков и так далее)

2. Scroll into view на блоки где баннеры, ховер эффект у баннеров

3. Простой паралакс по одной оси, можно увидеть на десктопе наведя влево и вправо на этом блоке https://prnt.sc/w17dx58Vjow_

4. В первом экране сделать замену циклическую аватаров пользователей https://prnt.sc/v4DC3_PgPeDL (то есть чтобы в каждом слоте показалось автара 3 сменяясь по кругу, аватары меняются не все разом одновременно, а частями, чтобы создавалось приятная динамика)

5. Ползунок должен скрывать и раскрывать верхнюю фотку https://prnt.sc/m33vuqctgIK2 чтобы был эффект без фильтра и с фильтром.

6. Минимальные ховер эффекты на другие блоки, думаю тоже scroll into view (подъезд снизу из прозрачности)

7. Эти линии сделать прорисовку под скроллинг https://prnt.sc/jwLoz0B94mU7 , такой же есть в футере. На вебфлоуе частый такой эффект, есть много готовых решений.

8. на планшете-мобилке зацикленная по кругу анимация аватаров https://prnt.sc/_SLK3yYo6d1G (линеар движение по круговой оси аватаров, какого-то количество может шт 20)

Жду примеры именно на вебфлоу и если не автоответ 4240