Fondu d'image à l'aide de JavaScript

Anika Tabassum Era 15 février 2024 JavaScript JavaScript Image
  1. Utilisez la propriété className pour fondre l’image
  2. Utilisez la méthode requestAnimationFrame() pour fondre l’image
Fondu d'image à l'aide de JavaScript

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&rsquo;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&rsquo;image

Vous aimez nos tutoriels ? Abonnez-vous à DelftStack sur YouTube pour nous aider à créer davantage de tutoriels vidéo de haute qualité. Abonnez-vous
Auteur: Anika Tabassum Era
Anika Tabassum Era avatar Anika Tabassum Era avatar

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

LinkedIn Facebook

Article connexe - JavaScript Image