INSOMNIA

Insomnia

version

Support

DIVI

Tu peux même l’utiliser sans.

Télécharger

Installation

Téléverser le dossier /insomnia/ dans votre fichier thème
Importer dans Code Snippet le fichier insomnia.code-snippets
Importer dans ACF le fichier acf-export.json
Pré-requis pour le bon fonctionnement (Font Awesome, Swiper JS & GSAP)

HTML

<!-- INSOMNIA (Ex: votre thème est /attps/ -->
<link rel="stylesheet" href="/wp-content/themes/attps/insomnia/insomnia.css">
<script src="/wp-content/themes/attps/insomnia/insomnia.js"></script>

HTML

<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdn.attps.fr/wp-content/themes/cdn-attps/css/all.css">

<!-- Swiper JS -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>

<!-- GSAP -->
<script src="https://unpkg.com/gsap@3/dist/gsap.min.js"></script>
<script src="https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js"></script>

Changelog

INFO

version 1.0.5 (20/05/2025)
ADD : Distinction si lien est un .btn ou lien simple
FIX : Revue complète de la détection des liens
FIX : Bug en back-office suite à la détection des liens
FIX : Revue des couleurs des onglets
FIX : Système de grille revue pour gestion pair/impair du .col-x
INFO : Détection des liens n'est plus en bêta

-------------------------------------------------------------------------------

version 1.0.4 (19/05/2025)
ADD : Readme.md
ADD : Licence.txt
FIX : Interprétation sur Apache problèmatique du JS
FIX : Ouverture accordeon
DELETE : Flèches du Tooltip

Bonjour

Introduction

Mais ça fait quoi au juste ?

Accessibilité WCAG

Balise aria & role

Flex-ible

Auto gestion de 12 colonnes

Plugin WordPress

Prochainement

Détection de lien

Application target et balisage selon type de lien

Snippet ready

ACF et PHP prêt à l'emploi

Respect des petits chats

Il fallait 6 slides, donc je meuble

Assets

Titres

H1. Votre exemple

H2. Votre exemple

H3. Votre exemple

H4. Votre exemple

HTML

<h1>H1. Votre exemple</h1>
<h2>H2. Votre exemple</h2>
<h3>H3. Votre exemple</h3>
<h4>H4. Votre exemple</h4>

Assets

Paragraphes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin interdum ultricies bibendum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam est ante, ornare at orci vitae, mattis cursus velit. Cras egestas at tellus vitae tempor. Nullam tempus elementum pulvinar. Proin ut ornare tellus, et viverra sem. Pellentesque condimentum nisl quis velit varius venenatis. Mauris ullamcorper rhoncus mi, sed luctus ipsum posuere a.

Praesent urna turpis, pellentesque sed vestibulum non, convallis eu quam. Maecenas accumsan porttitor sem ut vulputate. Nunc ullamcorper auctor viverra. Duis odio lacus, accumsan eget ipsum quis, aliquet cursus dolor. In venenatis mauris eget consequat ullamcorper. Maecenas maximus mollis convallis. Morbi enim augue, suscipit ut ligula non, vulputate laoreet justo.

Aliquam sed venenatis lectus.

Integer diam eros, suscipit elementum.

~~Integer diam eros, suscipit elementum.~~

HTML

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin interdum ultricies bibendum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam est ante, ornare at orci vitae, mattis cursus velit. Cras egestas at tellus vitae tempor. Nullam tempus elementum pulvinar. Proin ut ornare tellus, et viverra sem. Pellentesque condimentum nisl quis velit varius venenatis. Mauris ullamcorper rhoncus mi, sed luctus ipsum posuere a.</p>

<p class="justify">Praesent urna turpis, pellentesque sed vestibulum non, convallis eu quam. Maecenas accumsan porttitor sem ut vulputate. Nunc ullamcorper auctor viverra. Duis odio lacus, accumsan eget ipsum quis, aliquet cursus dolor. In venenatis mauris eget consequat ullamcorper. Maecenas maximus mollis convallis. Morbi enim augue, suscipit ut ligula non, vulputate laoreet justo.</p>

<p><b>Aliquam sed venenatis lectus.</b></p>

<p><em>Integer diam eros, suscipit elementum.</em></p>

<p><s>Integer diam eros, suscipit elementum.</s></p>

Assets

Citation

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque molestie mi tortor, vel scelerisque nibh viverra eu. Quisque tempus tincidunt dolor in maximus. Vestibulum molestie dignissim euismod.

HTML

<blockquote>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque molestie mi tortor, vel scelerisque nibh viverra eu. Quisque tempus tincidunt dolor in maximus. Vestibulum molestie dignissim euismod. 
</blockquote>

Assets

Bouton

Balise "a" Bouton Bouton x2

Balise "button" (radius)

Avec icône Bouton Bouton

Avec alignement Bouton Bouton

HTML

En lien <a>
<a href="#" class="btn">Bouton</a>
<a href="#" class="btn btn-2x">Bouton x2</a>

Sans lien <button>
<button class="btn stl-radius">Bouton</button>
<button class="btn btn-2x stl-radius">Bouton x2</button>

Avec icône
<a href="#" class="btn btn-icn-left">Bouton</a> 
<a href="#" class="btn btn-icn-right">Bouton</a>

Avec alignement
<a href="#" class="btn btn-align">Bouton</a> 
<a href="#" class="btn btn-align">Bouton</a>

Snippet
Assets

Liens

Lien INTERNE Lien interne Bouton interne

Lien EXTERNE Lien externe Bouton externe

Lien FICHIER (Ex: fichier .pdf) Lien fichier Bouton fichier

HTML

Auto-application si le lien est interne, externe ou un fichier :

Lien INTERNE - Rien ne change
<a href="https://insomnia.attps.dev" class="btn">Lien interne</a>

Lien EXTERNE - Auto application .link-externe (ou .btn-externe si .btn présente), target blank, rel noopener et noreferrer pour ne pas suivre les liens par le SEO
<a href="https://google.fr" class="link-externe" target="_blank" rel="noopener noreferrer">Bouton externe</a>

Lien FICHIER (Ex: fichier .pdf) - Auto application .link-file (ou .btn-file si .btn présente), du download, du type et du aria-label)
<a href="https://attps.fr/fichier.pdf" download type="application/pdf" aria-label="Télécharger le fichier PDF" class="link-file">Lien fichier</a>

Assets

Listes

Élément 1
Élément 2
Élément 3

Élément 1
Élément 2
Élément 3

Élément 1
Élément 2
Élément 3

Élément 1
Élément 2
Élément 3

HTML

<ul class="list-none">
    <li>Élément 1</li>
    <li>Élément 2</li>
    <li>Élément 3</li>
</ul>

<ul class="list-default">
    <li>Élément 1</li>
    <li>Élément 2</li>
    <li>Élément 3</li>
</ul>

<ul class="list-check">
    <li>Élément 1</li>
    <li>Élément 2</li>
    <li>Élément 3</li>
</ul>

<ul class="list-check-bg">
    <li>Élément 1</li>
    <li>Élément 2</li>
    <li>Élément 3</li>
</ul>

Assets

Badges

Ceci est un message texte avec un badge +2

Ceci est un message texte avec un effet notification 1

Ceci est un message texte avec un effet notification label Nouveau

Ceci est un message texte avec un effet notification label avec fond Nouveau

Ceci est un message texte avec une information label avec pulsation lors du hover Nouveau

HTML

<p>Ceci est un message texte avec un badge <span class="badge">+2</span></p>
<p>Ceci est un message texte avec un effet notification <span class="badge-notif">1</span></p>
<p>Ceci est un message texte avec un effet notification label <span class="badge-txt">Nouveau</span></p>
<p>Ceci est un message texte avec un effet notification label avec fond <span class="badge-txt-bg">Nouveau</span></p>
<p class="badge-pulse">Ceci est un message texte avec une information label avec pulsation lors du hover <span class="badge-txt-bg">Nouveau</span></p>

Assets

Alertes

Alerte sans niveau (avec fermeture)

Alerte de niveau 0 (avec fermeture)

Alerte d'avertissement de niveau 1

Alerte d'avertissement modérée de niveau 2

Alerte d'avertissement assez grave de niveau 3

Alerte d'avertissement critique grave de niveau 4

HTML

<div class="alert alert-close">Alerte sans niveau (avec fermeture)</div>
<div class="alert alert-0 alert-close" role="alert">Alerte de niveau 0 (avec fermeture)</div>
<div class="alert alert-1" role="alert">Alerte avertissement de niveau 1</div>
<div class="alert alert-2" role="alert">Alerte avertissement modérée de niveau 2</div>
<div class="alert alert-3" role="alert">Alerte avertissement assez grave de niveau 3</div>
<div class="alert alert-4" role="alert">Alerte avertissement critique grave de niveau 4</div>

Assets

Grille

Utiliser en pair la classe .col-x permet d’afficher deux colonnes côte à côte en mobile. Si impair, cette dernière réinitialise sur une colonne.

.col

.col-x

.col

.col-x

.col

.col-x

.col

HTML

<div class="contain">
    <div class="col">.col</div>
    <div class="col">.col</div>
    <div class="col">.col</div>
    <div class="col">.col</div>
</div>

<div class="contain">
    <div class="col">.col</div>
    <div class="col col-x">.col-x</div>
    <div class="col col-x">.col-x</div>
    <div class="col col-x">.col-x</div>
    <div class="col">.col</div>
    <div class="col">.col</div>
</div>

<div class="contain">
    <div class="col col-x">.col-x</div>
    <div class="col col-x">.col-x</div>
    <div class="col col-x">.col-x</div>
    <div class="col col-x">.col-x</div>
    <div class="col">.col</div>
    <div class="col">.col</div>
    <div class="col">.col</div>
    <div class="col col-x">.col-x</div>
    <div class="col col-x">.col-x</div>
    <div class="col col-x">.col-x</div>
    <div class="col col-x">.col-x</div>
    <div class="col col-x">.col-x</div>
    <div class="col">.col</div>
</div>

Assets

Onglets

Utiliser .align-vertical pour aligner les onglets sur la gauche en vertical

Onglet 1

Onglet 2

Onglet 3

Contenu de l'onglet 1

Contenu de l'onglet 2

Contenu de l'onglet 3

Onglet 4

Onglet 5

Onglet 6

Contenu de l'onglet 4

Contenu de l'onglet 5

Contenu de l'onglet 6

HTML

<div class="tabs-container">
	<select class="tab-dropdown">
		<option value="1">Onglet 1</option>
		<option value="2">Onglet 2</option>
		<option value="3">Onglet 3</option>
	</select>

<div class="tabs">
	<div class="tab active" data-tab="1">Onglet 1</div>
	<div class="tab" data-tab="2">Onglet 2</div>
	<div class="tab" data-tab="3">Onglet 3</div>
</div>

<div class="tab-content-container">
	<div class="tab-content active" id="tab-1">Contenu onglet 1</div>
	<div class="tab-content" id="tab-2">Contenu onglet 2</div>
	<div class="tab-content" id="tab-3">Contenu onglet 3</div>
</div>

</div>

<div class="tabs-container align-vertical">
	<select class="tab-dropdown">
		<option value="4">Onglet 1</option>
		<option value="5">Onglet 2</option>
		<option value="6">Onglet 3</option>
	</select>

<div class="tabs">
	<div class="tab active" data-tab="4">Onglet 4</div>
	<div class="tab" data-tab="5">Onglet 5</div>
	<div class="tab" data-tab="6">Onglet 6</div>
</div>

<div class="tab-content-container">
	<div class="tab-content active" id="tab-4">Contenu onglet 4</div>
	<div class="tab-content" id="tab-5">Contenu onglet 5</div>
	<div class="tab-content" id="tab-6">Contenu onglet 6</div>
</div>

</div>

Assets

Accordéon

.open-first pour ouvrir au chargement un onglet
.close-other ferme les onglets dés qu’on en ouvre un autre

Section 1

Contenu de la section 1

Section 2

Contenu de la section 2

Section 3

Contenu de la section 3

HTML

<div class="accordion open-first close-other">
    <div class="accordion-item">
        <div class="accordion-header">Section 1</div>
        <div class="accordion-content">Contenu de la section 1</div>
    </div>
    <div class="accordion-item">
        <div class="accordion-header">Section 2</div>
        <div class="accordion-content">Contenu de la section 2</div>
    </div>
    <div class="accordion-item">
        <div class="accordion-header">Section 3</div>
        <div class="accordion-content">Contenu de la section 3</div>
    </div>
</div>

Assets

Icônes

Format rond

Format carré

HTML

<i class="fas fa-check icon-round"></i>
<i class="fas fa-user icon-round"></i>
<i class="fas fa-phone icon-round"></i>

<i class="fas fa-check icon-square"></i>
<i class="fas fa-user icon-square"></i>
<i class="fas fa-phone icon-square"></i>

Assets

Icônes (liste)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In egestas efficitur porta. Etiam ac euismod enim. Praesent consequat porta dolor sed porta. Suspendisse dapibus nulla id ex gravida, a sollicitudin risus lacinia. Aliquam dapibus rhoncus finibus. Donec et purus mollis, lacinia mauris ac, semper sem. Aliquam erat volutpat. Ut pulvinar sit amet enim a suscipit. Aenean mollis, dui in lobortis ornare, est justo ornare urna, non feugiat est sapien eu nibh. Morbi accumsan aliquam iaculis.

Aliquam erat volutpat. Sed sem dolor, interdum ut ultrices id, mollis sed sem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus varius augue sed purus consectetur, a porttitor dui ornare. Sed tincidunt sagittis magna nec commodo.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

HTML

<div class="top-aligned-icon">
    <div class="icon-circle">
        <i class="fas fa-times"></i>
    </div>
    <div>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. In egestas efficitur porta. Etiam ac euismod enim. Praesent consequat porta dolor sed porta. Suspendisse dapibus nulla id ex gravida, a sollicitudin risus lacinia. Aliquam dapibus rhoncus finibus. Donec et purus mollis, lacinia mauris ac, semper sem. Aliquam erat volutpat. Ut pulvinar sit amet enim a suscipit. Aenean mollis, dui in lobortis ornare, est justo ornare urna, non feugiat est sapien eu nibh. Morbi accumsan aliquam iaculis. 
	   
	   Aliquam erat volutpat. Sed sem dolor, interdum ut ultrices id, mollis sed sem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus varius augue sed purus consectetur, a porttitor dui ornare. Sed tincidunt sagittis magna nec commodo..
    </div>
</div>

<div class="centered-icon">
    <div class="icon-circle">
        <i class="fas fa-times"></i>
    </div>
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In egestas efficitur porta. Etiam ac euismod enim. Praesent consequat porta dolor sed porta. Suspendisse dapibus nulla id ex gravida, a sollicitudin risus lacinia. Aliquam dapibus rhoncus finibus. Donec et purus mollis, lacinia mauris ac, semper sem. Aliquam erat volutpat.</span>
</div>

<div class="centered-icon">
    <div class="icon-circle">
        <i class="fas fa-times"></i>
    </div>
    <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In egestas efficitur porta.</span>
</div>

Assets

Tooltip

HTML

<button class="tooltip-top" data-tooltip="Tooltip en haut">Tooltip Haut</button>
<button class="tooltip-right" data-tooltip="Tooltip à droite">Tooltip Droite</button>
<button class="tooltip-bottom" data-tooltip="Tooltip en bas">Tooltip Bas</button>
<button class="tooltip-left" data-tooltip="Tooltip à gauche">Tooltip Gauche</button>

Snippet

Assets

Fil d’ariane

SHORTCODE

[attps-breadcrumb]

HTML

<nav class="breadcrumb" aria-label="Fil Ariane">
	<ul class="breadcrumb-list">
		<li class="breadcrumb-item"><a href="#"><i class="fa-regular fa-house-blank"></i></a></li>
		<li class="breadcrumb-item active" aria-current="page">Assets</li>
	</ul>
</nav>

<nav class="breadcrumb" aria-label="Fil Ariane">
	<ul class="breadcrumb-list">
		<li class="breadcrumb-item"><a href="#">Accueil</a></li>
    	<li class="breadcrumb-item active" aria-current="page">Assets</li>
  	</ul>
</nav>

Assets

Image

HTML

<div class="col stl-kenburn-wrapper stl-kenburn">
  <img src="https://placehold.co/600x400/EEE/31343C">
</div>
  
<img src="https://placehold.co/600x400/EEE/31343C" class="stl-radius">

<img src="https://placehold.co/600x400/EEE/31343C" class="stl-effect">

Snippet + ACF
Add-on

Swiper

.swiper-center pour commencer le slider avec un objet centré

.swiper-strict pour un carousel défilent
Ajouter swiper-button-top-right ou .swiper-button-bottom-right pour afficher les flèches en haut/bas droite

.swiper-one pour une seule image par slide

SHORTCODE

[attps-swiper]

HTML

<div class="swiper swiper-*****">
    <div class="swiper-wrapper">
      <div class="swiper-slide"><img src="https://placehold.co/600x400.png"></div>
      <div class="swiper-slide"><img src="https://placehold.co/600x400.png"></div>
      <div class="swiper-slide"><img src="https://placehold.co/600x400.png"></div>
      <div class="swiper-slide"><img src="https://placehold.co/600x400.png"></div>
      <div class="swiper-slide"><img src="https://placehold.co/600x400.png"></div>
      <div class="swiper-slide"><img src="https://placehold.co/600x400.png"></div>
    </div>
    <div class="swiper-button-******">
    	<div class="swiper-button-prev"></div> // A inverser si top/bottom right
    	<div class="swiper-button-next"></div>
    </div>
    <div class="swiper-pagination"></div>
</div>

<script>
    var swiper = new Swiper(".swiper-*****", {
      slidesPerView: 4,
      spaceBetween: 30,
      centeredSlides: true,
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
	  breakpoints: {
    640: {
      slidesPerView: 2,
      spaceBetween: 20
    },
    1024: {
      slidesPerView: 3,
      spaceBetween: 30
    }
  },
    });
</script>

Snippet + ACF

Add-on

Galerie

[attps-galerie]

SHORTCODE

[attps-galerie]

HTML

<div class="galerie"> 
            <figure data-index="1">
                <img src="#" alt="Ma description" />
                <figcaption>Ma description</figcaption>
            </figure> 
        </div>
        
        <div id="imageModal" class="image-modal">
            <div class="modal-content">
                <span class="close-btn"><i class="fa-thin fa-xmark"></i></span>
                <div class="modal-image-container">
                    <img id="modalImage" src="" alt="">
                    <div id="modalCaption" class="modal-caption"></div>
                </div>
                <div class="modal-nav">
                    <button class="nav-btn prev-btn"><i class="fa-thin fa-arrow-left"></i></button>
                    <button class="nav-btn next-btn"><i class="fa-thin fa-arrow-right"></i></button>
                </div>
            </div>
        </div>

Snippet + ACF

Add-on

Galerie Scroll

[attps-galeries]

SHORTCODE

[attps-galeries]

HTML

<div class="dual-gallery-container">
		<div class="gallery-wrapper gallery-ltr" id="swiper-gallery-1">
			<div class="swiper-container swiper-initialized swiper-horizontal swiper-free-mode swiper-backface-hidden">
				<div aria-live="polite" class="swiper-wrapper">
					<div aria-label="1 / 8" class="swiper-slide swiper-slide-active" data-swiper-slide-index="0" role="group">
						<div class="slide-inner">
							<img alt="" class="gallery-image" src="https://insomnia.attps.dev/img.jpg">
						</div>
					</div>

					...

				</div>
				<span aria-atomic="true" aria-live="assertive" class="swiper-notification"></span>
			</div>
		</div>

		<div class="gallery-wrapper gallery-rtl" id="swiper-gallery-2">
			<div class="swiper-container swiper-initialized swiper-horizontal swiper-free-mode swiper-backface-hidden">
				<div aria-live="polite" class="swiper-wrapper">
					<div aria-label="1 / 8" class="swiper-slide swiper-slide-active" data-swiper-slide-index="0" role="group" >
						<div class="slide-inner"><img alt="Alternatif" class="gallery-image" src="https://insomnia.attps.dev/img.jpg"></div>
					</div>
					
					...

				</div><span aria-atomic="true" aria-live="assertive" class="swiper-notification"></span>
			</div>
		</div>
</div>

<script>
    document.addEventListener("DOMContentLoaded", function() {
        // Configuration initiale des conteneurs pour éviter les "trous"
        const gallery1Wrapper = document.querySelector("#swiper-gallery-1 .swiper-wrapper");
        const gallery2Wrapper = document.querySelector("#swiper-gallery-2 .swiper-wrapper");
        
        if (gallery1Wrapper) {
            const slides1 = gallery1Wrapper.querySelectorAll(".swiper-slide");
            if (slides1.length < 6) {
                // Dupliquer les slides si nécessaire pour remplir l'espace
                for (let i = 0; i < slides1.length; i++) {
                    const clone = slides1[i].cloneNode(true);
                    gallery1Wrapper.appendChild(clone);
                }
            }
        }
        
        if (gallery2Wrapper) {
            const slides2 = gallery2Wrapper.querySelectorAll(".swiper-slide");
            if (slides2.length < 6) {
                // Dupliquer les slides si nécessaire pour remplir l'espace
                for (let i = 0; i < slides2.length; i++) {
                    const clone = slides2[i].cloneNode(true);
                    gallery2Wrapper.appendChild(clone);
                }
            }
        }

        // Initialiser les Swipers
        const swiper1 = new Swiper("#swiper-gallery-1", {
            slidesPerView: 2,
            spaceBetween: 20,
            freeMode: true,
            loop: true,
            loopAdditionalSlides: 5,
            loopFillGroupWithBlank: true,
            breakpoints: {
                768: {
                    slidesPerView: 3,
                }
            }
        });

        const swiper2 = new Swiper("#swiper-gallery-2", {
            slidesPerView: 2,
            spaceBetween: 20,
            freeMode: true,
            loop: true,
            loopAdditionalSlides: 5,
            loopFillGroupWithBlank: true,
            breakpoints: {
                768: {
                    slidesPerView: 3,
                }
            }
        });

        // Positionnement initial de la seconde galerie
        if (gallery2Wrapper) {
            // Déplacer le wrapper à sa position de départ pour éviter le "trou" à gauche
            gsap.set("#swiper-gallery-2 .swiper-wrapper", {
                x: "0%"
            });
        }

        // Initialiser l'animation GSAP avec ScrollTrigger
        gsap.registerPlugin(ScrollTrigger);

        // Animation de la première galerie (de gauche à droite)
        gsap.to("#swiper-gallery-1 .swiper-wrapper", {
            scrollTrigger: {
                trigger: "#swiper-gallery-1",
                start: "top bottom",
                end: "bottom top",
                scrub: 1
            },
            x: "-25%",
            ease: "none"
        });

        // Animation de la deuxième galerie (de droite à gauche)
        // On part de 0 et on va vers un nombre positif pour aller vers la gauche
        gsap.fromTo("#swiper-gallery-2 .swiper-wrapper",
            { x: "0%" }, // valeur de départ
            {
                scrollTrigger: {
                    trigger: "#swiper-gallery-2",
                    start: "top bottom",
                    end: "bottom top",
                    scrub: 1
                },
                x: "25%", // valeur d'arrivée
                ease: "none"
            }
        );
    });
    </script>

Add-on

GSAP
ScrollSpeed

HTML

<img src="https://placehold.co/600x400/EEE/31343C" class="scroll-speed-element">

<script>
  gsap.to(".scroll-speed-element", {
    y: 300, // Element se déplace verticalement
    scrub: 1, // Synchronisé avec la vitesse du scroll
    scrollTrigger: {
      trigger: ".scroll-speed-element",
      start: "top 100%",
      end: "top 10%",
      scrub: true,
    }
  });
</script>

Add-on

GSAP
Scroll Grow

HTML

<div class="image-container">
        <img src="https://placehold.co/600x400.png" class="scroll-image" id="zoomImage">
    </div>

<script>
        window.addEventListener("load", function() {
            gsap.fromTo("#zoomImage", 
                { 
                    width: "400px" // Taille de départ
                },
                {
                    width: "90vw", 
                    ease: "power1.inOut",
                    scrollTrigger: {
                        trigger: ".image-container",
                        start: "top top", 
                        end: "bottom center", 
                        scrub: true, 
                        markers: false, 
                    }
                });

            gsap.to(".scroll-info", {
                opacity: 0,
                duration: 1,
                scrollTrigger: {
                    trigger: "body",
                    start: "top top+=100",
                    end: "top top+=200",
                    scrub: true,
                }
            });
        });
    </script>

Add-on

GSAP
Titre Mask

Verso

Remontez pour voir l'animation s'inverser

HTML

<style>
.fx-line {
            display: block;
            overflow: hidden;
            margin: 0;
            padding: 0;
        }

        .fx-txt {
            display: inline-block;
            font-size: 10vw !important;
            margin: 0;
            padding: 0;
            transform: translateY(120%);
            opacity: 0;
            color: #000;
        }
</style>


   		<div class="fx-line">
            <h1 class="fx-txt">Verso</h1>
        </div>


<script>
        document.addEventListener("DOMContentLoaded", () => {
            gsap.registerPlugin(ScrollTrigger);

            const title = document.querySelector(".fx-txt");

            gsap.to(title, {
                y: "0%",
                opacity: 1,
                duration: 1,
                ease: "expo.out",
                scrollTrigger: {
                    trigger: title,
                    start: "top 80%", 
                    end: "top 20%", 
                    scrub: true,
                    toggleActions: "play none none reverse"
                }
            });

            gsap.to(title, {
                backgroundPosition: "0%",
                duration: 1,
                ease: "power2.inOut",
                scrollTrigger: {
                    trigger: title,
                    start: "top 80%",
                    end: "top 20%",
                    scrub: true,
                    toggleActions: "play none none reverse"
                }
            });
        });
 </script>

Add-on

GSAP
Titre Elastik

Titre Elastik

HTML

<div class="content-gsap c1">
  <h1>Titre Elastik</h1>
</div>

<script>
// onscroll text animation
gsap.to(".c1 h1", {
  duration: 2,
  animation: Expo.easeIn,
  transform: "translateX(-60%)",
  // scroll trigger code
  scrollTrigger: {
    trigger: ".c1",
    start: "top 0%",
    end: "top -150%",
    scrub: 2,
    pin: true
  }
});
</script>

Add-on

GSAP
Fade

HTML

<style>
 .fade-element {
      opacity: 0;
    }
</style>

<img src="https://placehold.co/600x400/EEE/31343C" class="fade-element">

<script>
  gsap.fromTo(".fade-element", 
    { opacity: 0, y: 50 },  // Element commence avec une légère translation vers le bas
    { 
      opacity: 1, 
      y: 0,  
      duration: 2.5, // Durée plus longue pour une transition plus douce
      ease: "power2.out", // Adoucissement de l’animation
      scrollTrigger: {
        trigger: ".fade-element",
        start: "top 80%", 
        end: "top 20%",   
        scrub: 1.5, // Ralentit la transition en fonction du scroll
      }
    }
  );
</script>

Add-on

GSAP
Rotate

HTML

<img src="https://placehold.co/600x400/EEE/31343C" class="rotate-element">

<script>
gsap.to(".rotate-element", {
  rotation: 360, // Rotation complète
  ease: "none",
  scrollTrigger: {
    trigger: ".rotate-element",
    start: "top 90%", // Commence la rotation quand élément est visible à 90% de la hauteur de la fenêtre
    end: "bottom top", // Continue la rotation 
    scrub: true,
  }
});
</script>

Add-on

GSAP
Clip

HTML

<img src="https://placehold.co/600x400/EEE/31343C" class="clip-element">

<script>
gsap.fromTo(".clip-element", {
  clipPath: "inset(100% 0 0 0)", // Element est entièrement caché au début
}, {
  clipPath: "inset(0% 0 0 0)",   // Element est révélé pendant le scroll
  duration: 2,
  ease: "power1.inOut",
  scrollTrigger: {
    trigger: ".clip-element",
    start: "top 75%",
    end: "top 25%",
    scrub: true,
  }
});
</script>

Add-on

GSAP
Sticky

HTML

<img src="https://placehold.co/600x400/EEE/31343C" class="sticky-element">

<script>
ScrollTrigger.create({
  trigger: ".sticky-element",
  start: "top top", // Elément devient sticky au début de la page
  end: "+=500",     // Il reste sticky pendant 500px de défilement
  pin: true,        // Pin Elément (le rend sticky)
  scrub: true,
});
</script>

Add-on

GSAP
Change Color

HTML

<style>
  .color-element {
    width: 500px;
    height: 80vh;
    background-color: blue;
  }
</style>

<div class="color-element"></div>

<script>
gsap.to(".color-element", {
  backgroundColor: "#ff0000", // Change la couleur de fond en rouge
  duration: 1,
  ease: "none",
  scrollTrigger: {
    trigger: ".color-element",
    start: "top 80%",
    end: "top 20%",
    scrub: true,
  }
});
</script>

Add-on

GSAP
Swiper Fixed

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

HTML

<div class="swiper-fixed swiper-container">
  <div class="swiper-wrapper">
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    <div class="swiper-slide">Slide 4</div>
    <div class="swiper-slide">Slide 5</div>
  </div>
</div>

<script>
const swiperfixed = new Swiper(".swiper-fixed", {
  slidesPerView: 1,
  spaceBetween: 30,
});


gsap.to(swiperfixed.slides, {
  xPercent: -100 * (swiperfixed.slides.length - 1), // Faire défiler les slides
  ease: "none",
  scrollTrigger: {
    trigger: ".swiper-fixed",
    start: "top top",
    end: "+=5000", // Contrôle la durée du scroll
    scrub: true, // Synchronisation avec le scroll
    pin: true, // Garde le Swiper fixe pendant le scroll
    onLeave: () => {
      // Quand le dernier slide est passé, on passe à la section suivante
      gsap.to(window, {scrollTo: ".next-section", duration: 1});
    },
  },
});

</script>

INSOMNIA

Insomnia

Support

Introduction

Titres

H1. Votre exemple

H2. Votre exemple

H3. Votre exemple

H4. Votre exemple

Paragraphes

Citation

Bouton

Liens

Listes

Badges

Alertes

Grille

Onglets

Accordéon

Icônes

Icônes (liste)

Tooltip

Fil d’ariane

Image

Swiper

Galerie

Galerie Scroll

GSAPScrollSpeed

GSAPScroll Grow

GSAPTitre Mask

Verso

GSAPTitre Elastik

Titre Elastik

GSAPFade

GSAPRotate

GSAPClip

GSAPSticky

GSAPChange Color

GSAPSwiper Fixed

GSAP
ScrollSpeed

GSAP
Scroll Grow

GSAP
Titre Mask

GSAP
Titre Elastik

GSAP
Fade

GSAP
Rotate

GSAP
Clip

GSAP
Sticky

GSAP
Change Color

GSAP
Swiper Fixed