Workshop: Interactieve uitklappende panelen maken

wdNL088_panelenZoals te zien op Freewrite

Een computer biedt tegenwoordig zoveel afleiding dat het niet altijd eenvoudig is om je daarvoor af te sluiten en je volledig op je werk te richten. E-mail, internet, YoutTube en sociale media: allemaal prachtige dingen, maar ze kunnen serieus doorwerken flink in de weg staan. Soms moet je gewoon alle afleiding volledig kunnen uitschakelen. Met dat doel voor ogen is de Freewrite ontworpen. Het is feitelijk een typemachine, maar dan volledig aangepast aan de eenentwintigste eeuw, met een modern keyboard, e-inkscherm en lokale en cloud-opslag. Verder niets. In het kader van het ‘Internet of Things’ verschijnen er steeds meer van zulke slimme apparaten die ontworpen zijn om één ding goed te doen, vaak met een internetverbinding voor het downloaden en opslaan van data, maar zonder de frivole afleidingen van het internet. Bonne Marque, het bedrijf achter de Freewrite, heeft de site in eigen beheer gemaakt en toont het apparaat in al zijn glorie. Het bedrijf is erin geslaagd om de voordelen sprekend tot leven te brengen dankzij mooi geanimeerde CSS-panelen en -elementen.

1. Het uitklappende paneel maken

De code van de download bevat de div-structuur voor het paneel. Na een klik op de cirkel breidt het blok zich naar boven en naar buiten uit, zoals op de Freewrite-site.

2. CSS toevoegen

Voeg de CSS toe binnen de style-tags of in een apart CSS-bestand. Hiervoor maak je enkele speci- fieke keyframes voor de animatie. Deze worden aan de elementen toegevoegd als de gebruiker de animatie met een klik op de ronde knop start.

  • @keyframes animation1 {
  • 0% { transform: scale(0.01, 0); }
  • 50% { transform: scale(0.01, 1); }
  • 100% { transform: scale(1, 1); background:
  • rgba(98, 123, 157, 1); } }
  • #block {
  • width: 400px; height: 400px;
  • position: relative;
  • top: 200px;
  • background: rgba(98, 123, 157, 0); }

3. Animatie-klassen

Nadat de bezoeker op een plusje heeft geklikt, worden de klassen aan de respectievelijke elementen toegevoegd. Ze roepen de juiste animatie-keyframes op voor elk element, die éénmaal worden afgespeeld en op de laatste keyframe op 100% blijven staan.

4. De cirkel stijlen

De cirkel is aanklikbaar en wordt op het scherm bovenaan het originele paneel geplaatst. De opvolgende keyframes geven de nieuwe positie aan waar de cirkelanimatie heen zal schuiven nadat erop is geklikt.

  • #circle {
  • position: relative;
  • width: 80px; height: 80px;
  • left: 160px; top: 160px;
  • background: rgb(70, 85, 105);
  • border-radius: 50%;}
  • @keyframes animation2 {
  • 0% {}
  • 100% { transform: translateY(-400px);} }

5. Verborgen tekst

Initieel is de tekst verborgen en staat de dekking op 0. Als op de cirkel wordt geklikt, wordt de showklasse toegevoegd met een vertraging van 1,5 seconde op de tekst, zodat deze pas zichtbaar is als de andere elementen op hun nieuwe plek staan.

  • #txt {
  • transition: all 0.5s ease;
  • transition-delay: 1.5s;
  • padding: 20px; }
  • .hide { opacity: 0; }
  • .show { opacity: 1; }

6. De gebeurtenis

Een klik op de cirkel roept de start-functie op. De code moet aan script-tags onder aan de pagina worden toegevoegd. De eerste drie regels benaderen de elementen en slaan ze tijdelijk op als variabelen. Ook worden bij de klik de relevante klassen toegevoegd.

  • var block = document.
  • getElementById(“block”);
  • var circle = document.
  • getElementById(“circle”);
  • var txt = document.getElementById(“txt”);
  • var open = false;
  • function start() {
  • block.classList.add(“anim1”);
  • circle.classList.add(“anim2”);
  • txt.classList.add(“show”); }

Deel dit artikel of reageer