Astuces CSS et JavaScript pour donner vie à votre site statique

Je travaille sur mon site depuis quelques semaines et je voulais lui donner un peu de dynamisme. Cet article ne concerne pas la création d'une page Web. Je vais vous montrer des extraits prêts à l'emploi avec des explications.

---

Animation 3D dans JS

Le premier truc est un merveilleux effet 3D dans JS.





Comme vous pouvez le voir, lorsque le pointeur de la souris passe sur cette "carte", les éléments qu'elle contient acquièrent une tridimensionnalité.



Comment faire



Tout d'abord, le div HTML est créé:

<div class="card">
  <div class="header">
    <img src='image.png' alt="image">
  </div>
  <div class="info">
    <h1 class="title"><a href="https://hackerone.com/hensis">Hackerone</a></h1>
    <h3>Started on 6/20 Signal : 5.67 Reputation : 360 Impact : 26.25</h3>
  </div>
</div>

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Ici, nous avons une classe principale (carte) et deux autres classes à l'intérieur de la carte (en-tête et info). L'en-tête sera la classe contenant l'image (dans notre exemple, le logo Medium), et info contiendra le texte de la carte. Ajoutons maintenant du CSS pour améliorer l'apparence de la carte.

.card {
    transform-style: preserve-3d;
    min-height: 64vh;
    width: 20vw;
    border-radius: 30px;
    padding: 0rem 5rem;
    box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2), 0px 0px 50px rgba(0, 0, 0, 0.2);
}

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Ici, j'ai déclaré la hauteur, la largeur, la bordure, le rembourrage et l'ombre. Actualisez la page et vous devriez voir les résultats. La dernière étape consiste à obtenir un effet 3D lorsque vous passez votre souris sur la carte. Pour cela, j'ai utilisé JS:

// declaring variables

const card = document.querySelector(".card");
const title = document.querySelector(".title");
const header = document.querySelector(".header img");
const description = document.querySelector(".info h3");

// Animate In

card.addEventListener("mouseenter", (e) => {
  card.style.transition = "none";
  title.style.transform = "translateZ(3px)";
  header.style.transform = "translateZ(3px) rotateZ(0deg)";
  description.style.transform = "translateZ(3px)";
});

// Animate Out

card.addEventListener("mouseleave", (e) => {
  card.style.transition = "all 0.5s ease";
  card.style.transform = `rotateY(0deg) rotateX(0deg)`;
  title.style.transform = "translateZ(0px)";
  header.style.transform = "translateZ(0px) rotateZ(0deg)";
  description.style.transform = "translateZ(0px)";
});

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

1. Déclarez des variables.
2. Créez deux écouteurs d'événements pour la carte.
3. Dans mouseenter, traduisez Z en 3 pixels pour le titre, l'en-tête et la description. Vous pouvez également décider de faire pivoter ces éléments ou non (rotateZ).
4. À la sortie de la souris, ramenez tout à la normale.

Voilà: vous avez une belle animation 3D. Bien sûr, c'est brut maintenant. Vous pouvez ajouter du CSS partout pour changer la largeur, la couleur, etc.

Découvrez Vanta.js pour l'animation d'arrière-plan

Vous en avez assez des couleurs et des images statiques sur l'arrière-plan de votre page Web? VantaJs est conçu pour donner vie à l'arrière-plan:







Comment c'est fait



C'est assez simple. Ajoutez le code suivant au HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r121/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
<script>
  VANTA.GLOBE({
  el: "#htmlid",
  mouseControls: true,
  touchControls: true,
  gyroControls: true,
  minHeight: 200.00,
  minWidth: 200.00,
  scale: 1.00,
  scaleMobile: 1.00
  })
</script>

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Cela définira l' arrière- plan du globe Vanta.js sur le htmlid.



Pour basculer entre eux, remplacez VANTA.GLOBE par VANTA. [Backgroundname]. Bien sûr, avant cela, vous devez ajouter le cdn.jsdelivr.net/npm/vanta@latest/dist/vanta correspondant . [Backgroundname] .min.js

ScrollReveal

Pour ceux qui ne connaissaient pas cette fantastique bibliothèque JS, ScrollReveal peut afficher des éléments lorsque vous faites défiler une page Web:







Comment c'est fait

1. Ajoutez à l'en-tête de votre HTML.
2. Dans le fichier JS, écrivez:

ScrollReveal().reveal('.htmlclass',{ delay: 400 })
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Le code rendra un élément avec la classe .htmlclass avec un délai de 400 ms lors du défilement de la page

Changer la taille et la couleur des lettres

Cette petite astuce CSS est vraiment impressionnante lorsqu'elle est utilisée correctement:







Comment faire



Créez de nouveaux éléments d'étendue HTML et spécifiez leur classe:

<span class="change">T</span><span class="change">e</span><span class="change">s</span><span class="change">t</span>

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

3. Application du CSS: survolez, nous changeons la taille des lettres et leur couleur:

.blast:hover {
    color:#08fdd8;
    font-size: 30px;
}

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Maintenant, lorsque vous survolez les lettres, vous verrez comment elles changent de taille et de couleur. Pour obtenir un effet encore plus dynamique, je suggère de créer une classe distincte pour chaque lettre avec différentes tailles et couleurs. Alternativement, vous pouvez appliquer CSS: hover à chaque type d'élément en HTML. Par exemple, je l'ai également appliqué à mon formulaire de contact:

