АНИМАЦИЯ ПОЯВЛЕНИЯ В ОБЛОЖКЕ
Анимация в обложке оживит первый экран, придаст ему выразительность и создаст первое впечатление от страницы
КАКИЕ ВИДЫ АНИМАЦИИ БЫВАЮТ:
Fade in
Появление элемента из прозрачности
Fade in Up
Fade in Left
Fade in Right
Zoom In
Появление элемента через прозрачность снизу
Появление элемента через прозрачность слева
Появление элемента через прозрачность справа
Появление элемента через увеличение
Появление элемента через прозрачность сверху
Fade in Down
ПРИМЕРЫ АНИМАЦИИ
Чаще всего на обложках анимируют заголовок, подзаголовок и кнопки
Better way for your business
We provide new technologies for companies and startups
Подзаголовок — Fade in
Duration 1 sec.
Delay Задержка 0,1 sec.
Заголовок — Fade in Up.
Distance Дистанция100 px, Duration Длительность 1 sec.
Feel yourself at home
A coffee & food corner at a city centre.
Wineer 12A str., Minereed
Our menu
Our contacts
Подзаголовок — Fade in Up
Duration Длительность 1 sec.
Distance Дистанция 30 px
Delay Задержка 0.1 sec.
Заголовок — Fade In
Duration Длительность 2 sec.
Кнопка 1 — Fade in Up
Duration Длительность 1 sec.
Distance Дистанция 30 px
Delay Задержка 0.7 sec.
Кнопка 2 — Fade in Up
Duration Длительность 1 sec.
Distance Дистанция 30 px
Delay Задержка 0.8 sec.
A new pizza place in the city
Wineer str., 12A, Minereed
Логотип — Zoom In
Duration Длительность 1 sec.
Scale Масштаб 90%
Заголовок — Fade in Up
Duration Длительность 4 sec.
Distance Дистанция 100 px
Подзаголовок — Fade in Up
Duration Длительность 1 sec.
Distance Дистанция50 px
Delay Задержка 0.3 sec.
Create your new site
Try animation on cover to create something very special
Start
Подзаголовок — Fade in Up.
Duration Длительность 0,9 sec. Дистанция Distance 100px
Delay Задержка 0.2
Заголовок — Fade in Up.
Duration Длительность 1,1 sec.
Дистанция Distance100 px
Кнопка—Zoom in.
Duration Дительность 0.9
Scale Масштаб 30%
Delay Задержка 1.1 sec
I am a digital illustrator and animator. Check out my portfolio
Подзаголовок — Fade in Right.
Duration Длительность - 1.4 sec.
Distance Дистанция - 50 px
Delay Задержка - 0.5 sec.
Имя — Fade in.
Duration Длительность - 5 sec.
NOUVEAU
A New York clothes online store
Store
Подзаголовок — F ade in Up
Duration Длительность 0.6 sec.
Distance Дистанция 50 px
Delay Задержка 0.3 sec.
Заголовок — Zoom In
Duration Длительность 1 sec.
Scale Масштаб 30px
Кнопка 1 — Fade in Up
Duration Длительность 1.2 sec.
Distance Дистанция 50 px
Delay Задержка 0.4 sec.
Handmade ceramics
SAMMO
We create handmade goodies with love
Заголовок — Fade in Down.
Duration Длительность1.5 sec. Distance Дистанция 150 px
Delay Задержка 0.6 sec.
Логотип — Fade in.
Длительность Duration 1.7 sec.
Подзаголовок — Fade in. Duration Дистанция 1.4 sec.
Delay Задержка 1 sec.
homearea
TRAVEL TOGETHER ON EARTH
About project
Кнопка — Fade in Up
Длительность Duration 1sec.
Дистанция Distance 30 px
Задержка Delay 0,6 sec.
Логотип — Fade In
Duration Длительность1.5
Заголовок — Fade in up.
Duration Длительность 1.5
Distance Дистанция 100 px
Delay Задержка 0.3
Prices
Adress
About us
Take class
Yoga traditions, new methods
Contacts
Заголовок — Fade in Left
Duration Длительность 1.3 sec.
Distance Дистанция 150 px
Кнопка Take class — Fade in
Duration Длительность 1.7 sec.
Delay Задержка 1 sec.
Кнопка Contacts — Fade in
Дистанция Distance 100 px
Длительность Duration 1.4 sec.
Prices
Adress
About us
Never
improving
stop
things
VIEW CASE
"Never" — Fade in Right
Длительность Duration 1 sec.
Дистанция Distance 100 px
Задержка Delay 0 sec.
"View case" — Fade in
Длительность Duration 1.6 sec.
Задержка Delay 0.6 sec.
"Stop" — Fade in Right
Длительность Duration 1 sec.
Дистанция Distance 100 px
Задержка Delay 0.2 sec.
"Improving" — Fade in Right
Длительность Duration 1 sec.
Дистанция Distance 100 px
Задержка Delay 0.2 sec.
"Things" — Fade in Right
Длительность Duration 1.6 sec.
Дистанция Distance 100 px
Задержка Delay 0.4 sec.
Biography
Personas
HEBERT
INTERVIEW
Timeline
JULIEN
1. JULIEN — Fade in Left
Длительность Duration 1 sec.
Дистанция Distance 100 px
5. Стрелка вниз — Fade in down
Длительность Duration 0.5 sec.
Distance Дистанция 100 px
Задержка Delay 1.4 sec.
2. HEBERT — Fade in Left
Длительность Duration 1 sec.
Дистанция Distance 100 px
Задержка Delay 0.1 sec.
3. "Interview"— Fade in Left
Длительность Duration 0.5 sec.
Дистанция Distance 100 px
Задержка Delay 1 sec.
4. Соцсети — Fade in Down
Длительность Duration 0.5 sec.
Дистанция Distance 100 px
Задержка Delay 1.2 sec.
6. "All interviews" — Fade in Down
Длительность Duration 0.5 sec.
Distance Дистанция 100 px
Задержка Delay 1.4 sec.
7. Логотип, меню, бургер — Fade in Left
Длительность Duration 1 sec.
Distance Дистанция 100 px
Задержка Delay 1.7–1,9sec.
All interviews
ВИДЕО УРОК
Как повторить анимацию в редакторе Тильды