Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Panel 3D Tilt
<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>
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment