Interactive mouse move 3D tilt. Desktop only!
A Pen by Peter Barr on CodePen.
<div class="wrapper"> | |
<div class="panel"> | |
<div class="panel__content-col"> | |
<div class="panel__content"> | |
<div class="panel__text"> | |
<h1 class="panel__title">Tap House</h1> | |
<p class="panel__addr"><span></span>60 Ranelagh Village, Dublin</p> | |
</div> | |
<div class="panel__line"></div> | |
</div> | |
</div> | |
<div class="panel__img-col"> | |
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/61488/taphouse.jpg" alt="" class="panel__img"> | |
</div> | |
</div> | |
</div> |
Interactive mouse move 3D tilt. Desktop only!
A Pen by Peter Barr on CodePen.
var $body = $('body'), | |
$panel = $('.panel'), | |
$pContent = $('.panel__content'), | |
$img = $('.panel__img-col'); | |
function initTilt() { | |
TweenMax.set([$pContent, $img], { transformStyle: "preserve-3d" }); | |
$body.mousemove(function(e) { | |
var sxPos = e.pageX / $panel.width() * 100 - 100; | |
var syPos = e.pageY / $panel.height() * 100 - 100; | |
TweenMax.to($pContent, 2, { | |
rotationY: 0.03 * sxPos, | |
rotationX: -0.03 * syPos, | |
transformPerspective: 500, | |
transformOrigin: "center center -400", | |
ease: Expo.easeOut | |
}); | |
TweenMax.to($img, 2, { | |
rotationY: 0.03 * sxPos, | |
rotationX: -0.03 * syPos, | |
transformPerspective: 500, | |
transformOrigin: "center center -200", | |
ease: Expo.easeOut | |
}); | |
}); | |
}; | |
initTilt(); | |
console.clear(); |
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> |
html { | |
box-sizing: border-box; | |
} | |
*, *:before, *:after { | |
box-sizing: inherit; | |
} | |
html, body { | |
width: 100%; | |
height: 100%; | |
} | |
body { | |
background-color: #292929; | |
color: white; | |
font-size: 18px; | |
font-feature-settings: "kern" 1,"liga" 1,"frac" 1, "lnum" 1; | |
-webkit-font-smoothing: antialiased; | |
-moz-osx-font-smoothing: grayscale; | |
} | |
h1 { | |
font-family: 'Playfair Display', serif; | |
font-size: 96px; | |
} | |
p { | |
font-family: 'Lato', sans-serif; | |
} | |
.wrapper { | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
width: 100%; | |
height: 100%; | |
padding: 5vh 5%; | |
} | |
.panel { | |
position: relative; | |
display: flex; | |
width: 100%; | |
max-width: 1200px; | |
height: 466px; | |
user-select: none; | |
pointer-events: none; | |
} | |
.panel__content-col { | |
flex-basis: 25%; | |
} | |
.panel__content { | |
position: absolute; | |
top: 26%; | |
left: 0; | |
z-index: 2; | |
width: 100%; | |
} | |
.panel__text { | |
display: inline-block; | |
text-align: right; | |
} | |
.panel__img-col { | |
flex-basis: 70%; | |
box-shadow: 0px 20px 100.28px 8.72px rgba(0, 0, 0, 0.35); | |
} | |
.panel__title { | |
margin: 0; | |
} | |
.panel__addr { | |
position: relative; | |
display: flex; | |
margin: 16px 0 0; | |
justify-content: flex-end; | |
span { | |
display: block; | |
margin: 9px 14px 0 0; | |
height: 1px; | |
width: 30px; | |
background-color: #fff; | |
} | |
} | |
.panel__line { | |
width: 64%; | |
height: 3px; | |
margin: 24px 0 0 36%; | |
background-color: #fff; | |
} | |
.panel__img-col { | |
width: 100%; | |
} | |
.panel__img { | |
display: block; | |
width: 100%; | |
height: 100%; | |
object-fit: cover; | |
} |