Uw titel is een van de belangrijkste onderdelen van uw startpagina. Dit is meestal wat u als eerste ziet, en dus wat de eerste indruk bepaalt. Net als elke andere eerste indruk, wilt u dat deze goed is. Als u nu op zoek bent naar een creatieve manier om uw titel te presenteren, zult u genieten van deze tutorial, omdat we u laten zien hoe u CSS-tekstblokanimaties aan uw titel kunt toevoegen en u kunt ook het JSON-lay-outbestand gratis downloaden!
overzicht
Laten we, voordat we in de tutorial duiken, het resultaat op verschillende schermformaten bekijken.
Laten we beginnen met het ontwerp
Voeg sectie # 1 toe
Achtergrond met kleurovergang
Begin met het toevoegen van een gewone sectie aan een nieuwe pagina of aan de pagina waaraan u werkt. Open de sectie-instellingen en pas de volgende verloopachtergrond toe:
- Kleur 1: # f0f2b
- Kleur 2: # c10b1a
- Gradient type: lineair
- Verlooprichting: 63 graden
tussenruimte
Schakel over naar het tabblad sectie-ontwerp en pas de volgende aangepaste vulwaarden voor boven en onder toe op verschillende schermformaten:
- Bovenste vulling: 7vw (desktop), 20vw (tablet), 25vw (telefoon)
- Vulling onderzijde: 7vw (bureau), 20vw (tablet), 25vw (telefoon)
grens
Voeg ook een rand toe aan de sectie.
- Randbreedte: 2vw (boven, links, rechts)
- Breedte onderrand: 0vw
- Randkleur: #ffffff
Voeg een nieuwe regel toe
Kolomstructuur
Ga door met het toevoegen van een nieuwe regel aan de sectie met behulp van de volgende kolomstructuur:
sizing
Open de lijnparameters en pas de dimensioneringsparameters dienovereenkomstig aan:
- Breedte: 100%
- Max breedte: 100%
Voeg een tekstmodule toe aan de kolom
Voeg H1-inhoud toe
Voeg vervolgens een tekstmodule toe met een H1-titel naar keuze.
Voeg Div-tags toe aan elk woord in de H1-titel
Schakel over naar het teksttabblad van uw titelkopie en voeg een andere div toe aan elk woord in uw titel. De CSS-ID moet voor elk woord anders zijn.
Klaar, gereed
Bij
Bouwen
Mooi
Websites?
H1 tekstinstellingen
Schakel over naar het tabblad moduleontwerp en wijzig de H1-tekstinstellingen dienovereenkomstig:
- Titellettertype: Work Sans
- Gewicht lettertype titel: gemiddeld
- Kleur koptekst: #ffffff
- Tekstgrootte koptekst: 4vw (desktop), 5vw (tablet), 6vw (telefoon)
- Hoofdlijnhoogte: 1,4 em
tussenruimte
Wijzig vervolgens de margewaarden op verschillende schermformaten.
- Linkermarge: 20vw (bureau en tablet), 15vw (telefoon)
- Rechter marge: 35vw (desktop), 20vw (tablet), 15vw (telefoon)
Voeg een codemodule toe aan de kolom
Voer CSS-code in
Om de tekstblokanimatie op onze titel toe te passen, hebben we wat CSS-code nodig. We zullen deze CSS-code toevoegen aan een nieuwe codemodule.
<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>
tussenruimte
Schakel over naar het moduleontwerp-tabblad en verwijder alle standaard bodemvulling.
- Ondermarge: 0px
Voeg een knopmodule toe aan de kolom
Voeg een kopie toe
De volgende module die we nodig hebben, is een knopmodule. Voer een kopie naar keuze in.
Knop instellingen
Schakel over naar het tabblad moduleontwerp en wijzig de knopinstellingen dienovereenkomstig:
- Gebruik aangepaste stijlen voor de knop: Ja
- Tekstgrootte knop: 1vw (desktop), 2vw (tablet), 3vw (telefoon)
- Knoptekstkleur: #ffffff
- Achtergrondkleur knop: # 000000
- Knoprandbreedte: 0 px
- Knoplettertype: Work Sans
tussenruimte
Ga vervolgens naar de afstandsinstellingen en pas aangepaste marge- en opvulwaarden toe op verschillende schermformaten.
- Bovenmarge: 3vw (kantoor),
- Linkermarge: 20vw (bureau en tablet), 15vw (telefoon)
- Bovenste vulling: 1.2vw (desktop), 2vw (tablet), 4vw (telefoon)
- Vulling onderzijde: 1.2vw (bureau), 2vw (tablet), 4vw (telefoon)
- Linker opvulling: 1.8vw (desktop), 3vw (tablet), 6vw (telefoon)
- Vulling rechts: 1.8vw (bureau), 3vw (tablet), 6vw (telefoon)
Animatie
Pas ook de animatie-instellingen aan.
- Animatiestijl: omdraaien
- Animatierichting: naar beneden
- Animatievertraging: 2000 ms
- Animatie-intensiteit: 100%
- Startdekking animatie: 100%
- Animatiesnelheidscurve: gemak in uit
- Animatie herhalen: een keer
Voeg sectie # 2 toe
Ga door met het toevoegen van een nieuw normaal gedeelte net onder het vorige.
tussenruimte
Open de sectie-instellingen en verwijder de standaard bovenste opvulling.
- Bovenste vulling: 0 px
Voeg een nieuwe regel toe
Kolomstructuur
Blijf een nieuwe rij toevoegen met behulp van de volgende kolomstructuur:
sizing
Zonder meer modules toe te voegen, opent u de lijnparameters en laat u de lijn de volledige breedte van de sectiecontainer innemen.
- Breedte: 100%
- Max breedte: 100%
Voeg een tekstmodule toe aan de kolom
Voeg inhoud toe
Voeg vervolgens een tekstmodule toe met a inhoud beschrijving van uw keuze.
Achtergrond kleur
Voeg een witte achtergrondkleur toe.
- Achtergrondkleur: #ffffff
Tekst instellingen
Schakel over naar het tabblad moduleontwerp en wijzig de tekstinstellingen dienovereenkomstig:
- Tekstlettertype: Work Sans
- Tekstkleur: # 9b9b9b
- Tekstgrootte: 1vw (desktop), 2vw (tablet), 3vw (telefoon)
- Hoogte van de regel tekst: 2.6em
tussenruimte
Voeg ook aangepaste afstandswaarden toe op verschillende schermformaten.
- Bovenmarge: -5vw (desktop), -20vw (tablet), -27vw (telefoon)
- Linkermarge: 20vw (bureau), 13vw (tablet), 8vw (telefoon)
- Rechter marge: 20vw (desktop), 13vw (tablet), 8vw (telefoon)
- Bovenvoering: 5vw (desktop), 7vw (tablet en telefoon)
- Vulling onderkant: 5vw (bureau), 7vw (tablet en telefoon)
- Linker opvulling: 3vw (desktop), 5vw (tablet), 6vw (telefoon)
- Vulling rechts: 3vw (bureau), 5vw (tablet), 6vw (telefoon)
Schaduw doos
En voltooi de module-instellingen door een subtiele doosschaduw toe te passen. Dat is het!
- Box Shadow Blur Strength: 50 px
- Schaduwkleur: rgba (0,0,0,0,1)
overzicht
Nu we alle stappen hebben doorlopen, gaan we nog een laatste keer kijken hoe het eruit ziet op verschillende schermformaten.
Final gedachten
In dit artikel hebben we u laten zien hoe u CSS-tekstblokanimaties aan uw titel kunt toevoegen. Het is belangrijk om ervoor te zorgen dat uw titel vanaf het begin zichtbaar en gelezen is, het toevoegen van animatie aan uw titel kan zeker helpen! U kon ook het layout JSON-bestand gratis downloaden. Als u vragen of suggesties heeft, kunt u een reactie achterlaten in de opmerkingen hieronder.
Vertaald uit: ElegantThemes