Utilisez JavaScript pour implémenter des effets spéciaux d'image et des effets de transition

Avec le développement continu de la technologie Web, de plus en plus d'effets spéciaux et d'effets de transition sont appliqués à la conception Web. Parmi eux, les effets spéciaux d’image et les effets de transition sont les plus courants dans la conception Web. JavaScript est un langage de script couramment utilisé dans le développement front-end, et il présente également certains avantages dans la réalisation d'effets spéciaux d'image et d'effets de transition. Cet article explique comment utiliser JavaScript pour implémenter des effets spéciaux d'image et des effets de transition.

1. Effets spéciaux de l'image

1. Survol de la souris pour agrandir l'image

Quand la souris survole l'image , Doublez la taille de l'image grâce à JavaScript. Cet effet peut rendre l'image plus visible et attirer l'attention de l'utilisateur.

Le code d'implémentation est le suivant :

img.onmouseover = function() {
  this.style.transform = "scale(2)";
}
img.onmouseout = function() {
  this.style.transform = "scale(1)";
}

2. Picture slide

Déplacez l'image dans une direction (vers le haut , vers le bas, faites glisser votre doigt vers la gauche ou la droite pour rendre la page plus fluide et plus vivante.

Le code d'implémentation est le suivant :

function slide(direction) {
  switch (direction) {
    case "up":
      img.style.top = "-200px";
      break;
    case "down":
      img.style.top = "200px";
      break;
    case "left":
      img.style.left = "-200px";
      break;
    case "right":
      img.style.left = "200px";
      break;
  }
}

3. Zoom photo

Le zoom photo peut agrandir ou réduire l'image pour le rendre plus clair ou plus petit. Dans le même temps, des effets fluides peuvent être obtenus grâce à une animation en dégradé.

Le code d'implémentation est le suivant :

function zoom(scale) {
  img.style.transition = "transform 0.5s ease-in-out";
  img.style.transform = "scale(" + scale + ")";
}

2. Effet de transition

1. Transition dégradé

function changeColor(color) {
  img.style.background = color;
  img.style.transition = "background 0.5s ease-in-out";
}

Fade in and out

function fade(type) {
  switch (type) {
    case "in":
      img.style.opacity = "1";
      img.style.transition = "opacity 0.5s ease-in-out";
      break;
    case "out":
      img.style.opacity = "0";
      img.style.transition = "opacity 0.5s ease-in-out";
      break;
  }
}

rotation

function rotate(degree) {
  img.style.transform = "rotate(" + degree + "deg)";
  img.style.transition = "transform 0.5s ease-in-out";
}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!