Анимация появления в обложке
Анимация в обложке оживит первый экран, придаст ему выразительность и создаст первое впечатление от страницы
КАКИЕ ВИДЫ АНИМАЦИИ БЫВАЮТ:
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
Subtitle — Fade in
Duration — 1 sec.
Delay — 0,1 sec.
Title — Fade in Up.
Distance —100 px,
Duration — 1 sec.
Subtitle — Fade in Up
Duration — 1 sec.
Distance — 30 px
Delay — 0.1 sec.
Title — Fade In
Duration — 2 sec.
Button 1 — Fade in Up
Duration — 1 sec.
Distance — 30 px
Delay — 0.7 sec.
Button 2 — Fade in Up
Duration — 1 sec.
Distance — 30 px
Delay — 0.8 sec.
Feel yourself at home
A coffee & food corner at a city centre.
Wineer 12A str., Minereed
Our menu
Our contacts
A new pizza place in the city
Wineer str., 12A, Minereed
Logo — Zoom In
Duration — 1 sec.
Scale — 90%
Title — Fade in Up
Duration — 4 sec.
Distance — 100 px
Subtitle — 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
Subtitle — Fade in Up.
Duration — 0,9 sec.
Distance — 100px
Delay — 0.2
Title — Fade in Up.
Duration — 1,1 sec.
Distance — 100 px
Button — Zoom in.
Duration — 0.9
Scale — 30%
Delay — 1.1 sec
I am a digital illustrator and animator. Check out my portfolio
Subtitle — Fade in Right
Duration — 1.4 sec.
Distance — 50 px
Delay — 0.5 sec.
Name — Fade in
Duration — 5 sec.
NOUVEAU
A New York clothes online store
Store
Subtitle — Fade in Up
Duration — 0.6 sec.
Distance — 50 px
Delay — 0.3 sec.
Title — Zoom In
Duration — 1 sec.
Scale — 30px
Button 1 — Fade in Up
Duration — 1.2 sec.
Distance — 50 px
Delay — 0.4 sec.
Handmade ceramics
SAMMO
We create handmade goodies with love
Title — Fade in Down.
Duration — 1.5 sec.
Distance — 150 px
Delay — 0.6 sec.
Logo — Fade in.
Duration — 1.7 sec.
Subtitle — Fade in.
Duration — 1.4 sec.
Delay — 1 sec.
homearea
TRAVEL TOGETHER ON EARTH
About project
Button — Fade in Up
Duration — 1sec.
Distance — 30 px
Delay — 0,6 ec.
Logo — Fade In
Duration — 1.5
Title — Fade in up.
Duration — 1.5
Distance — 100 px
Delay — 0.3
Yoga traditions, new methods
Prices
Adress
About us
Take class
Contacts
Title — Fade in Left
Duration — 1.3 sec.
Distance — 150 px
Take class — Fade in
Duration — 1.7 sec.
Delay — 1 sec.
Contacts button — Fade in
Distance — 100 px
Duration — 1.4 sec.
Never
Prices
Adress
About us
stop
improving
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.
HEBERT
Biography
Personas
Timeline
INTERVIEW
JULIEN
1. JULIEN — Fade in Left
Duration — 1 sec.
Distance — 100 px
5. Arrow Down — 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. Social networks — 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. Logo, menu, burger — Fade in Left
Duration — 1 sec.
Distance — 100 px
Delay 1.7–1,9sec.
All interviews
ВИДЕО УРОК
Как повторить анимацию в редакторе Тильды