Sombra de imagen interactiva & efectos de perspectiva con JS y CSS

Vista prévia

Descripción

Creación de iOS & la sombra de imagen interactiva de Apple TV & efecto de perspectiva que responde al movimiento del ratón. Construido usando puro vainilla JavaScript y filtro de desenfoque CSS.

See also:

• efecto Hover de Apple tvOS estilo Parallax con vanilla JavaScript â & #128; & #147; el desplazamiento de perspectiva

Funcionamiento

Inserte su imagen en la página web como sigue.

<div class="image-wrapper">




<div class="my-image"




onmousemove="relMouseCoords(event,this)"




data-shx-img="demo.jpg"




data-shx-size="6" >



 <img src="demo.jpg" class="imagen_ejemplo">

</div>


</div>

Los principales estilos CSS:

.image-wrapper {

position: relative;

float: left;

width: 100%;

padding-bottom: 50px;
}

.clear_fix {

position: relative;

float: left;

width: 100% !important;
}

div[data-shx-size='1'] {
--Y-imagen:10%;
}

div[data-shx-size='1']:after {

top: var(--Y-imagen);

-webkit-filter: blur(15px);

filter: blur(15px);
}

div[data-shx-size='2'] { margin-bottom: 12px !important; --Y-imagen:12%;
}

div[data-shx-size='2']:after {

top: var(--Y-imagen);

-webkit-filter: blur(15px);

filter: blur(15px);
}

div[data-shx-size='3'] { margin-bottom: 17px !important; --Y-imagen:13%;
}

div[data-shx-size='3']:after {

top: var(--Y-imagen);

-webkit-filter: blur(25px);

filter: blur(25px);
}

div[data-shx-size='4'] { margin-bottom: 20px !important; --Y-imagen:18px;
}

div[data-shx-size='4']:after {

top: var(--Y-imagen);

-webkit-filter: blur(20px);

filter: blur(20px);
}

div[data-shx-size='5'] { margin-bottom: 28px !important; --Y-imagen:26px;
}

div[data-shx-size='5']:after {

top: var(--Y-imagen);

-webkit-filter: blur(32px);

filter: blur(30px);
}

div[data-shx-size='6'] { margin-bottom: 42px !important;
--Y-imagen:40px;
}

div[data-shx-size='6']:after {

top: var(--Y-imagen);

-webkit-filter: blur(30px);

filter: blur(30px);
}

.image-wrapper img {

width: 100%;

z-index: 1;

border-radius: 2px;
}

.image-wrapper > div {

position: relative;

width: 500px;

margin: 10% auto;

margin-top: 0px;
}

El JavaScript para activar los efectos en el ratón Hover y mover.

window.onload = function() {


var k = '',




show = '';


var x = document.createElement("STYLE");


var imgs = document.querySelectorAll('.image-wrapper > div');


var imgs_int = document.querySelectorAll('.image-wrapper > div > img')[0];


for (var i = 0; i < imgs.length; i++) {




var show = imgs[i].getAttribute("data-shx-img");





k += "." + imgs[i].className + ":after
{ background-image:url('" + show + "'); left:var(--imagen-X);

 position: absolute;

display: block;

z-index: -1;

width: 90%;
 height: 90%;
content: '';


background-size: 200% 80%;

background-position: 0% 100%;

 } ";



};


var t = document.createTextNode(k);


x.appendChild(t);


document.head.appendChild(x);
}

function relMouseCoords(event, el) {


var totalOffsetX = 0;


var totalOffsetY = 0;


var canvasX = 0;


var canvasY = 0;


var currentElement = el;



do {




totalOffsetX += currentElement.offsetLeft - currentElement.scrollLeft;




totalOffsetY += currentElement.offsetTop - currentElement.scrollTop;


}


while (currentElement = currentElement.offsetParent)



canvasX = event.pageX - totalOffsetX;


canvasY = event.pageY - totalOffsetY;


el.style.transform = " perspective( 600px ) rotateX(" + ((canvasY * -1) + ((canvasY + 5) / 1.02)) + "deg )
rotateY(" + (canvasX - (canvasX / 1.02)) + "deg ) ";



el.style.setProperty('--imagen-X', ((canvasX * -1) + ((canvasX + 10) / 1.02)) + "%");


el.style.setProperty('--Y-imagen', ((canvasY * -1) + ((canvasY + 20) / 1.04)) + "%");
}