let requestAnimFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(e) { window.setTimeout(e, 1e3 / 60) } let mouseInfos = { x: 0, y: 0, }, oldMouseInfos = { x: 0, y: 0, }; $(window).on('mousemove', function (t) { mouseInfos.x = t.clientX, mouseInfos.y = t.clientY; }); function getMouseToCenterDistance() { let t = { x: $(window).width() / 2 - mouseInfos.x, y: $(window).height() / 2 - mouseInfos.y, }; return t.percentX = t.x / ($(window).width() / 2 / 100), t.percentY = t.y / ($(window).height() / 2 / 100), t; } function mouseInfosChanged() { return oldMouseInfos.x != mouseInfos.x || oldMouseInfos.y != mouseInfos.y; } function mousePos() { let t = getMouseToCenterDistance(); if (mouseInfosChanged()) { let a = $(window).width() , n = ($(window).height(), $(window).height() / 100 * 15) , i = a - 0 , o = $(window).height() / 100 * 85 - n; mouse_x_in_viewport = mouseInfos.x - 0, mouse_y_in_viewport = mouseInfos.y - n, mouse_x_in_viewport_percent = mouse_x_in_viewport / (i / 100), mouse_y_in_viewport_percent = mouse_y_in_viewport / (o / 100), mouse_x_in_viewport_percent < 0 && (mouse_x_in_viewport_percent = 0), mouse_x_in_viewport_percent > 100 && (mouse_x_in_viewport_percent = 100), mouse_y_in_viewport_percent < 0 && (mouse_y_in_viewport_percent = 0), mouse_y_in_viewport_percent > 100 && (mouse_y_in_viewport_percent = 100); mouse_y_in_viewport_percent, mouse_y_in_viewport_percent, mouse_x_in_viewport_percent; var s = .2 * (50 - mouse_x_in_viewport_percent) , r = .2 * mouse_y_in_viewport_percent , l = .15 * mouse_x_in_viewport_percent , c = t.percentX; c < 0 && (c = 0); var d = .15 * (50 - mouse_x_in_viewport_percent) , p = .15 * (50 - mouse_y_in_viewport_percent); TweenMax.staggerTo($('.positioner:even '), .1, { perspective: '500px', x: 1.6 * s, y: 2 * r, z: .8 * l, rotationY: .24 * d * -1, rotationX: .24 * p, }, .07), TweenMax.staggerTo($('.positioner:odd'), .1, { perspective: '500px', x: 1.6 * -s, y: 2 * r, z: .8 * l, rotationY: .24 * d * -1, rotationX: .24 * p, }, .07), oldMouseInfos.x = mouseInfos.x, oldMouseInfos.y = mouseInfos.y; } } function animate() { mousePos(); requestAnimFrame(animate); } animate();
<div class="outer"> <div class="wraper"> <div class="inner"> <div class="line"></div> <div class="positioner"> <div class="image"></div> </div> </div> </div> <div class="wraper"> <div class="inner"> <div class="line"></div> <div class="positioner"> <div class="image"></div> </div> </div> </div> <div class="wraper"> <div class="inner"> <div class="line"></div> <div class="positioner"> <div class="image"></div> </div> </div> </div> <div class="wraper"> <div class="inner"> <div class="line"></div> <div class="positioner"> <div class="image"></div> </div> </div> </div> <div class="wraper"> <div class="inner"> <div class="line"></div> <div class="positioner"> <div class="image"></div> </div> </div> </div> </div>
.outer { position: relative; z-index: 9; height: 100vh; background-color: rgba(#000, .6); } .wraper { position: relative; z-index: 4; height: 20%; overflow: hidden; } .inner { position: relative; z-index: 5; width: 100vw; height: 100%; perspective: 500px; } .line { height: 1px; width: 100%; background-color: mix(white, black, 20%); } .positioner { position: absolute; z-index: -1; width: 100vw; height: 100vh; position: absolute; left: 0vw; top: 0vh; // .wraper:nth-of-type(2) & { top: -20vh; } .wraper:nth-of-type(3) & { top: -40vh; } .wraper:nth-of-type(4) & { top: -60vh; } .wraper:nth-of-type(5) & { top: -80vh; } } .image { position: absolute; right: 0%; bottom: -5%; top: -5%; left: 0%; width: 110%; height: 110%; background-image: url('https://source.unsplash.com/random/1000x1000/'); background-size: cover; background-position: 50% 50%; transform: translate(-5%, -5%); }