Johnmojo/adding-breakpoints-to-parallax-js.markdown

## adding-breakpoints-to-parallax-js.markdown

      
    Raw
  

              adding-breakpoints-to-parallax-js.markdown
            
          
    Adding breakpoints to parallax.js

A Pen by Stefan Kaltenegger on CodePen.
License.

  
## index.html
<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>

## script.js
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();
}

## style.css
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;
}
	<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;
	}