Как сделать эффект разлетающихся карточек
Сложность
Карточки
Desktop
Скролл
Mobile
Такой приём можно использовать там, где необходимо захватить внимание пользователя — на обложку, в портфилио, в блоке с вдохновляющей фразой и в других.

  1. Добавьте на страницу Zero Block, разместите фотографии в месте старта анимации.
2. Выделите правый элемент и установите значение 30 в параметре Rotate. Выделите левый элемент, установите для него значение Rotate 330.
3. Выберите правое изображение и перейдите в раздел Step-by-step animation.

В параметре Event выберите значение On scroll, в параметре Start Trigger – Window Center

Добавьте один шаг анимации и установите значения: Distance 300, Move X 200, Move Y 200, Rotate -30.
3. Выберите левое изображение и повторите шаги. Только в параметре Move X установите значение -200, в Rotate — значение 30.
4. Опубликуйте страницу и наслаждайтесь эффектом
Другие статьи HOW-TO
Меню с горизонтальной прокруткой
О1
Большое количество пунктов меню
на сайте может смотреться громоздко в мобильной версии …
Читать
Сложность
14.01.2021
Меню
Скролл
ZeroBlock
Mobile
Горизонтальный скролл карточек
О2
Один или несколько блоков с горизонтальным скроллом смотрятся нестандартно и привлекают …
Читать
Сложность
14.01.2021
Меню
Скролл
ZeroBlock
Mobile
Смена цвета фона
при скролле
О3
Изменение цвета фона через фигуру — эффектный приём для создания динамичной страницы на сайте ...
Читать
Сложность
14.01.2021
Меню
Скролл
ZeroBlock
Mobile
Больше полезных дизайн-советов,
а также обновления платформы ищите
в наших социальных сетях.
Подписывайтесь, чтобы ничего не пропустить
Made on
Tilda