LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
	
CSS
.container {
  width: 50%;
  margin: 40px auto;
}
.moving-zone {
    position: relative;
    width:85%; height:985%;
    margin: auto;
    perspective: 800px;
}
.popup {
    padding: 10px;
    box-sizing: border-box;
    cursor: pointer;
    transform-style: preserve-3d;
}
.popup-2 {
    position: absolute;
    padding: 10px;
    box-sizing: border-box;
    cursor: pointer;
    transform-style: preserve-3d;
	  left:20%; top:0% !important;
	  transform: translateZ(100px) !important;
}
.popup-2 img {
	  overflow: hidden;
}
JS
var moveForce = 30;
var rotateForce = 20;

$(document).mousemove(function(e) {
    var docX = $(document).width();
    var docY = $(document).height(); 
    
    var moveX = (e.pageX - docX/2) / (docX/2) * -moveForce;
    var moveY = (e.pageY - docY/2) / (docY/2) * -moveForce;
    
    var rotateY = (e.pageX / docX * rotateForce*2) - rotateForce;
    var rotateX = -((e.pageY / docY * rotateForce*2) - rotateForce);
    
    $('.popup')
        .css('left', moveX+'px')
        .css('top', moveY+'px')
        .css('transform', 'rotateX('+rotateX+'deg) rotateY('+rotateY+'deg)');

    $('.popup-2')
        .css('right', moveX+'px')
        .css('bottom', moveY+'px')
        .css('transform', 'rotateX('-rotateX-'deg) rotateY('-rotateY-'deg)');
});
Host Instantly Drag and Drop Website Builder

 

Description

Parallax method where components react to where the users mouse is on the page. Layering multiple components giving a sense of depth.
Term
Mon, 11/27/2017 - 22:02

Related Codes

Pen ID
Pen ID
Pen ID