Aanpak
Ik wilde verschillende kleine aanpassingen doen aan mijn demo. Ik heb verschillende sites bezocht om te kijken hoe ik bepaalde dingen kon doen. Vervolgend heb ik dit toegepast in mijn eigen code.
Leerervaring
- Achtergrond toevoegen in CSS
Een makkelijke manier om elke pagina een ander achtergrond te geven is met de volgende code:
background-image: url(images/naam.jpg);
Hiervoor moet je je 'images' mapje wel in je CSS mapje zetten.
Je kunt de achtergrond de hele pagina laten vullen met de code:
background-size: 100% 100%;
- Een timeline oneindig herhalen
Je kunt met 'repeat: -1' een timeline oneindig laten herhalen.
Bijvoorbeeld: tlleafys.staggerTo(".leafy", 20, {y: '1200', repeat: -1}, 0.7) om de blaadjes altijd te laten vallen
- Elementen boven de pagina positioneren
De vallende blaadjes moeten boven de pagina verschijnen en dan naar benden vallen. Dit kan door in CSS '- top: -1200' toe te voegen.
- Timeline afspelen bij hover
Je bepaald eest elke element je de hover wilt. Vervolgens zet je daar een functie op. In de functie zet je play en repeat zodat de timeline gaat afspelen wanneer je met je muis over het element gaat.
$oor.hover(
function(){
tldeer.play();
tldeer.restart({paused: true})
})
- custom cursor maken
Ik wilde een vliegje maken van mijn cursor. Dit kan door de volgende code:
.cursorfun {
cursor: url('images/fly.png'), auto ;
}
Een probleem hierbij was echter dat de de achtergrond niet als element in de class stond. Daardoor veranderde de cursor alleen in een vlieg wanneer je over de tekst of de afbeelding ging. Daarom heb ik een onzichtbare achtergrond toegevoegd in de class.
Resultaat
Hier is de uiteindelijk versie van de demo te zien.
Bronnen
