Twój tytuł jest jedną z najważniejszych części Twojej strony głównej. Zwykle jest to to, co widzisz jako pierwsze, a zatem to, co decyduje o pierwszym wrażeniu. Jak każde inne pierwsze wrażenie, chcesz, żeby było dobre. Teraz, jeśli szukasz kreatywnego sposobu na zaprezentowanie swojego tytułu, spodoba ci się ten samouczek, ponieważ pokażemy Ci, jak dodać animacje bloków tekstu CSS do swojego tytułu, a także możesz bezpłatnie pobrać plik JSON układu!
badanie
Zanim przejdziemy do samouczka, przyjrzyjmy się wynikom na różnych rozmiarach ekranu.
Zacznijmy projekt
Dodaj sekcję # 1
Tło gradientowe
Zacznij od dodania zwykłej sekcji do nowej strony lub strony, nad którą pracujesz. Otwórz ustawienia sekcji i zastosuj następujące tło gradientowe:
- Kolor 1: # f0f2b
- Kolor 2: # c10b1a
- Rodzaj gradientu: liniowy
- Kierunek gradientu: 63 stopni
rozstaw
Przejdź do zakładki projektowania sekcji i zastosuj następujące niestandardowe wartości górnego i dolnego wypełnienia na różnych rozmiarach ekranu:
- Górna wyściółka: 7vw (komputer stacjonarny), 20vw (tablet), 25vw (telefon)
- Wyściółka u dołu: 7vw (biurko), 20vw (tablet), 25vw (telefon)
granica
Dodaj także granicę do sekcji.
- Szerokość obramowania: 2 vw (góra, lewo, prawo)
- Szerokość dolnej krawędzi: 0vw
- Kolor obramowania: #ffffff
Dodaj nową linię
Struktura kolumny
Kontynuuj dodawanie nowego wiersza do sekcji przy użyciu następującej struktury kolumn:
zaklejania
Otwórz parametry linii i odpowiednio zmodyfikuj parametry wymiarowania:
- Szerokość: 100%
- Maksymalna szerokość: 100%
Dodaj moduł tekstowy do kolumny
Dodaj zawartość H1
Następnie dodaj moduł tekstowy z wybranym tytułem H1.
Dodaj tagi Div do każdego słowa w tytule H1
Przejdź do zakładki tekstowej kopii tytułowej i dodaj inny element div do każdego słowa w tytule. Identyfikator CSS musi być inny dla każdego słowa.
Gotowy
w
Budować
Piękny
Witryny internetowe?
Ustawienia tekstu H1
Przejdź do zakładki projektowania modułu i odpowiednio zmień ustawienia tekstu H1:
- Czcionka tytułu: Work Sans
- Waga czcionki tytułu: średnia
- Kolor tekstu nagłówka: #ffffff
- Rozmiar tekstu nagłówka: 4vw (komputer stacjonarny), 5vw (tablet), 6vw (telefon)
- Wysokość linii głowy: 1,4 em
rozstaw
Następnie zmień wartości marginesów na różnych rozmiarach ekranu.
- Lewy margines: 20 vw (biurko i tablet), 15 vw (telefon)
- Prawy margines: 35vw (komputer stacjonarny), 20vw (tablet), 15vw (telefon)
Dodaj moduł kodu do kolumny
Wstaw kod CSS
Aby animacja bloku tekstu miała zastosowanie do naszego tytułu, będziemy potrzebować trochę kodu CSS. Dodamy ten kod CSS do nowego modułu kodu.
<style> .display-state {display: inline !important;} #word-1 {-webkit-animation: slide-right 0.5s linear 0.3s both;animation: slide-right 0.5s linear 0.3s both;} #word-2 {-webkit-animation: slide-right 0.5s linear 0.6s both;animation: slide-right 0.5s linear 0.6s both;} #word-3 {-webkit-animation: slide-right 0.5s linear 0.9s both;animation: slide-right 0.5s linear 0.9s both;} #word-4 {-webkit-animation: slide-right 0.5s linear 1.2s both;animation: slide-right 0.5s linear 1.2s both;}#word-5 {-webkit-animation: slide-right 0.5s linear 1.5s both;animation: slide-right 0.5s linear 1.5s both;} @-webkit-keyframes slide-right {0% {background-color: #000;opacity: 0.5;color: transparent;} 1% {opacity: 1;}} </style>
rozstaw
Przejdź do zakładki projektowania modułu i usuń wszystkie domyślne dolne wypełnienie.
- Dolny margines: 0px
Dodaj moduł przycisku do kolumny
Dodaj kopię
Następny potrzebny nam moduł to moduł przycisków. Wprowadź wybraną kopię.
Ustawienia przycisków
Przejdź do zakładki projektowania modułu i odpowiednio zmień ustawienia przycisków:
- Użyj niestandardowych stylów przycisku: Tak
- Rozmiar tekstu przycisku: 1vw (komputer stacjonarny), 2vw (tablet), 3vw (telefon)
- Kolor tekstu przycisku: #ffffff
- Kolor tła przycisku: # 000000
- Szerokość obramowania przycisku: 0px
- Czcionka przycisku: Work Sans
rozstaw
Następnie przejdź do ustawień odstępów i zastosuj niestandardowe wartości marginesów i wypełnienia na różnych rozmiarach ekranu.
- Górny margines: 3vw (biuro),
- Lewy margines: 20 vw (biurko i tablet), 15 vw (telefon)
- Górna wyściółka: 1.2vw (komputer stacjonarny), 2vw (tablet), 4vw (telefon)
- Wyściółka u dołu: 1.2vw (biurko), 2vw (tablet), 4vw (telefon)
- Lewe wypełnienie: 1.8vw (komputer stacjonarny), 3vw (tablet), 6vw (telefon)
- Prawa wyściółka: 1.8vw (biurko), 3vw (tablet), 6vw (telefon)
Animacja
Dostosuj również ustawienia animacji.
- Styl animacji: Flip
- Kierunek animacji: w dół
- Opóźnienie animacji: 2000 ms
- Intensywność animacji: 100%
- Krycie początku animacji: 100%
- Krzywa szybkości animacji: łatwość wprowadzania
- Powtarzanie animacji: raz
Dodaj sekcję # 2
Kontynuuj, dodając nową zwykłą sekcję tuż pod poprzednią.
rozstaw
Otwórz ustawienia sekcji i usuń domyślne górne wypełnienie.
- Górna wyściółka: 0px
Dodaj nową linię
Struktura kolumny
Kontynuuj dodawanie nowego wiersza, korzystając z następującej struktury kolumn:
zaklejania
Bez dodawania kolejnych modułów otwórz parametry linii i pozwól linii zajmować całą szerokość kontenera sekcji.
- Szerokość: 100%
- Maksymalna szerokość: 100%
Dodaj moduł tekstowy do kolumny
Dodaj treść
Następnie dodaj moduł tekstowy z a treść wybrany przez Ciebie opis.
Kolor tła
Dodaj biały kolor tła.
- Kolor tła: #ffffff
Ustawienia tekstu
Przejdź do zakładki projektowania modułu i odpowiednio zmień ustawienia tekstu:
- Czcionka tekstu: Work Sans
- Kolor tekstu: # 9b9b9b
- Rozmiar tekstu: 1vw (komputer stacjonarny), 2vw (tablet), 3vw (telefon)
- Wysokość linii tekstu: 2.6em
rozstaw
Dodaj również niestandardowe wartości odstępów na różnych rozmiarach ekranu.
- Górny margines: -5vw (komputer stacjonarny), -20vw (tablet), -27vw (telefon)
- Lewy margines: 20vw (biurko), 13vw (tablet), 8vw (telefon)
- Prawy margines: 20vw (komputer stacjonarny), 13vw (tablet), 8vw (telefon)
- Górna wyściółka: 5vw (komputer stacjonarny), 7vw (tablet i telefon)
- Wyściółka u dołu: 5vw (biurko), 7vw (tablet i telefon)
- Lewe wypełnienie: 3vw (komputer stacjonarny), 5vw (tablet), 6vw (telefon)
- Prawa wyściółka: 3vw (biurko), 5vw (tablet), 6vw (telefon)
Pole cienia
Uzupełnij ustawienia modułu, stosując subtelny cień pola. Otóż to!
- Pole Shadow Blur Strength: 50px
- Kolor cienia: rgba (0,0,0,0,1)
badanie
Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznie, jak wygląda na różnych rozmiarach ekranu.
końcowe przemyślenia
W tym artykule pokazaliśmy, jak dodać animacje bloków tekstu CSS do tytułu. Ważne jest, aby upewnić się, że tytuł jest widoczny i czytany od samego początku, dodanie animacji do tytułu zdecydowanie może pomóc! Udało Ci się również pobrać bezpłatnie plik JSON układu. Jeśli masz jakieś pytania lub sugestie, możesz zostawić komentarz w sekcji komentarzy poniżej.
Tłumaczenie z: ElegantThemes
