CSS-animaties met transform en transition

Lesdoelen:

  • Begrijpen wat de transform en transition CSS-eigenschappen doen.
  • Leren hoe je een element een vloeiende beweging kunt geven.
  • De stappen volgen om een verborgen element te laten verschijnen door een kleine verschuiving en een overgang.

Inleiding:

In deze les leer je hoe je een visueel effect kunt toevoegen aan een HTML-element, zoals een div, door het subtiel naar een andere positie te laten bewegen. Dit effect wordt vaak gebruikt om een element aantrekkelijker te maken of om de aandacht van de gebruiker te trekken.

1. CSS-transformaties

Wat is transform?

De CSS-eigenschap transform maakt het mogelijk om elementen te roteren, schalen, of verplaatsen zonder de oorspronkelijke positie in de documentstroom (DOM) aan te passen.

Voorbeelden:
  • Verticaal verschuiven: transform: translateY(10px);
  • Horizontaal verschuiven: transform: translateX(20px);
  • Schalen: transform: scale(1.2);
  • Roteren: transform: rotate(45deg);

Wat is transition?

De transition-eigenschap zorgt ervoor dat veranderingen in CSS-eigenschappen (zoals transform) niet onmiddellijk gebeuren, maar soepel verlopen. 

transition: transform 0.5s ease;

Dit zorgt ervoor dat een wijziging in transform over 0.5 seconden wordt uitgesmeerd.

2. Voorbeeldproject: Een verschuivende div

Opdracht:

We maken een div-element dat begint buiten zijn normale positie (bijvoorbeeld 20px naar rechts) en vervolgens terugschuift naar zijn oorspronkelijke positie wanneer een nieuwe klasse wordt toegevoegd.

Stap 1: HTML opzetten

Schrijf een eenvoudige HTML-structuur:

<!DOCTYPE html>
<html lang="nl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Transities</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="box hidden"></div>
    <button id="show">Toon de box</button>

    <script src="script.js"></script>
</body>
</html>
Stap 2: Basis CSS maken

Maak een CSS-bestand style.css met de volgende inhoud:

.box {
    width: 100px;
    height: 100px;
    background-color: blue;
}

.hidden {
    transform: translateY(20px);
    opacity: 0;
    transition: transform 0.5s ease, opacity 0.5s ease;
}

.visible {
    transform: translateY(0);
    opacity: 1;
}
Stap 3: JavaScript toevoegen

Schrijf een klein script in script.js om de visible klasse toe te voegen wanneer je op de knop klikt: 

const box = document.querySelector('.box');
const button = document.getElementById('show');

button.addEventListener('click', () => {
    box.classList.toggle('visible');
});

3. Uitleg van de code

CSS:

  • hidden: Beginpositie. De div zit 20px lager en is ondoorzichtig (opacity: 0).
  • visible: Eindpositie. De div is op zijn normale plek en volledig zichtbaar.
  • transition: Regelt dat de overgang vloeiend verloopt over 0.5 seconden.

JavaScript:

  • De knop schakelt de klasse visible in of uit.
  • Bij het toevoegen van visible past de browser automatisch de transitie toe.

4. Experimenteren

  • Probeer andere waarden voor translateY en opacity. Wat gebeurt er als je translateY(50px) gebruikt?
  • Verander de duur van de overgang naar 1s in plaats van 0.5s. Hoe voelt dat aan?
  • Voeg nog een element toe en laat deze horizontaal verschuiven met translateX.

Conclusie:

Met transform en transition kun je zonder extra tools of complexe technieken een professioneel ogend effect aan je websites toevoegen. Door de juiste waarden te kiezen en te experimenteren, kun je speelse animaties maken die de gebruikerservaring verbeteren.

Oefening:

Schrijf een stukje CSS dat een element laat draaien (rotate) terwijl het van transparant naar volledig zichtbaar gaat. Voeg dit toe aan de bovenstaande code en test je werk.

Oefening: Een afbeelding laten verschijnen wanneer deze in beeld komt

Deze oefening richt zich op het begrijpen van hoe je een afbeelding die eerst “verborgen” is, kunt laten verschijnen zodra deze zichtbaar wordt op de pagina.

Opdracht:

HTML en CSS code schrijven

  1. Maak een afbeelding op je pagina met de class hidden.
  2. Deze class zorgt ervoor dat de afbeelding aanvankelijk ondoorzichtig is en buiten beeld wordt geplaatst met een kleine transformatie: 
    .hidden {
  opacity: 0;
  transform: translateY(20px);
  transition: transform 0.5s ease, opacity 0.5s ease;
}
.visible {
  opacity: 1;
  transform: translateY(0);
}
  3. Hierdoor wordt de afbeelding eerst onzichtbaar en een klein beetje naar beneden verschoven. Zodra de visible klasse wordt toegevoegd, zal de afbeelding vloeiend omhoog schuiven en zichtbaar worden.

JavaScript:

Plaats de JavaScript code onderaan de HTML-pagina, net voor de sluittag van het body element: </body>. Opgelet maak gebruik van een script element en plaats de code als inhoud tussen <script> en </script>.

Wat de code doet:

De afbeeldingen op de pagina zullen pas verschijnen als ze worden geladen of zichtbaar worden. Dit kan er bijvoorbeeld voor zorgen dat bezoekers niet meteen alle afbeeldingen tegelijk zien, maar deze één voor één tevoorschijn zien komen bij het scrollen. 

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
      observer.unobserve(entry.target);
    }
  });
});

const images = document.querySelectorAll('.hidden');
images.forEach(image => observer.observe(image));

De JavaScript-code begrijpen

  1. De code gebruikt een zogenaamde IntersectionObserver. Dit is een ingebouwde functie die detecteert wanneer een element in beeld komt.
  2. Wanneer de afbeelding in beeld verschijnt (entry.isIntersecting is true), voegt de code de visible klasse toe. Dit activeert de CSS-overgangen, zodat de afbeelding zichtbaar wordt.
  3. De observer.unobserve(entry.target) zorgt ervoor dat de afbeelding niet telkens opnieuw wordt gecontroleerd nadat deze zichtbaar is geworden.

Vragen:

  • Wat doet de hidden klasse in combinatie met de CSS-transitie?
  • Waarom is het handig om de observer.unobserve(entry.target) regel toe te voegen?
  • Wat zou er gebeuren als je in plaats van translateY(20px) een waarde van 100px gebruikt?