Old school D3 from simpler times

All examples By author By category About

abernier

Full window Github gist

//ax

DEPRECATED: use @abernier/parallax instead

Hardware-accelerated parallax

Demo: /abernier/0837661e346360b5385b/example/

INSTALL

browser-side

<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="http://underscorejs.org/underscore.js"></script>
<script src="https://cdn.rawgit.com/abernier/3225993/raw/7f928620dbe65570950ab551ee06b82e480507bb/loop.js"></script>
<script src="parallax.js"></script>

Server-side

npm install https://gist.github.com/abernier/0837661e346360b5385b/archive/847d8c07b85c0532d7a3931f90d522587cd50b85.tar.gz

Usage

$('#my').parallax({amplitude: .5});

or


var el = document.getElementById('my');

var parallax = new Parallax(el, {
  amplitude: .5 // default: 1
});
parallax.loop.start();

<!DOCTYPE html>
<html class="no-js">
<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,initial-scale=1,user-scalable=no">
  <style>
  p {text-align:center;}
  .strong {position:relative;z-index:1; font-size:200%;}
  .my {
    height:500px; margin:200% 0;
    outline:100em solid rgba(255,255,255,.8); box-shadow:inset 0 0 0px 2px red;
    background:url(https://lorempixel.com/1400/1900/) center no-repeat; background-size:cover;
    overflow:visible!important;
  }
  .my >div {
    position:relative;z-index:-1;
  }
  .my p {font-size:500%;}
  </style>
</head>
<body>
  <p class="strong">Scroll down<br>↓↓↓</p>

<p><a href="https://gist.github.com/abernier/0837661e346360b5385b#file-readme-md">README</a>

<div class="my">
    <p>Lorem ipsum</p>
  </div>
 
  <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
  <script src="https://underscorejs.org/underscore.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/abernier/3225993/raw/7f928620dbe65570950ab551ee06b82e480507bb/loop.js"></script>
  <script src="parallax.js"></script>
  <script>
  $('.my').parallax({amplitude: 1});
 </script>
</body>
</html>

xxxxxxxxxx
 
<!DOCTYPE html>
<html class="no-js">
<head>
  <meta charset="utf-8">
  <title></title>
  <meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,initial-scale=1,user-scalable=no">
  <style>
  p {text-align:center;}
  .strong {position:relative;z-index:1; font-size:200%;}
  .my {
    height:500px; margin:200% 0;
    outline:100em solid rgba(255,255,255,.8); box-shadow:inset 0 0 0px 2px red;
    background:url(https://lorempixel.com/1400/1900/) center no-repeat; background-size:cover;
    overflow:visible!important;
  }
  .my >div {
    position:relative;z-index:-1;
  }
  .my p {font-size:500%;}
  </style>
</head>
<body>
  <p class="strong">Scroll down<br>↓↓↓</p>
​
  <p><a href="https://gist.github.com/abernier/0837661e346360b5385b#file-readme-md">README</a>
​
  <div class="my">
    <p>Lorem ipsum</p>
  </div>
 
  <script src="https://code.jquery.com/jquery-1.11.1.js"></script>
  <script src="https://underscorejs.org/underscore.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/abernier/3225993/raw/7f928620dbe65570950ab551ee06b82e480507bb/loop.js"></script>
  <script src="parallax.js"></script>
  <script>
  $('.my').parallax({amplitude: 1});
 </script>
</body>
</html>
    

Modified http://code.jquery.com/jquery-1.11.1.js to a secure url

Modified http://underscorejs.org/underscore.js to a secure url

Updated missing url https://rawgit.com/abernier/3225993/raw/7f928620dbe65570950ab551ee06b82e480507bb/loop.js to https://cdn.jsdelivr.net/gh/abernier/3225993/raw/7f928620dbe65570950ab551ee06b82e480507bb/loop.js

https://code.jquery.com/jquery-1.11.1.js

https://underscorejs.org/underscore.js

https://rawgit.com/abernier/3225993/raw/7f928620dbe65570950ab551ee06b82e480507bb/loop.js