Interactive Image Shadow & Perspective Effects With JS and CSS

Preview:

Description:

Creating iOS & Apple Tv inspired interactive image shadow & perspective effect that responds to the mouse movement. Built using pure vanilla JavaScript and CSS blur filter.

See also:

• Apple tvOS Style Parallax Hover Effect with Vanilla JavaScript – Perspective Hover

How to use it:

Insert your image to the webpage as follow.

<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>

The main CSS styles:

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

The JavaScript to active the effects on mouse hover and move.

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