Web Surfer (Hover Tilt Effect)
HTML
<div class="bg"></div>
<div class="card">
<h1>Web <br/> Surfer</h1>
</div>
SCSS
@import url('https://fonts.googleapis.com/css?family=Work+Sans:200,800,900');
html, body {
height: 100%;
width: 100%;
font-family: 'Work Sans', sans-serif;
overflow: hidden;
}
body {
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
}
.bg {
background-image: url("https://goo.gl/JSS8gt");
background-position: center;
background-size: cover;
height: 100%;
width: 100%;
top: 0;
left: 0;
position: absolute;
filter: blur(5px);
transform: scale(1.1);
}
.card {
height: 300px;
width: 500px;
position: relative;
background: url("https://goo.gl/JSS8gt");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
box-shadow: 3px 3px 19px -2px rgba(22,46,81,1);
&:before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.5);
}
h1 {
position: absolute;
color: #fff;
top: 20px;
left: -30px;
margin: 0;
font-size: 120px;
letter-spacing: 2px;
text-transform: uppercase;
z-index: 1;
mix-blend-mode: overlay;
}
}
JAVASCRIPT
$(document).ready(function() {
var card = $('.card');
card.mousemove( function(event) {
var xPOS = (event.clientX/card.width())-0.5;
var yPOS = (event.clientY/card.height())-0.5;
TweenMax.to(card, 0.6, {
rotationY: 5 * xPOS,
rotationX: 5 * yPOS,
ease: Power1.easeOut,
transformPerspective: 700,
transformOrigin: 'center'
})
})
});
