A Pen by Stefan Kaltenegger on CodePen.
Created
March 3, 2019 06:10
-
-
Save Johnmojo/57302b962dd04c7c40a4e237f7dfe116 to your computer and use it in GitHub Desktop.
Adding breakpoints to parallax.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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(); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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