Spot sur une image qui en laisse apparaitre une autre

**Belyce32** · 28/11/2018, 11h33

Bonjour,

J'ai déjà vu un effet sur un site que je tente de reproduire sans succès.
Le principe : une image
Au passage de la souris, le pointeur de celle ci est un rond (genre spotlight) et permet de laisser apparaître dans ce rond une autre image positionnée derrière, comme si la première devenait transparente.
Le rond de la souris n'est pas un zoom mais plutôt un focus.

J'ai trouvé ce tuto qui schématise ce que je veux, à la différence que l'image de premier est en fait une couleur
https://codepen.io/GeorgePark/pen/ELemzZ

Merci pour votre aide, je sèche !

**paoli121** · 28/11/2018, 16h06

je veux t'aider mais je comprends pas trop ce que tu veux. toi tu veux utiliser deux images?

**Belyce32** · 28/11/2018, 17h44

Ah merci sympa ! En fait imagine par exemple une image avec une boîte et quand j'amène le pointeur de la souris., ça fait un rond comme le spotlight de mon lien qui me fait voir l'intérieur de la boîte. Ce serait l'image en dessous en fait.
J'espère que c'est assez clair comme exemple.
Merci pour ton aide !

**paoli121** · 29/11/2018, 12h04

ok je vois. tu peux m'nevoyer les deux images?

**Belyce32** · 29/11/2018, 17h13

En fait peu importe les images, on peut prendre 2 images lambda. La boîte était juste un exemple. Tu as une piste ? 😀

**NoSmoking** · 30/11/2018, 12h04

Bonjour et bienvenue sur DVP.

En CSS pur il n'y a pas moyen de réaliser ce que tu souhaites faire, je déplace donc sur le forum Général JavaScript.

Ce que tu cherches à faire est à rapprocher de l'effet de zoom au passage de la souris sur une image, le principe est très proche.

Sur ton image de fond tu fais apparaître un « spot » dans lequel tu places l'image à afficher par dessus ton image de fond.
Le « spot » est déplacé suivant la position de la souris sur le conteneur de l'image de fond et au déplacement du « spot » il suffit de décaler à l'inverse l'image qui est dedans.

J'avais réalisé quelque chose du même type, je te le livre.

Structure HTML utilisée :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<div id="fond">
  <div class="spot">
    <div class="spot-fond">
      <img src="source-de-l'image-a-faire-apparaître" alt="">
    </div>
  </div>
</div>

Le script utilisé est :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
window.addEventListener("DOMContentLoaded", function() {
  "use strict";
  var oFond = document.getElementById("fond");
  var oSpot = document.querySelector(".spot");
  var rayonSpot = 80;
 
  function moveSpot(e) {
    // récup. position de la souris
    var rect = oFond.getBoundingClientRect();
    var posX = e.clientX - rect.left;
    var posY = e.clientY - rect.top;
    // décalage négatif du fond
    oSpot.firstElementChild.style.transform = "translate(-" + posX + "px,-" + posY + "px)";
    // décalage positif du spot
    posX -= rayonSpot;
    posY -= rayonSpot;
    oSpot.style.transform = "translate(" + posX + "px," + posY + "px)";
  }
  oFond.addEventListener("mousemove", function(e) {
    moveSpot(e);
  });
  oFond.addEventListener("mouseout", function() {
    oSpot.style.display = "none";
  });
  oFond.addEventListener("mouseover", function() {
    oSpot.style.display = "block";
  });
});

Concernant le CSS à appliquer, je te laisse le découvrir dans le code exemple suivant :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Effet de spot sur image</title>
<meta name="Author" content="NoSmoking">
<meta name="description" content="Effet de spot lumineux, pour voir au travers d'une image, au déplacement de la souris sur celle-ci.">
<link rel="stylesheet" type='text/css' href="https://nosmoking.developpez.com/demos/style/css_common.css">
<style>
img {
  max-width: inherit;   /* annule le css inclus */
}
#fond {
  position: relative;
  overflow: hidden;
  background: url(https://cyberzoide.developpez.com/misc/background03-800x600.jpg);
  background-size: cover;
  cursor: move;
}
.size-fond {
  width: 800px;
  height: 600px;
  margin: auto;
}
.spot {
  display: none;
  position: absolute;
  box-sizing: border-box;
  width: 10em;
  height: 10em;
  border: 0 solid #FFF;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: rgb(255,255,255) 0 0 2em;
}
.spot-fond {
  position: absolute;
  padding: 5em 0 0 5em;
}
.spot:after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: radial-gradient(circle,transparent 4em,#FFF 10em);
}
</style>
</head>
<body>
<main>
  <header>
    <h1><span class="langage">[JS]</span>Effet de spot sur image</h1>
    <p class="auteur"><a target="DVP" href="http://www.developpez.net/forums/u405341/nosmoking/" title=" NoSmoking sur 
 developpez.com">NoSmoking</a><time datetime="2018-11-30">Nov. 2018</time></p>
  </header>
  <section>
    <h2>Image à survoler</h2>
<div id="fond" class="size-fond">
  <div class="spot">
    <div class="spot-fond">
      <img class="size-fond" src="https://cyberzoide.developpez.com/misc/background01-800x600.jpg" alt="image fond de spot">
    </div>
  </div>
</div>
  </section>
  <section>
    <h2>Image visible en fond de spot</h2>
    <div class="size-fond">
      <img class="size-fond" src="https://cyberzoide.developpez.com/misc/background01-800x600.jpg" alt="image fond de spot">
    </div>
  </section>
  <footer>
    <p>Les sources issues de cette page sont libres de droits et vous pouvez les utiliser à votre convenance et à vos risques et périls*;).</p>
  </footer>
</main>
<script>
window.addEventListener("DOMContentLoaded", function() {
  "use strict";
  var oFond = document.getElementById("fond");
  var oSpot = document.querySelector(".spot");
  var rayonSpot = 80;
 
  function moveSpot(e) {
    // récup. position de la souris
    var rect = oFond.getBoundingClientRect();
    var posX = e.clientX - rect.left;
    var posY = e.clientY - rect.top;
    // décalage négatif du fond
    oSpot.firstElementChild.style.transform = "translate(-" + posX + "px,-" + posY + "px)";
    // décalage positif du spot
    posX -= rayonSpot;
    posY -= rayonSpot;
    oSpot.style.transform = "translate(" + posX + "px," + posY + "px)";
  }
  oFond.addEventListener("mousemove", function(e) {
    moveSpot(e);
  });
  oFond.addEventListener("mouseout", function() {
    oSpot.style.display = "none";
  });
  oFond.addEventListener("mouseover", function() {
    oSpot.style.display = "block";
  });
});
</script>
</body>
</html>

Le fichier pour test en ligne : Effet de spot sur image.

Spot sur une image qui en laisse apparaitre une autre

JavaScript

Partager

Partager