Propriété d'animation

Nous avons complété le matériel par une description d'une propriété tirée d'un article de Chris Coyer.



La propriété animation en CSS peut être utilisée pour animer de nombreuses autres propriétés CSS telles que la couleur , la couleur d' arrière-plan , la hauteur ou la largeur . Chaque animation doit être définie à l'aide de @keyframes, qui est ensuite appelée à l'aide de la propriété animation, par exemple:

.element {
  animation: pulse 5s infinite;
}

@keyframes pulse {
  0% {
    background-color: #001F3F;
  }
  100% {
    background-color: #FF4136;
  }
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Chaque règle @keyframes définit ce qui doit se passer à certains points de l'animation. Par exemple, 0% est le début de l'animation et 100% est la fin. Ces images clés peuvent être manipulées avec la propriété de raccourci d'animation ou ses huit sous-propriétés pour fournir plus de contrôle sur les images clés.

Sous-propriétés

• animation-name: déclare le nom de la règle @keyframes à contrôler.
• animation-duration: durée d'un cycle d'animation.
• animation-time-function: définit des courbes d'accélération prédéfinies telles que la facilité ou la linéarité.
• animation-delay: le temps entre le chargement de l'élément et le début de la séquence d'animation ( exemples intéressants ).
• animation-direction: définit la direction de l'animation après la boucle. Sa valeur par défaut est réinitialisée à chaque cycle.
• animation-iteration-count: combien de fois l'animation doit être exécutée.
• animation-fill-mode: définit les valeurs appliquées avant / après l'animation.
  
  Par exemple, vous pouvez définir le dernier état de l'animation pour qu'il reste à l'écran, ou vous pouvez le définir pour revenir en arrière lorsque l'animation a commencé.
• animation-play-state: pause / lecture de l'animation.

Ensuite, ces sous-propriétés peuvent être appliquées comme ceci:

@keyframes stretch {
  /* declare animation actions here */
}

.element {
  animation-name: stretch;
  animation-duration: 1.5s; 
  animation-timing-function: ease-out; 
  animation-delay: 0s;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running; 
}

/*
  is the same as:
*/

.element {
  animation: 
    stretch
    1.5s
    ease-out
    0s
    alternate
    infinite
    none
    running;
}

      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Voici une liste complète des valeurs que chacune de ces propriétés imbriquées peut prendre:

Quelques pas

Si l'animation a les mêmes propriétés de début et de fin, il est utile de séparer les valeurs 0 et 100% dans @keyframes par des virgules:

@keyframes pulse {
  0%, 100% {
    background-color: yellow;
  }
  50% {
    background-color: red;
  }
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Animations multiples

Vous pouvez séparer les valeurs par des virgules pour déclarer également plusieurs animations dans le sélecteur. Dans l'exemple ci-dessous, nous voulons changer la couleur du cercle dans @keyframe tout en le déplaçant d'un côté à l'autre avec une propriété différente.

.element {
  animation: 
    pulse 3s ease infinite alternate, 
    nudge 5s linear infinite alternate;
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Performance

L'animation de la plupart des propriétés est un problème de performances , nous devons donc faire attention avant d'animer une propriété. Cependant, certaines combinaisons peuvent être animées en toute sécurité:

• transformer: translate ()
  
  
• transformer: échelle ()
  
  
• transformation: rotation ()
  
  
• opacité
  
  

Quelles propriétés pouvez-vous animer?

MDN a une liste de propriétés CSS qui peuvent être animées . Ils ont tendance à être des couleurs et des nombres. Un exemple de propriété non animée est background-image.

Prise en charge du navigateur

Ces données de support de navigateur sont tirées du site Web de Caniuse pour plus d'informations. Le nombre signifie que le navigateur prend en charge la fonction dans cette version et au-dessus.



Dessus de la table



Mobile

Préfixes

Bien que la prise en charge de cette propriété soit suffisamment bonne dans les navigateurs modernes, nous souhaitons peut-être prendre en charge autant de navigateurs plus anciens que possible. Dans ce cas, vous devez utiliser des préfixes de fournisseur:

.element {
  -webkit-animation: KEYFRAME-NAME 5s infinite;
  -moz-animation:    KEYFRAME-NAME 5s infinite;
  -o-animation:      KEYFRAME-NAME 5s infinite;
  animation:         KEYFRAME-NAME 5s infinite;
}

@-webkit-keyframes KEYFRAME-NAME {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes KEYFRAME-NAME {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes KEYFRAME-NAME {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes KEYFRAME-NAME {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
    

Ces astuces sont parfaites pour donner vie à votre site de cartes de visite ou au site d'un projet pour animaux de compagnie sur lequel vous travaillez. Si vous avez vos propres astuces, je vous encourage à les partager dans les commentaires. Et n'oubliez pas le code promo HABR , qui offre une remise supplémentaire de 10% par rapport à celui indiqué sur le bandeau.

• Profession développeur Web
• Cours JavaScript