Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save Johnmojo/57302b962dd04c7c40a4e237f7dfe116 to your computer and use it in GitHub Desktop.
Save Johnmojo/57302b962dd04c7c40a4e237f7dfe116 to your computer and use it in GitHub Desktop.
Adding breakpoints to parallax.js
<html>
<head>
<title>Adding breakpoints to parallax.js</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=no">
</head>
<body>
<div class="wrapper" id="scene">
<div class="background layer" data-depth="0.40"></div>
<div class="headline-wrapper">
<h1 class="layer" data-depth="0.70" data-depth-mobile="0.00" data-depth-desk="0.70">This text is moving on desktops and tablets but not on smartphones.</h1>
</div>
</div>
<script src="http://tutorials.stk.works/examples/parallax/jquery.js"></script>
<script src="http://tutorials.stk.works/examples/parallax/parallax.js"></script>
<script src="http://tutorials.stk.works/examples/parallax/debouncedresize.js"></script>
<script src="http://tutorials.stk.works/examples/parallax/index.js"></script>
</body>
</html>
var element = document.getElementById('scene');
var my_parallax = new Parallax(element, {
relativeInput: false,
clipRelativeInput: false,
calibrateX: true,
calibrateY: true,
invertX: true,
invertY: true,
limitX: false,
limitY: false,
scalarX: 10,
scalarY: 10,
frictionX: 0.1,
frictionY: 0.1,
originX: 0.5,
originY: 0.5
});
$(window).on("debouncedresize", function( event ) {
updateParallax();
});
updateParallax();
function updateParallax() {
var viewport_width = $(window).width();
var layers = my_parallax.layers;
for (var j = 0; j<layers.length; j++) {
var layer = layers.item(j);
var deskDepth = layer.getAttribute("data-depth-desk");
var mobileDepth = layer.getAttribute("data-depth-mobile");
if(viewport_width < 768) {
if(layer.hasAttribute("data-depth-mobile")) {
layer.setAttribute("data-depth", mobileDepth);
}
}
else {
if(layer.hasAttribute("data-depth-desk")) {
layer.setAttribute("data-depth", deskDepth);
}
}
}
my_parallax.updateLayers();
}
body {
margin: 0;
padding: 0;
height: 100vh;
}
.wrapper {
position: relative;
overflow: hidden;
width: 100vw;
height: 100vh;
}
.background {
background-image: url('http://tutorials.stk.works/examples/parallax/background.jpg');
position: absolute;
left: -5vw;
top: -5vh;
width: 110vw;
height: 110vh;
background-size: cover;
background-position: center top;
}
.headline-wrapper {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
h1 {
font-family: 'Helvetica', Arial, sans-serif;
text-align: center;
color: white;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment