Modifica dell'opacità delle immagini con JS o CSS sotto il puntatore del mouse?

Mi piacerebbe avere un'immagine sulla pagina web, che diventerà trasparente al passaggio del mouse, ma trasparente solo in un'area più vicina al puntatore del mouse, spostando quell'area con il puntatore.Modifica dell'opacità delle immagini con JS o CSS sotto il puntatore del mouse?

semplice transizione opacità può essere facilmente raggiunto con i CSS:

<style type="text/css"> 
     img.transparent { 
      opacity: 1; 
      -webkit-transition: opacity 1s; 
      -moz-transition: opacity 1s; 
      transition: opacity 1s; 
     } 
     img.transparent:hover { 
      opacity: 0; 
     } 
    </style> 
    <img class="transparent" src="1.jpg">

che rende un'immagine ben scomparire al passaggio del mouse su e apparire di nuovo al passaggio del mouse fuori.

Ma quello che mi piacerebbe ottenere è lo stesso effetto solo per alcune aree vicino al puntatore del mouse. In modo che ci sia sempre un'area trasparente sotto il puntatore, mentre si muove sopra l'immagine.

C'è un modo per farlo con CSS o JS?

Grazie!

fonte

2014-12-19 Andrey Gusakov

Che ne dite di fare un cursore personalizzato con uno sfondo bianco e passare a quello in cui si sta in bilico sopra l'immagine? – philtune

Vuoi dire vedere ** attraverso ** un elemento? Non con i CSS e penso che anche il JS sarebbe piuttosto funky. –

jQuery è consentito in una risposta o puro javascript? – Rimble

Come vals suggerito, utilizzare un maschera (arbitraria). La seguente è una dimostrazione di una maschera rettangolare, anche se può essere facilmente modificata per essere qualsiasi forma che desideri. Questa versione funziona sulle ultime versioni di Firefox e Chromium e consente forme più complesse tramite elementi SVG.

Si noti che questo è un codice molto scadente. Dovrà essere scritto se si desidera utilizzarlo in qualsiasi progetto, ma l'idea è lì.

Demo: http://jsfiddle.net/WK_of_Angmar/f8oe7hcq/

<!DOCTYPE html> 
<html> 
    <head> 
     <script type="application/javascript"> 
      window.addEventListener("load", function() { 
       var img = document.getElementsByTagName("image")[0]; 
       var imgPos = img.getBoundingClientRect(); 
       var imgX = imgPos.left; 
       var imgY = imgPos.top; 
       var rect = document.getElementsByTagName("rect")[1]; 
       var rectHalfWidth = rect.getAttribute("width")/2; 
       var rectHalfHeight = rect.getAttribute("height")/2; 
       img.addEventListener("mousemove", function(e) { 
        rect.setAttribute("x", e.clientX - imgX - rectHalfWidth); 
        rect.setAttribute("y", e.clientY - imgY - rectHalfHeight); 
        }, false); 
      }, false); 
     </script> 
     <style> 
      svg { 
       width: 320px; 
       height: 166px; 
      } 
      body { 
       background-color: red; 
       background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/7/76/Mozilla_Firefox_logo_2013.svg/226px-Mozilla_Firefox_logo_2013.svg.png"); 
      } 
      image:hover { 
       mask: url("#cursorMask"); 
      } 
     </style> 
    </head> 
    <body> 
     <svg> 
      <defs> 
       <mask id="cursorMask" maskUnits="objectBoundingBox" maskContentUtils="objectBoundingBox"> 
        <g> 
        <!-- the SECOND rect element is what determines the transparent area --> 
        <rect x="0" y="0" width="320" height="166" fill="#FFFFFF" /> 
        <rect x="0" y="0" width="100" height="100" fill="#000000" /> 
        </g> 
       </mask> 
      </defs> 
     <image width="320" height="166" xlink:href="https://upload.wikimedia.org/wikipedia/commons/d/d4/Firefox-33-xfce.png" /> 
     </svg> 
    </body> 
</html>

fonte

2014-12-19 21:17:31

Hai ragione, cambiando le maschere CSS alle maschere svg hai la compatibilità con Firefox – vals

Grande! Grazie! Supponevo che ci fosse una maschera di qualche tipo, ma non era a conoscenza delle tecnologie odierne e non era in grado di farlo su Google. –

Quello che immaginavo era un tipo di vista sbiadita nel livello sottostante. È facilmente raggiungibile dal tuo codice: http://jsfiddle.net/j6fv5Lk9/35/ –

È possibile ottenere questo utilizzando il mascheramento. Ha un supporto limitato, ma fornisce esattamente ciò che si desidera

Il CSS richiesta

#test { 
    top: 0px; 
    left: 0px; 
    -webkit-mask-position: -20px -20px; 
    -webkit-mask-size: 200px 400px; 
    -webkit-mask-image: radial-gradient(circle, rgba(0, 0, 0, 0) 32px, rgba(0, 0, 0, 1) 38px); 
    background-color: white; 
    border: solid 1px red; 
    width: 200px; 
    height: 200px; 
    background-image: url('http://placekitten.com/g/200/300'); 
} 

body { 
    background: repeating-linear-gradient(45deg, lightgreen 0px, white 50px); 
}

e alcuni script per ottenere lo spostamento

document.getElementById("test").addEventListener('mousemove', mouseMove, false); 

function mouseMove (event) 
{ 
    var ele = document.getElementById ('test'); 

    ele.style.webkitMaskPositionX = event.offsetX - 100 + "px"; 
    ele.style.webkitMaskPositionY = event.offsetY + 200 + "px"; 
}

demo - only webkit

fonte

2014-12-19 20:00:56 vals

Questa soluzione sembra avvolgere la maschera attorno ai bordi quando l'ho provata sull'ultima versione di Chromium, che immagino sia un comportamento indesiderato. http://webmup.com/tTn8y/vid.webm –

Modifica dell'opacità delle immagini con JS o CSS sotto il puntatore del mouse?

risposta

Problemi correlati