Animacja na okładce

Animacja na okładce ożywia pierwszy ekran, nadając mu charakterystyczny wygląd i sprawiając, że strona robi pierwsze wrażenie

RODZAJE ANIMACJI:

Zanikanie

Element pojawia się z przezroczystości

Zanikanie w górę

Zanik w lewo

Zanik w prawo

Powiększenie

Element pojawia się przez przezroczystość od dołu

Element pojawia się przez przezroczystość z prawej strony

Element pojawia się przez przezroczystość z lewej strony

Element pojawia się stopniowo poprzez powiększanie

Element pojawia się przez przezroczystość z góry

Zanikanie w dół

PRZYKŁADY ANIMACJI

Najpopularniejsze animacje okładki to nagłówek, podnagłówek i przyciski

Lepsza ścieżka dla Twojej firmy

Dostarczamy technologie nowej generacji
dla firm i startupów

Podtytuł - Fade in Up
Czas trwania - 1 sek.
Opóźnienie - 0,1 sek.

Nagłówek - Zanikanie w górę
Odległość - 100px
Czas trwania - 1 sek.

Podtytuł - Zanikanie w górę
Czas trwania - 1 sek.
Odległość - 30px
Opóźnienie - 0,1 sek.

Nagłówek - Fade in
Czas trwania - 2 sek.

Przycisk 1 - Zanik w górę
Czas trwania - 1 sek.
Odległość - 30px
Opóźnienie - 0,7 sek.

Przycisk 2 - Zanik w górę
Czas trwania - 1 sek.
Odległość - 30px
Opóźnienie - 0,8 sek.

Poczujesz się jak w domu

Kącik z kawą i jedzeniem w centrum miasta.
1423 Hamilton Ave, Cleveland

Nasze menu

Nasze kontakty

Nowa pizzeria w mieście

1423 Hamilton Ave, Cleveland

Logo - Powiększenie
Czas trwania - 1 sek.
Skala - 90%

Nagłówek - Zanikanie w górę
Czas trwania - 4 s
Odległość - 100px

Podtytuł - Zanikanie w górę
Czas trwania - 1 sek.
Odległość - 50px
Opóźnienie - 0,3 sek.

Tworzenie nowej strony internetowej

Wypróbuj animację na okładce, aby stworzyć coś wyjątkowego

Start

Podtytuł - Zanikanie w górę
Czas trwania - 0,9 s
Odległość - 100px
Opóźnienie - 0,2 s

Nagłówek - Zanikanie w górę
Czas trwania - 1,1 s
Odległość - 100px

Przycisk - Powiększenie
Czas trwania - 0,9
Skala - 30%
Opóźnienie - 1,1 sek.

Jestem cyfrowym ilustratorem i motion designerem. Sprawdź moje portfolio

Podtytuł - Zanikanie w prawo
Czas trwania - 1,4 s
Odległość - 50px
Opóźnienie - 0,5 s

Nazwa - Fade in
Czas trwania - 5 sek.

NOUVEAU

Internetowy sklep odzieżowy NYC

Sklep internetowy

Podtytuł - Zanikanie w górę
Czas trwania - 0,6 s
Odległość - 50px
Opóźnienie - 0,3 s

Nagłówek - Powiększenie
Czas trwania - 1 sek.
Skala - 30px

Przycisk 1 - Zanik w górę
Czas trwania - 1,2 sek.
Odległość - 50px
Opóźnienie - 0,4 sek.

Ręcznie robiona ceramika

SAMMO

Tworzymy ręcznie robioną zastawę stołową z miłością

Nagłówek - Zanikanie w dół
Czas trwania - 1,5 s
Odległość - 150px
Opóźnienie - 0,6 s

Logo - Fade in
Czas trwania - 1,7 sek.

Podtytuł - Fade in
Czas trwania - 1,4 s
Opóźnienie - 1 s

homearea

PODRÓŻOWAĆ RAZEM PO ZIEMI

O projekcie

Przycisk - Fade in Up
Czas trwania - 1 sek.
Odległość - 30px
Opóźnienie - 0,6 sek.

Logo - Fade in
Czas trwania - 1,5 sek.

Nagłówek - Zanikanie w górę
Czas trwania - 1,5 s
Odległość - 100px
Opóźnienie - 0,3 s

Tradycje jogi, nowe metody

Ceny

Adres

O nas

Weź udział w zajęciach

Kontakty

Title - Fade in Left
Duration - 1.3 sec
Distance - 150px

Przycisk "Weź udział w zajęciach" - Zanikanie
Czas trwania - 1,7 s
Opóźnienie - 1 s

Przycisk "Kontakty" - Zanikanie
Odległość - 100px
Czas trwania - 1,4 sek.

Nigdy

Ceny

Adres

O nas

stop

poprawa

rzeczy

EXPLORE CASE

"Nigdy" - Zanikanie w prawo
Czas trwania - 1 sek.
Odległość - 100px
Opóźnienie - 0 sek.

"Explore case" - Fade in
Czas trwania - 1,6 sek.
Opóźnienie - 0,6 sek.

"Stop" - Zanikanie w prawo
Czas trwania - 1 sek.
Odległość - 100px
Opóźnienie - 0,2 sek.

"Improving" - Fade in Right
Czas trwania - 1 sek.
Odległość - 100 px
Opóźnienie - 0,2 sek.

"Things" - Fade in Right
Czas trwania - 1,6 sek.
Odległość - 100px
Opóźnienie - 0,4 sek.

HEBERT

Biografia

Personas

Oś czasu

WYWIAD

JULIEN

JULIEN - Fade in Left
Czas trwania - 1 sek.
Odległość - 100px

Strzałka w dół - Zanikanie w dół
Czas trwania - 0,5 s
Odległość - 100px
Opóźnienie - 1,4 s

HEBERT - Fade in Left
Czas trwania - 1 sek.
Odległość - 100px
Opóźnienie - 0,1 sek.

Interview- Fade in Left
Czas trwania - 0,5 sek.
Odległość - 100px
Opóźnienie - 1 sek.

Ikony mediów społecznościowych - Zanikanie w dół
Czas trwania - 0,5 s
Odległość - 100px
Opóźnienie - 1,2 s

Wszystkie wywiady - Zanikanie w dół
Czas trwania - 0,5 s
Odległość - 100px
Opóźnienie - 1,4 s

Logo, pozycje menu, menu hamburgera - Zanikanie w lewo
Czas trwania - 1 sek.
Odległość - 100px
Opóźnienie - 1,7-1,9 sek.

Wszystkie wywiady

FILM INSTRUKTAŻOWY

Jak odtworzyć ten efekt animacji w edytorze Tilda?