Discussion :

[labarre2002]

Bonsoir

Je me pose une une question sur la réalisation de cet effet est ce fait avec la propriété css ?

https://nosmoking.developpez.com/dem...sur-image.html

Code css :

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

mask-image: ;

[ProgElecT]

Salut

Je ne sais pas si tu sais voir et isoler la partie du code de l'élément spot.
La partie

Code CSS :

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
.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);
}

La partie JS

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";
  });
});

Cela devrait t'éclairer

[labarre2002]

Merci