Parallax Effect on Hover

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Simple vertigo effect</title>  <style type="text/css"> #contaianer { position: absolute; width: 100vw; height: 100vh; top: 0; left: 0; background-color: #000; overflow: hidden; font-family: 'Lato', sans-serif; } #wrapper { overflow: hidden; position: absolute; width: 1500px; height: 800px; z-index: 10; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } #wrapper div { position: absolute; background-position: center center; background-size: cover; } .p1 { width: 1776px; height: 1183px; z-index: 6; background-image: url('//caraujo_pens.surge.sh/images/S6WCriT.jpg'); left: -89px; top: -191px; } .p2 { width: 927px; height: 854px; z-index: 8; background-image: url('//caraujo_pens.surge.sh/images/aeffA4C.png'); left: -83px; top: 169px; } .p3 { width: 1082px; height: 729px; z-index: 10; background-image: url('//caraujo_pens.surge.sh/images/QAyjA6B.png'); left: 718px; top: 136px; } .letra { font-weight: 900; color: #24395A; font-size: 17.5em; top: 30%; margin-top: -115px; width: 100%; text-align: center; z-index: 7; text-transform: uppercase; } </style> </head> <body> <span></span> <div id="contaianer"> <section id="wrapper"> <div class="p1" data-speed="0.01" data-revert="true"></div> <div class="p2" data-speed="0.02"></div> <div class="p3" data-speed="0.01"></div> <div class="letra" data-speed="0">vertigo</div> </section> </div> </body> <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.0/TweenMax.min.js"></script> <script type="text/javascript"> $('html').mousemove(function(e){ var wx = $(window).width(); var wy = $(window).height(); var x = e.pageX - this.offsetLeft; var y = e.pageY - this.offsetTop; var newx = x - wx/2; var newy = y - wy/2; $('span').text(newx + ", " + newy); $('#wrapper div').each(function(){ var speed = $(this).attr('data-speed'); if($(this).attr('data-revert')) speed *= -1; TweenMax.to($(this), 1, {x: (1 - newx*speed), y: (1 - newy*speed)}); }); }); </script> </html>

提示：你可以先修改部分代码再运行。

转载请注明：有爱前端 » Parallax Effect on Hover