Glass Parallax

paralax background scroll

by Glynne Turner

HTML

<div id="parallax" class=" first">
<div class="paralax_content ">xcfgxcv </div>


</div>

<div class="content">
Scroll Up and Down this page to see the parallax scrolling effect.
This div is just here to enable scrolling.
Tip: Try to remove the background-attachment property to remove the scrolling effect.
</div>

<div class="parallax second"><div class="paralax_content">sdf</div></div>

CSS

*{padding:0; margin:0}
.parallax {
    /* The image used */
    

    /* Set a specific height */
     height: 100vh; 
	display:table;
    width:100%;
    /* Create the parallax scrolling effect */
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover; 
}
.paralax_content{display:table ;  text-align:center;vertical-align: middle;font-size:36px; 
  
   position: relative;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background:red ; 
  justify-content: center;height:100%;color:#ffffff;
}

.first{ background-color:#1F2227; background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;  position: relative;
  width: 100%;
  height: 100vh;
  background-image: url(https://raw.githubusercontent.com/oscicen/oscicen.github.io/master/img/depth-3.png), url(https://raw.githubusercontent.com/oscicen/oscicen.github.io/master/img/depth-2.png), url(https://raw.githubusercontent.com/oscicen/oscicen.github.io/master/img/depth-1.png);
  background-repeat: no-repeat;
  background-position: center;
  background-position: 50% 50%;}
.second{ background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTwHtdj-8coTTxDdOWxZdsDpL3aJ5ZaUfOThQIYbTKXG13IqJJh");}
.content{height:auto; padding:120px 0; font-size:36px}

JavaScript

(function() {
    // Add event listener
    document.addEventListener("mousemove", parallax);
    const elem = document.querySelector("#parallax");
    // Magic happens here
    function parallax(e) {
        let _w = window.innerWidth/2;
        let _h = window.innerHeight/2;
        let _mouseX = e.clientX;
        let _mouseY = e.clientY;
        let _depth1 = `${50 - (_mouseX - _w) * 0.01}% ${50 - (_mouseY - _h) * 0.01}%`;
        let _depth2 = `${50 - (_mouseX - _w) * 0.02}% ${50 - (_mouseY - _h) * 0.02}%`;
        let _depth3 = `${50 - (_mouseX - _w) * 0.06}% ${50 - (_mouseY - _h) * 0.06}%`;
        let x = `${_depth3}, ${_depth2}, ${_depth1}`;
        console.log(x);
        elem.style.backgroundPosition = x;
    }

})();