"Hover animated pop up"
Bootstrap 3.0.0 Snippet by MohamedSamiKhiari

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="moving-zone"> <div class="popup"> <div class="popup-content"> <div class="popup-text"> I'm a Static <b>popup</b>.<br/> Move your <b>mouse</b> around ! <br /> ! <b>Hover</b> Animation ! </div> </div> </div> </div>
html, body { height: 100%; } body { margin: 0 auto; background: radial-gradient(#666, #222); overflow: hidden; } .moving-zone { position: absolute; top:50%; left:50%; width:300px; height:120px; margin: -60px 0 0 -230px; perspective: 800px; } .popup { position: absolute; width:500px; padding: 10px; box-sizing: border-box; border-radius: 20px ; cursor: pointer; box-shadow:2px 2px 13px #ccc; transform-style: preserve-3d; background: -webkit-linear-gradient(top left, white 50%, #4788e8 50%); background: -moz-linear-gradient(top left, white 50%, #4788e8 50%); background: -ms-linear-gradient(top left, white 50%, #4788e8 50%); background: -o-linear-gradient(top left, white 50%, #4788e8 50%); background: linear-gradient(top left, white 50%, #4788e8 50%); } .popup:before { content: ''; position: absolute; left:5%; top:5%; width:90%; height:90%; border-radius: inherit; background: rgba(0,0,0,.1); box-shadow: 0 0 40px 20px rgba(0,0,0,.1); transform: translateZ(-100px); } .popup-content { background: #444; padding: 30px; box-sizing: border-box; border-radius: 10px 10px 10px 10px; } .popup-text { color: white; font-family: 'Roboto', sans-serif; font-size: 20px; line-height: 30px; font-weight: 100; text-align: center; transform: translateZ(15px); } .popup-text b { color: #4788e8; font-weight: 500; }
var moveForce = 30; // max popup movement in pixels var rotateForce = 0; // max popup rotation in deg $(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)'); }); RERUN

Related: See More


Questions / Comments: