Exercice 30 | intégration d'une librairie CSS + JavaScript

Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia, reprehenderit veritatis quaerat odit, nesciunt modi ullam blanditiis quas facilis sit facere hic temporibus cupiditate placeat. Omnis quisquam exercitationem libero tempora.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga inventore saepe delectus sunt sed minus quaerat modi, dicta veniam et quia, nam error distinctio nobis perspiciatis, amet autem necessitatibus minima!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga inventore saepe delectus sunt sed minus quaerat modi, dicta veniam et quia, nam error distinctio nobis perspiciatis, amet autem necessitatibus minima!

Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga inventore saepe delectus sunt sed minus quaerat modi, dicta veniam et quia, nam error distinctio nobis perspiciatis, amet autem necessitatibus minima!

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Architecto consequuntur obcaecati velit nisi neque sunt veniam magni!

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi repudiandae aperiam magni id saepe reiciendis mollitia, sequi officiis consequatur velit deserunt odio facilis unde aut, sed voluptates architecto magnam! Alias.

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi repudiandae aperiam magni id saepe reiciendis mollitia, sequi officiis consequatur velit deserunt odio facilis unde aut, sed voluptates architecto magnam! Alias.

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nisi repudiandae aperiam magni id saepe reiciendis mollitia, sequi officiis consequatur velit deserunt odio facilis unde aut, sed voluptates architecto magnam! Alias.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione hic reiciendis atque labore eligendi explicabo inventore tenetur non harum fugiat dicta, cum nobis quam sunt velit veniam quae alias distinctio.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Obcaecati eaque quaerat quo excepturi hic praesentium aspernatur placeat tempore.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione hic reiciendis atque labore eligendi explicabo inventore tenetur non harum fugiat dicta, cum nobis quam sunt velit veniam quae alias distinctio.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Labore beatae ullam saepe ut esse facere sapiente quia eius quas magnam eaque rem aperiam delectus recusandae numquam porro, omnis minus tempora.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione hic reiciendis atque labore eligendi explicabo inventore tenetur non harum fugiat dicta, cum nobis quam sunt velit veniam quae alias distinctio.

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Quo ipsa laboriosam, quam dolor quibusdam vitae eveniet molestias hic esse accusamus, culpa numquam! Cupiditate reiciendis aperiam itaque mollitia culpa incidunt dolorem.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae dolorem ab voluptates odio nam vero rem cumque

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ratione hic reiciendis atque labore eligendi explicabo inventore tenetur non harum fugiat dicta, cum nobis quam sunt velit veniam quae alias distinctio.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque tempore eius repudiandae eligendi sed. Ipsum aut voluptate exercitationem voluptates quas sapiente. Iste omnis non eum ipsa! Dolorem tenetur eligendi consequuntur?

Lorem ipsum dolor sit amet consectetur adipisicing elit. Recusandae dolorem ab voluptates odio nam vero rem cumque

Froggiesplaining :

🎯 Objectifs de cet exercice :
Intégrer une librairie externe (AOS - Animate On Scroll) pour ajouter des animations au défilement de la page.

📦 Qu'est-ce qu'AOS ?
AOS (Animate On Scroll) est une librairie gratuite d'animations CSS et JavaScript qui permet d'animer des éléments lorsqu'ils apparaissent dans le viewport pendant le scroll.

🔧 Comment l'utiliser ?

Inclure le CSS et JS via CDN dans le <head> et avant </body>
Initialiser AOS avec AOS.init();
Ajouter l'attribut data-aos="..." sur les éléments à animer
Personnaliser avec des attributs : data-aos-duration, data-aos-delay, etc.

✨ Types d'animations disponibles :

fade-right, fade-left, fade-up, fade-down : Apparitions avec fondu
zoom-in, zoom-out : Effets de zoom
flip-left, flip-right, flip-up, flip-down : Effets de rotation 3D

📚 Ressources :

Démo officielle : https://michalsnik.github.io/aos/
GitHub : https://github.com/michalsnik/aos

💡 Exercice :
Faites vos propres tests en modifiant les valeurs de data-aos, data-aos-duration et data-aos-anchor-placement ! Froggie

Froggie