<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="wrapper">
<div class="container">
<div class="content content--animated">
<div class="inner">
<a href="https://codepen.io/collection/Axemak/" target="_blank" class="btn btn-more">More pens</a>
<div class="layer layer--cover">
<div class="layer layer--content layer--parallax" data-offset="8"></div>
<div class="layer layer--overlay overlay">
<div class="layer layer--red"></div>
<div class="layer layer--blue"></div>
<div class="layer layer--green"></div>
</div>
<img data-offset="2" src="https://s32.postimg.org/kyt1lams5/cup_codepen.png" alt="Kristijan Vincetić" class="portrait layer--parall">
</div>
</div>
<div class="elements">
<h1 class="elements__title">
Parallax
</h1>
<h1 class="elements__title">
Design
</h1>
</div>
</div>
<footer class="footer">
<p>Parallax concept from <a href="http://www.budidiokojinedostaje.hr" target="_blank">www.budidiokojinedostaje.hr</a> and design inspiration from <a href="https://dribbble.com/shots/2707834-VIA-Mixtape-Flow/attachments/547472" target="_blank">Dribble shot</a></p>
</footer>
</div>
<script>
function animateInfoParallax() {
/**
Variables used in code
This prevents function hoisting
**/
var animLayer = {},
hoverLayer = {},
layerFront = {},
hoverLayerWidth = 0,
hoverLayerHeight = 0;
hoverLayer = $(".container");
animLayer = $(".layer--content");
layerFront = $(".layer--parall");
hoverLayerWidth = hoverLayer.width();
hoverLayerHeight = hoverLayer.height();
var layerOffset = animLayer.data("offset"), //offset values are defined in HTML
$layer = animLayer,
cx = Math.ceil(hoverLayerWidth / 2.0),
cy = Math.ceil(hoverLayerHeight / 2.0),
frontLayerOffset = layerFront.data("offset");
hoverLayer.mousemove(function(event) {
var dx = event.pageX - cx,
dy = event.pageY - cy;
var tiltx = -(dx / cx),
tilty = -(dy / cy);
var lValX = (tiltx * (layerOffset)),
lValY = (tilty * (layerOffset));
TweenMax.to($layer, 3.5, {
x: lValX.toFixed(2) + "px",
y: lValY.toFixed(2) + "px",
ease: Circ.easeOut
});
var lFValX = (tiltx * 2 * (frontLayerOffset * 3)), //Higher values means more parallax
lFValY = (tilty * (frontLayerOffset * 2));
TweenMax.to(layerFront, 4.5, {
x: lFValX.toFixed(2) + "px",
y: lFValY.toFixed(2) + "px",
ease: Circ.easeOut,
});
});
}
animateInfoParallax();
</script>
@import url(https://fonts.googleapis.com/css?family=Droid+Serif);
/**MIXINS**/
.wrapper {
position: relative;
background: white;
height: 100vh;
width: 100%;
}
.container {
width: 100%;
height: 100%;
}
.content {
width: 83.19328%;
float: left;
margin-right: 0.84034%;
max-width: 1200px;
float: none;
margin: 0 auto;
height: 600px;
position: absolute;
left: 0;
right: 0;
bottom: 50px;
z-index: 11;
}
.content .portrait {
max-width: 100%;
position: absolute;
top: 20%;
left: -65px;
z-index: 11;
}
@media (max-width: 1530px) {
.content .portrait {
left: -80px;
}
}
@media (max-width: 1230px) {
.content .portrait {
max-width: 70%;
}
}
.content .elements {
position: absolute;
right: -20px;
top: 20%;
z-index: 10;
}
@media (max-width: 1430px) {
.content .elements {
top: 40%;
right: 90px;
}
}
@media (max-width: 1230px) {
.content .elements {
top: 50%;
right: -20px;
}
}
.content .elements__title {
font-size: 8.5em;
line-height: 0.94118;
color: #201d1d;
font-family: "Droid Serif", serif;
}
@media (max-width: 1730px) {
.content .elements__title {
font-size: 7.5em;
line-height: 0.93333;
}
}
@media (max-width: 1430px) {
.content .elements__title {
font-size: 5.5em;
line-height: 0.90909;
}
}
@media (max-width: 1230px) {
.content .elements__title {
font-size: 4.5em;
line-height: 0.88889;
}
}
.content .inner {
width: 83.19328%;
float: left;
margin-right: 0.84034%;
max-width: 950px;
float: none;
margin: 0 auto;
height: 550px;
position: absolute;
left: 0;
right: 0;
bottom: 100px;
z-index: 10;
}
@media (max-width: 1530px) {
.content .inner {
width: 700px;
}
}
@media (max-width: 1430px) {
.content .inner {
height: 400px;
}
}
@media (max-width: 1230px) {
.content .inner {
height: 350px;
}
}
.content .inner .btn {
font-size: 0.8em;
line-height: 1;
background: white;
display: inline-block;
padding: 15px 20px;
left: 0;
color: #201d1d;
text-decoration: none;
text-transform: uppercase;
font-family: 'Asap', sans-serif;
position: relative;
bottom: 20px;
box-shadow: 3px 3px 14px 1px rgba(0, 0, 0, 0.14);
}
.content .layer--cover {
width: 100;
height: 100%;
overflow: hidden;
}
.content .layer--content {
width: 100%;
height: 100%;
background: url("https://s32.postimg.org/mppe8mrit/codepen_2.jpg") no-repeat;
background-size: cover;
z-index: 8;
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
.footer {
background: #201d1d;
width: 100%;
height: 200px;
position: absolute;
bottom: 0;
}
.footer p {
opacity: .8;
font-size: 12px;
color: white;
position: absolute;
right: 40px;
bottom: 10px;
font-family: 'Asap', sans-serif;
font-weight: 300;
}
.footer p a {
color: #edebce;
}
