Dia-effecten voor carrousel maken

Met dia-effecten voor carrousels kunt u een carrousel visueel aantrekkelijker maken. Terwijl de gebruiker door de dia's scrollt, kan elke dia worden geanimeerd wanneer deze de scrollport binnenkomt, centreert en verlaat. De dia's kunnen bijvoorbeeld in- en uitfaden, draaien of van formaat veranderen. Dit zorgt voor een dynamische en aantrekkelijke gebruikerservaring. In tegenstelling tot eenvoudige animaties voor binnenkomst/vertrek gebruikt dit effect één doorlopende animatie om de weergave van de dia in de hele scrollport te bepalen.

Hoe wordt dit geïmplementeerd

Zo maak je dia-effecten voor een carrousel:

1. Maak een scroller: Dit element fungeert als de container voor uw carrouseldia's. In dit voorbeeld wordt overflow-x: scroll gebruikt om horizontaal scrollen toe te staan.

   <ul class="scroller">
     <li class="entry">1</li>
     <li class="entry">2</li>
     <li class="entry">3</li>
     …
   </ul>
   

   .scroller {
     overflow-x: scroll;
   }
   

2. Definieer de animatie: Maak een CSS-animatie die de verschillende statussen van je dia's definieert terwijl ze door de scrollport bewegen. U kunt keyframes definiëren voor elk deel van de animatie. Je kunt bijvoorbeeld een status definiëren voor wanneer de dia's zich in het midden van de scrollport bevinden door een 50%-keyframe op te nemen. In dit voorbeeld zorgt de eigenschap scale ervoor dat de dia's groter worden als ze het midden naderen en kleiner worden als ze weggaan.

   @keyframes animate {
     0% {
       scale: 0.5;
     }
     50% {
       scale: 1;
     }
     100% {
       scale: 0.5;
     }
   }
   

3. Pas de animatie toe en view-timeline: Koppel de animatie aan de carrouseldia's en koppel deze aan een view-timeline die het element bijhoudt terwijl het door de container scrollt.

   .scroller > * {
     animation: animate auto linear both;
     animation-timeline: view(inline);
   }
   

   Standaard volgt view() het element op de block-as. Als je dit op de inline-as wilt bijhouden, kun je view(inline) gebruiken.

Voorbeeldcode

Deze code animeert de carrouselitems van een horizontale scroller bij scrollen met een anonieme weergavetijdlijn:

@keyframes animate {
  0% {
    scale: 0.5;
  }

  50% {
    scale: 1;
  }

  100% {
    scale: 0.5;
  }
}

.scroller > * {
  /* Applies the animation using an `auto` duration */
  animation: animate auto linear both;
  /* Sets the animation timeline to use an anonymous view progress timeline, tracking the element's progress through the scroller on the inline axis */
  animation-timeline: view(inline);
}

Deze code animeert de carrouselitems van een horizontale scroller bij scrollen met een benoemde view-timeline:

@keyframes animate {
  0% {
    scale: 0.5;
  }

  50% {
    scale: 1;
  }

  100% {
    scale: 0.5;
  }
}

/* This creates a named view-timeline on each carousel item. The timeline is used to drive the animation that is applied on the same element. */
.scroller > * {
  /* Applies the animation using an `auto` duration */
  animation: animate auto linear both;
  /* Defines a named view progress timeline, tracking the element's progress through the scroller on the inline axis */
  view-timeline: --item inline;
  /* Sets the animation timeline to use the named view progress timeline defined above */
  animation-timeline: --item;
}

Praktische tips

Als je scrollgestuurde animaties gebruikt, is het belangrijk dat je een aantal best practices volgt om een soepele en toegankelijke gebruikerservaring te bieden:

• WEL functiedetectie opnemen: Niet alle browsers ondersteunen scrollgestuurde animaties. Gebruik @supports ((animation-timeline: view()) and (animation-range: entry)) om te controleren op ondersteuning en een fallback te bieden voor browsers die dit niet ondersteunen.
  • De (animation-range: entry)-controle MOET hier worden opgenomen om browsers met slechts gedeeltelijke ondersteuning weg te filteren.
  • Gebruik het scroll-timeline-polyfill-pakket NIET voor de fallback-strategie, omdat het niet alle functies bevat en veel bekende problemen heeft.
  • Als de animatie alleen als decoratief wordt beschouwd, kies je voor progressive enhancement en bied je GEEN fallback.
