Fade maken voor tekst en afbeeldingen

Een fade maken maakt je website levendig en dynamisch. Je kan fade gebruiken voor tekst, afbeeldingen, foto‘s, kaders, kolommen en rijen met page builders als bakery elementor. Laadt deze pagina nog een keer en je ziet dat de teksten en kaders mooi achter elkaar in beeld komen.

Fade maken in CSS met class tekst afbeelding

Fade maken in CSS classDoor frames te maken in CSS kun je een deel van je WordPress pagina van animatie voorzien. Als je frames in de stylesheet maakt, zijn ze beschikbaar voor hergebruik op zoveel pagina-elementen zoals u wilt. Fading tekst in CSS vereist een keyframing code die dekking volledig in een punt in de animatie ingesteld en verandert het in volledige transparantie op een ander punt.

CSS eigenschappen zoals kleur of transparantie binnen de accolades naast de percentages toevoegen. Elk nummer percentage in het hoofdframe vertegenwoordigt een cursor binnen de animatie, of op een hoofdframe. De begin- en einddatum posities aan de dezelfde eigenschappen instelt, kunt u de animatie soepel lus. Elk hoofdframe ingesteld op een andere dekking:

Door het maken van “ondoorzichtigheid” gelijk is aan een voor het begin en het einde van deze animatie, maak je het starten en stoppen op volledige dekking. Een nul dekking op de 50 procent merk verdwijnt de animatie volledig halverwege via; zet hem op decimaalteken waarden als “0.5” als u niet wilt dat de animatie ooit om onzichtbaar te worden.

Voorbeeld en handleiding tekst fade maken in CSS met class

In het voorbeeld is “fade-in-01” een id-selector of class waarmee wordt gezocht naar elke gewenste code op de pagina met een ID van “fade-in-01”
Lees meer over hoe je een class in WordPress maakt:

In css ziet de code er zo uit:

.fade-in-01 { opacity: 1; 
animation-name: 
fadeIn-AW01; 
animation-iteration-count: 1; 
animation-timing-function: ease-in; 
animation-duration: 0.5s; } 
@keyframes fadeIn-AW01 { 
0% { opacity: 0; } 100% { opacity: 1; } }

De eerste waarde is de naam van uw hoofdframe, gevolgd door de tijdsduur in seconden (animation-duration). Een eenmalige herhaling wordt de animatie aangegeven door een het getal zoals “1”. Als je meer ingeeft blijft de animatie zich herhalen tot om op te geven van een eindig aantal lussen.

Fade maken in CSS met class in WordPress

Tijdens een gevorderde WordPress cursus krijg je de hele set van deze 6 animaties zodat je zelf niet de tijd en aanvang van de animatie hoeft in te stellen. Dit leer je tijdens 1 van de volgende trainingen en opleidingen:

• WordPress Pop-up Bootcamp spoedcursus op maat
• Online WordPress cursus volgen op afstand vanuit huis
• WordPress Bootcamp all-in one spoedcursus
• WordPress Designcursus ontwerp en vormgevingstraining