<!DOCTYPE html>
<html lang="en-us">
<head>
  <meta charset="utf-8">
  <title>Parallax using translateY</title>
  <link rel="stylesheet" href="demo-translate.css" />
</head>
<body>
  <div id="hero">
    <div id="hero-bg"></div>

    <div class="hero-content">
      <h1>Method #2</h1>
      <p>This parallax method is probably the most common one. It has the background image on a seperate element and 2d translates that element onscroll. We can do better than this.</p>
    </div>
  </div>

  <h1>Demo lorem</h1>