Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save dylandgeorge/3ebee5ae8f76a9b6bd3027416342067c to your computer and use it in GitHub Desktop.
Save dylandgeorge/3ebee5ae8f76a9b6bd3027416342067c to your computer and use it in GitHub Desktop.
Parallax mouse tracking concept
<div class="wrapper">
<div class="container">
<div class="content content--animated">
<div class="inner">
<a href="http://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="http://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>
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 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
@import "susy";
@import url(https://fonts.googleapis.com/css?family=Droid+Serif);
$b-red: #d8373f;
$p-black:#201d1d;
/**MIXINS**/
@mixin font-size($psd-font-size, $psd-line-height: $psd-font-size) {
font-size: $psd-font-size;
line-height: ($psd-line-height)/$psd-font-size;
}
@mixin letter-spacing($letterspacing) {
letter-spacing: $letterspacing/1000;
}
@mixin breakpoint($class: custom, $maxmin: max-width, $size: 0) {
@media ($maxmin: $size) {
@content;
}
}
$susy: ( columns: 24, global-box-sizing: border-box, column-width:60px, math: fluid, use-custom: ( clearfix: false));
.wrapper {
position: relative;
background: white;
height: 100vh;
width: 100%;
}
.container {
width: 100%;
height: 100%;
}
.content {
@include span(20 of 24);
max-width: 1200px;
float: none;
margin: 0 auto;
height: 600px;
position: absolute;
left: 0;
right: 0;
bottom: 50px;
z-index: 11;
.portrait {
max-width: 100%;
position: absolute;
top: 20%;
left: -65px;
z-index: 11;
@include breakpoint(laptop,max-width,1530px){
left:-80px;
}
@include breakpoint(laptopSm,max-width,1230px){
max-width:70%;
}
}
.elements {
position: absolute;
right: -20px;
top: 20%;
z-index: 10;
@include breakpoint(laptop,max-width,1430px){
top:40%;
right:90px;
}
@include breakpoint(laptopSm,max-width,1230px){
top:50%;
right:-20px;
}
&__title {
@include font-size(8.5em, 8em);
color: $p-black;
font-family: "Droid Serif", serif;
@include breakpoint(laptopBig,max-width,1730px){
@include font-size(7.5em, 7em);
}
@include breakpoint(laptopMed,max-width,1430px){
@include font-size(5.5em, 5em);
}
@include breakpoint(laptopSm,max-width,1230px){
@include font-size(4.5em, 4em);
}
}
}
.inner{
@include span(20 of 24);
max-width: 950px;
float: none;
margin: 0 auto;
height: 550px;
position: absolute;
left: 0;
right: 0;
bottom: 100px;
z-index: 10;
@include breakpoint(laptop,max-width,1530px){
width:700px;
}
@include breakpoint(laptop,max-width,1430px){
height:400px;
}
@include breakpoint(laptop,max-width,1230px){
height:350px;
}
.btn {
@include font-size(0.8em,0.8em);
background:white;
display: inline-block;
padding: 15px 20px;
left: 0;
color:$p-black;
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);
}
}
.layer--cover {
width:100;
height:100%;
overflow: hidden;
}
.layer--content {
width: 100%;
height: 100%;
background: url("http://s32.postimg.org/mppe8mrit/codepen_2.jpg") no-repeat;
background-size: cover;
z-index: 8;
transform: scale(1.2);
}
}
.footer {
background: $p-black;
width: 100%;
height: 200px;
position: absolute;
bottom: 0;
p{
opacity:.8;
font-size:12px;
color:white;
position:absolute;
right:40px;
bottom:10px;
font-family: 'Asap', sans-serif;
font-weight:300;
a{
color:#edebce;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment