Fade-in-01
Fade-in-01
Fade-in-03
Fade-in-04
Fade-in-05
Fade-in-06
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec mattis, pulvinar dapibus leo.
In ante metus dictum at tempor ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia at risus.
Augue neque gravida in fermentum et orci egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam nulla
Augue neque gravida in fermentum et orci egestas tellus rutrum tellus pellentesque eu tincidunt tortor aliquam nulla
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec mattis, pulvinar dapibus leo.
In ante metus dictum at commodo ullamcorper a lacus vestibulum sed arcu non odio euismod lacinia at risus.
Fade maken in CSS met een class is niet moeilijk. Het vraagt eenmalig even aandacht. Lees deze handleiding hoe je een fade met tekst of blok maakt
IN DEZE HANDLEIDING:
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:
- CSS aanpassen specifieke pagina's en berichten in WordPress
- Zelf buttons maken in WordPress met een HTML Class en CSS
- Typografie stijlen | css, class, span opmaakstijlen maken WordPress website
- Gebruik class voor layout geen html page builder opmaak
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: