Accueil > Tutoriels > Développement > Animer son site

Animer son site

Vous avez désormais un site qui visuellement tient la route et qui est compatible avec tous les périphériques. Néanmoins il manque de dynamisme. Nous allons donc voir quelques concept qui vont permettre à votre site d'être plus vivant.

Si ce n'est pas déjà fait récupérez le code HTML, CSS et JAVASCRIPT de cette page et placez le contenu en respectant cette hierarchie :

Mon projet

images

test.png

style.css

script.js

index.html

Télécharger l'image ici : ici et recadrer l'image : avec cet outil si besoin

Ajouter un hover

Le hover en css permet de déclencher un comportement en fonction du passage du curseur du visiteur sur un ou plusieurs éléments.

A l'interieur du "< main >", entrourez l'image et les paragraphes entre des balises "< article >" de sorte d'avoir :


    <article>
        
    <p><img src="images/test.png" alt="Mon article" /></p>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt purus sapien,
    at consectetur nisi suscipit ac. Ut sed nunc vestibulum, suscipit quam quis, sagittis odio.
    Ut at tellus euismod, hendrerit nibh non, aliquam nisi.
    Curabitur congue metus vel justo tincidunt, ut tincidunt odio rutrum.
    Sed ipsum nisl, gravida at fringilla et, consectetur eget lorem. Sed nisi dolor,
    aliquet sit amet elit sit amet, ornare rhoncus lacus.
    Praesent porttitor mattis sem vitae mollis.
    Ut cursus sem ante, id tristique quam sodales eget.
    Fusce et dignissim metus, condimentum sodales velit.
    Quisque metus arcu, blandit nec elit sit amet, vestibulum pharetra eros.
    Etiam dignissim mauris non elementum tristique.
    Fusce facilisis ultricies ultrices.</p>
        
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt purus sapien,
    at consectetur nisi suscipit ac. Ut sed nunc vestibulum, suscipit quam quis, sagittis odio.
    Ut at tellus euismod, hendrerit nibh non, aliquam nisi.
    Curabitur congue metus vel justo tincidunt, ut tincidunt odio rutrum.
    Sed ipsum nisl, gravida at fringilla et, consectetur eget lorem. Sed nisi dolor,
    aliquet sit amet elit sit amet, ornare rhoncus lacus.
    Praesent porttitor mattis sem vitae mollis.
    Ut cursus sem ante, id tristique quam sodales eget.
    Fusce et dignissim metus, condimentum sodales velit.
    Quisque metus arcu, blandit nec elit sit amet, vestibulum pharetra eros.
    Etiam dignissim mauris non elementum tristique.
    Fusce facilisis ultricies ultrices.</p>
        
</article>

Et dans votre CSS ajoutez :



    article {
      transition: box-shadow .3s; /* Transition entre la valeur actuelle et le hover */
      margin: 10px;
      border-radius: 10px; /* Bord plus arrondi */
      border: 1px solid #ccc;
      background: #fff;
      padding: 20px;
    }
    
    article:hover {
      box-shadow: 0 0 11px rgba(33,33,33,.2); /* Ombre au survol */
    }

Ceci aura pour effet:

Ajouter des @keyframes

Les @keyframes sont une fonctionnalité CSS qui permet de définir des étapes intermédiaires (ou des points-clés) d'une animation. Ils permettent de spécifier les styles qui devraient être appliqués à un élément à différents moments de l'animation.

Ajoutez ceci dans votre CSS :



    #popup {
      opacity: 0; /* Le popup est initialement invisible */
      transform: translateY(20px); /* Le popup est décalé vers le haut de 20 pixels */
      animation: fadeInUp 1s ease-out forwards, moveUp 1s ease-out forwards; /* Utilisation de deux animations */
    }

    @keyframes fadeInUp {
      0% { opacity: 0; transform: translateY(20px); } /* À 0% de l'animation, le popup est invisible et décalé vers le haut */
      100% { opacity: 1; transform: translateY(0); } /* À 100% de l'animation, le popup est entièrement visible et à sa position initiale */
    }

    @keyframes moveUp {
      0% { transform: translateY(20px); } /* À 0% de l'animation, le popup est décalé vers le haut */
      100% { transform: translateY(0); } /* À 100% de l'animation, le popup est à sa position initiale */
    }

Ceci aura pour effet:

Utilisez CSS & JAVASCRPT

En cumulant vos connaissances en javascript et en CSS vous pourrez déclencher également d'autres paramètres en fonction des évènements. Exemple ici en changeant la valeur du bouton "actif" dans le menu lors du clic.

CSS :

Remplacez entièrement le code des précédents tutoriels pour le menu


    #monmenu {
        margin: auto;
        list-style-type: none;
        padding: 0;
    }

    nav #monmenu li {
        font-weight: bold;
        float: left;
        background-color: #eeeeee;
        padding: 10px;
        border: 1px solid #E6E6E6;
        list-style: none;
        margin: 5px;
        margin-top: 10px;
        text-transform: uppercase;
        display: inline-block;
        margin-right: 20px;
        cursor: pointer;
        transition: transform 0.3s ease-in-out;
    }

    nav #monmenu li:hover {
        transform: translateY(-5px);
    }

    nav #monmenu li.actif {
        background-color: darkslategrey;
        color: white;
    }

"transition" vous permet de modifier en douceur les valeurs des propriétés sur une durée spécifiée. Elle est couramment utilisée pour créer des animations fluides et des transitions entre différents états d'un élément, comme les effets de survol ou les expansions de menu.

"transform" est utilisée pour appliquer des transformations 2D ou 3D à un élément HTML. Ces transformations incluent des opérations telles que la translation (déplacement), la rotation, l'échelle et la déformation d'éléments sans affecter le flux normal du document.

JAVASCRIPT :



document.addEventListener("DOMContentLoaded", function() { // Code à exécuter une fois que le DOM est entièrement chargé c'est à dire lorsque le document HTML initial a été complètement chargé et analysé, sans attendre le chargement complet des ressources externes (telles que les images et les feuilles de style) et sans attendre que les scripts exécutés à la fin du document aient terminé leur exécution. 

  const items = document.querySelectorAll("#monmenu li");
  
  items.forEach(function(item) { // Boucle javascript 
      
    item.addEventListener("click", function() { // Ajout d'un listener
        
      items.forEach(function(item) { // Boucle sur tous les objets
        item.classList.remove("actif"); // Suppression de la valeur 'actif'
      });
        
      this.classList.add("actif"); // Ajout de l'actif uniquement sur le bouton cliqué
        
    }); 
      
  });
});

Ceci aura pour effet:

Vous commencez désormais à avoir des notions de base en HTML, CSS et JAVASCRIPT, ceci devrait vous permettre de faire vos premieres réalisations.

Code en entier

HTML



    <!DOCTYPE html>
<html lang="fr">
    <head>
        <title>Mon projet</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="css/style.css" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        
    <div id="popup">
        <button id="closepoup">Fermer</button>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt purus sapien,
        at consectetur nisi suscipit ac. Ut sed nunc vestibulum, suscipit quam quis, sagittis odio.
        Ut at tellus euismod, hendrerit nibh non, aliquam nisi.
        Curabitur congue metus vel justo tincidunt, ut tincidunt odio rutrum.
        Sed ipsum nisl, gravida at fringilla et, consectetur eget lorem. Sed nisi dolor,
        aliquet sit amet elit sit amet, ornare rhoncus lacus.</p>
        <form method="post"><input type="text" value="" placeholder="Votre adresse mail" /><input type="submit" value="Valider"></form>
    </div>

    <header>
        <h1>Mon projet</h1>
    </header>

    <nav>
        <ul id="monmenu">
            <li class="actif">Accueil</li>
            <li>A propos</li>
            <li>Contact</li>
        </ul>
    </nav>

    <main>
    
    <article>
        
    <p><img src="images/test.png" alt="Mon article" /></p>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt purus sapien,
    at consectetur nisi suscipit ac. Ut sed nunc vestibulum, suscipit quam quis, sagittis odio.
    Ut at tellus euismod, hendrerit nibh non, aliquam nisi.
    Curabitur congue metus vel justo tincidunt, ut tincidunt odio rutrum.
    Sed ipsum nisl, gravida at fringilla et, consectetur eget lorem. Sed nisi dolor,
    aliquet sit amet elit sit amet, ornare rhoncus lacus.
    Praesent porttitor mattis sem vitae mollis.
    Ut cursus sem ante, id tristique quam sodales eget.
    Fusce et dignissim metus, condimentum sodales velit.
    Quisque metus arcu, blandit nec elit sit amet, vestibulum pharetra eros.
    Etiam dignissim mauris non elementum tristique.
    Fusce facilisis ultricies ultrices.</p>
        
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tincidunt purus sapien,
    at consectetur nisi suscipit ac. Ut sed nunc vestibulum, suscipit quam quis, sagittis odio.
    Ut at tellus euismod, hendrerit nibh non, aliquam nisi.
    Curabitur congue metus vel justo tincidunt, ut tincidunt odio rutrum.
    Sed ipsum nisl, gravida at fringilla et, consectetur eget lorem. Sed nisi dolor,
    aliquet sit amet elit sit amet, ornare rhoncus lacus.
    Praesent porttitor mattis sem vitae mollis.
    Ut cursus sem ante, id tristique quam sodales eget.
    Fusce et dignissim metus, condimentum sodales velit.
    Quisque metus arcu, blandit nec elit sit amet, vestibulum pharetra eros.
    Etiam dignissim mauris non elementum tristique.
    Fusce facilisis ultricies ultrices.</p>
    
    </article>

    </main>

    <footer> <a href="#">Mon lien</a> 2024  </footer>
        
    <script src="js/script.js"></script>

    </body>
</html>

CSS



body {
    margin: 0;
    padding: 0px;
    background-color: #eeeeee;
    font-family: Arial;
}

header {
    margin: auto;
    padding: 10px;
    background-color: #e6e6e6;
    margin-bottom: 10px;
}

h1 {
    font-size: 50px;
    text-align: center;
}

nav {
    width: 100%;
    margin: auto;
    display: flex;
}

main {
    margin: auto;
    border: 5px solid #E6E6E6;
    padding: 20px;
    margin-bottom: 20px;
    margin-top: 20px;
}

main p img {
    width: 100%;
}

main p  {
    text-align: justify;
}

footer {
    width: 100%;
    margin: auto;
    text-align: center;
    background-color: #616161;
    height: 100px;
    padding: 20px;
    color: white;
}

footer a {
    color: white;
}

#monmenu {
    margin: auto;
    list-style-type: none;
    padding: 0;
}

nav #monmenu li {
    font-weight: bold;
    float: left;
    background-color: #eeeeee;
    padding: 10px;
    border: 1px solid #E6E6E6;
    list-style: none;
    margin: 5px;
    margin-top: 10px;
    text-transform: uppercase;
    display: inline-block;
    margin-right: 20px;
    cursor: pointer;
    transition: transform 0.3s ease-in-out;
}

nav #monmenu li:hover {
    transform: translateY(-5px);
}

nav #monmenu li.actif {
    background-color: darkslategrey;
    color: white;
}

#popup {
    margin-left: 10%;
    margin-right: 10%;
    width: 80%;
    background-color: white;
    border: 2px solid black;
    position: absolute;
    margin-top: 5%; 
    opacity: 0; /* Le titre est initialement invisible */
    transform: translateY(20px); /* Le titre est décalé vers le haut de 20 pixels */
    animation: fadeInUp 1s ease-out forwards, moveUp 1s ease-out forwards; /* Utilisation de deux animations */
}

#popup button {
    font-weight: bold;
    background-color: #eeeeee;
    padding: 10px;
    border: 1px solid #E6E6E6;
    margin: 5px;
    margin-top: 10px;
    text-transform: uppercase;
    width: 100%;
    margin: auto;
    text-align: right;
}

#popup p {
    text-align: justify;
    margin: 10px;
}

#popup input[type=text] {
    font-weight: bold;
    background-color: #eeeeee;
    padding: 10px;
    border: 1px solid #E6E6E6;
    margin: 5px;
    width: 50%;
    margin-left: 25%;
    margin-right: 25%;
}

#popup input[type=submit] {
    font-weight: bold;
    background-color: darkseagreen;
    padding: 10px;
    border: 1px solid green;
    margin: 5px;
    width: 50%;
    margin-left: 25%;
    margin-right: 25%;
}

article {
  transition: box-shadow .3s;
  margin: 10px;
  border-radius:10px;
  border: 1px solid #ccc;
  background: #fff;
  padding: 20px;
}

article:hover {
  box-shadow: 0 0 11px rgba(33,33,33,.2); 
}

@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(20px); } /* À 0% de l'animation, le titre est invisible et décalé vers le haut */
  100% { opacity: 1; transform: translateY(0); } /* À 100% de l'animation, le titre est entièrement visible et à sa position initiale */
}

@keyframes moveUp {
  0% { transform: translateY(20px); } /* À 0% de l'animation, le titre est décalé vers le haut */
  100% { transform: translateY(0); } /* À 100% de l'animation, le titre est à sa position initiale */
}

@media screen and (max-width: 480px) {

    main {
        width: 90%;
    }

    nav #monmenu li {
        width: 90%;
    }
    
    #popup {
        height: 60vh;
    }

}   

@media screen and (min-width: 480px) {
    
    header {
        width: 100%;
    }

    main {
        width: 60%;
    }

    #popup {
        height: 40vh;
    }
    
}

JAVASCRIPT




function hidediv(divId) {
    // Sélection de l'élément à fermer
    let divAfermer = document.getElementById(divId);
    // Masquer l'élément en lui attribuant un style display: none;
    divAfermer.style.display = "none";
}

let closepoup = document.getElementById("closepoup"); 
let popupId = "popup";

// Ajout d'un gestionnaire d'événements au clic sur closepoup
closepoup.addEventListener("click", function() {
    hidediv(popupId);
});


document.addEventListener("DOMContentLoaded", function() { // Code à exécuter une fois que le DOM est entièrement chargé c'est à dire lorsque le document HTML initial a été complètement chargé et analysé, sans attendre le chargement complet des ressources externes (telles que les images et les feuilles de style) et sans attendre que les scripts exécutés à la fin du document aient terminé leur exécution. 

  const items = document.querySelectorAll("#monmenu li");
  
  items.forEach(function(item) { // Boucle javascript 
      
    item.addEventListener("click", function() { // Ajout d'un listener
        
      items.forEach(function(item) { // Boucle sur tous les objets
        item.classList.remove("actif"); // Suppression de la valeur 'actif'
      });
        
      this.classList.add("actif"); // Ajout de l'actif uniquement sur le bouton cliqué
        
    }); 
      
  });
});