HOWTO · JavaScript

Fondu d'image à l'aide de JavaScript

Le fondu enchaîné d'une image pour créer une interface utilisateur visuellement attrayante peut être accompli à l'aide de certaines méthodes et propriétés. La méthode requestAnimationFrame et la propriété className constituent la meilleure méthode de fondu dans une image.

Par Anika Tabassum EraPublié 2022-06-13Mis à jour 2024-02-15
Sur cette page

Sans JavaScript, le style de fondu d’une image peut être évalué avec CSS. Mais le processus n’est pas fiable car nous ne pouvons pas gérer cela de manière dynamique.

Ainsi, la manière JavaScript de jouer avec la méthode requestAnimationFrame() au lieu de dépendre entièrement de CSS et la méthode setTimeout() rend le chemin plus rapide et plus rapide. Dans le segment d’exemple, nous verrons une instance de code qui inclut l’implémentation de la méthode requestAnimationFrame() et un code qui peut s’estomper dans les images faisant référence à la propriété className.

Utilisez la propriété className pour fondre l’image

Nous allons générer une balise img avec un src viable. Un événement cliquable est présent pour initier le fondu d’entrée de l’image. Le travail principal ici est avec la propriété className qui fera référence à un certain bloc CSS et l’alignera avec l’instance img id.

Code - Fichier HTML :

<img id="img" style="width: 200px" src="https://images.unsplash.com/photo-1653450283266-c788c2ca4ab2?ixlib=rb-1.2.1&raw_url=true&q=80&fm=jpg&crop=entropy&cs=tinysrgb&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=872" alt="Image 1">
<br><br>
<button type="button" onclick="myFunction()">Change</button>

Code - Fichier CSS :

img {
            opacity: 0;
            filter: alpha(opacity=40);
    }
.animation {
            -webkit-transition: 1s;
            -moz-transition: 1s;
            -o-transition: 1s;
            transition: 1s;
            opacity: 1;
        }

Code - Fichier JavaScript :

function myFunction() {
  document.getElementById('img').className = 'animation';
}

Production:

Utiliser la propriété className pour fondre l’image

Utilisez la méthode requestAnimationFrame() pour fondre l’image

A cet égard, nous aurons une fonction fadeIn qui prendra l’instance de la balise img. Plus tard, la fonction fadeIn fonctionnera sur le requestAnimationFrame() et le setTimeout(), et un laps de temps est localisé en fonction des détails du navigateur actuel.

Code - Fichier HTML :

<img id="what" src="https://images.unsplash.com/photo-1653372500616-ff0a2847f7ca?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774" draggable="true" ondragstart="drag(event)" width="200" height="150">
<br><br>
<button onclick="myFunction()">Change</button>

Code - Fichier CSS :

img {
    opacity: 0;
    filter: alpha(opacity=40);
}

Code - Fichier JavaScript :

function fadeIn(el) {
  el.style.opacity = 0;
  var tick = function() {
    el.style.opacity = +el.style.opacity + 0.05;
    if (+el.style.opacity < 1) {
      var x = (window.requestAnimationFrame && requestAnimationFrame(tick)) ||
          setTimeout(tick, 16)
    }
  };
  tick();
}

function myFunction() {
  var el = document.getElementById('what');
  console.log(el);
  fadeIn(el);
}

Production:

Utilisez la méthode requestAnimationFrame() pour fondre l’image

À propos de l’auteur

Anika Tabassum Era

Era is an observer who loves cracking the ambiguos barriers. An AI enthusiast to help others with the drive and develop a stronger community.

Voir le profil de l’auteur
LinkedInFacebook