• WEL: Respecteer gebruikersvoorkeuren. Sommige gebruikers geven de voorkeur aan minder beweging op het web. Gebruik de mediaquery prefers-reduced-motion om je animaties uit te zetten of te verminderen voor deze gebruikers.
• WEL proberen alleen animaties te maken voor presterende CSS-property's: Voor de soepelste animaties maak je alleen animaties voor property's die kunnen worden verwerkt door de compositor-thread van de browser, zoals transform en opacity. Als je andere eigenschappen animeert, zoals width of height, kan dit leiden tot prestatieproblemen.
• WEL de juiste declaratievolgorde gebruiken: Als je de verkorte eigenschap animation gebruikt, declareer je animation-timeline en animation-range erna om te voorkomen dat de verkorte eigenschap de tijdlijn reset.

Geef de voorkeur aan een benoemde view-timeline als meerdere DOM-elementen moeten worden geanimeerd op basis van dezelfde tijdlijn of als je onderliggende elementen van het element wilt animeren waarvoor de view-timeline is gedefinieerd. Als het element dat je animeert ook het element is dat de view-timeline definieert, kun je een anonieme weergavetijdlijn gebruiken met view().

Als je de functie view() gebruikt om een scrollgestuurde animatie te maken, geldt het volgende:

• OPTIONEEL Wees expliciet over de as die je wilt bijhouden: Als je niet de standaardas block target (zoals in een horizontale scroller), wees dan expliciet over welke as je wilt bijhouden met view(block) of view(inline).

Als je de eigenschap view-timeline gebruikt om een scrollgestuurde animatie te maken:

• WEL: Gebruik een CSS-<dashed-ident> voor de naam (bijv. view-timeline: --my-custom-name)
• OPTIONEEL Wees expliciet over de as die moet worden bijgehouden: Als je niet de standaardas block target (zoals in een horizontale scroller), wees dan expliciet over welke as moet worden bijgehouden met view-timeline-axis.
• Zorg dat het bereik van de zoekopdracht werkt: Als het element dat de view-timeline declareert, geen voorouder van de platte structuur van het geanimeerde element is, verhoog je de zichtbaarheid van de naam van de view-timeline door timeline-scope te gebruiken voor een gedeelde voorouder.

Browserondersteuning en fallback-strategieën

Daarom is meestal een reservestrategie vereist.

Voor browsers die geen scrollgestuurde animaties ondersteunen, kun je een fallback gebruiken om de visuele effecten opnieuw te maken. De fallbacks worden meestal gemaakt met een scroll-listener (voor ScrollTimeline-effecten) of de IntersectionObserver API (voor ViewTimeline-effecten).

In browsers met ingebouwde ondersteuning voor scrollgestuurde animaties gebruik je ALTIJD de native CSS-implementatie, omdat die beter presteert.

Niet elk effect kan opnieuw worden gemaakt met de reserveaanpak.

Specifiek voor deze use case past het volgende script de fallback toe voor browsers die geen scrollgestuurde animaties ondersteunen. De Web Animations API (Element.animate()) wordt gebruikt om een onderbroken animatie te maken voor elk item in de carrousel. Daarna luistert de code naar de gebeurtenis scroll op de scroller en updatet de currentTime van elke animatie op basis van de scrollvoortgang van het item in de scroller.

// Fallback for browsers that don't support scroll-driven animations
if (!CSS.supports('(animation-timeline: view()) and (animation-range: entry)')) {
  const scroller = document.querySelector('.scroller');
  const entries = document.querySelectorAll('.entry');

  // Create a map to store animations
  const animations = new Map();

  entries.forEach(entry => {
    const animation = entry.animate(
      {
        scale: ['0.5', '1', '0.5']
      },
      {
        duration: 1, // We'll control the time ourselves
        fill: 'both'
      }
    );
    animation.pause();
    animations.set(entry, animation);
  });

  // Update animations on scroll
  const tick = () => {
    const scrollerRect = scroller.getBoundingClientRect();

    entries.forEach(entry => {
      const animation = animations.get(entry);
      if (!animation) return;

      const entryRect = entry.getBoundingClientRect();
      const progress = (entryRect.left + entryRect.width / 2 - scrollerRect.left) / scrollerRect.width;

      animation.currentTime = progress;
    });
  };
    
  scroller.addEventListener('scroll', tick);
  tick();
}