JSFiddle - React, Tailwind, and code Playground

by HDL52

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/rellax/1.6.2/rellax.min.js"></script>
<div id="hero">
  <div id="bike" class="rellax" data-rellax-speed="-5">
    <img src="https://jeffbredenkamp.neocities.org/bike-min.png" alt="bike" />
  </div>
  <div id="kaneda" class="rellax" data-rellax-speed="-3">
    <img
      src="https://jeffbredenkamp.neocities.org/kaneda-min.png"
      alt="Kaneda"
    />
  </div>
  <div id="akira" class="rellax" data-rellax-speed="-1">
    <img src="https://jeffbredenkamp.neocities.org/akira-min.png" alt="Akira" />
  </div>
</div>
<div id="content">
  <div class="container">
    <h2>Akira <span>アキラ</span></h2>
    <img src="https://jeffbredenkamp.neocities.org/redline-min.png" alt="" />
    <p>
      Often stylized as AKIRA, is a Japanese manga series written and
      illustrated by mangaka Katsuhiro Otomo. Initially serialized in the pages
      of Young Magazine from 1982 until 1990, the work was collected into six
      volumes by its publisher Kodansha. The work was published in the United
      States by Marvel Comics under their Epic Comics imprint, becoming one of
      the first manga works to be translated in its entirety into English.
      Otomo's art is considered outstanding, and a watershed for both Otomo and
      the manga form.
    </p>
    <p>
      Set in a post-apocalyptic and futuristic Neo-Tokyo, the manga focuses on
      the efforts of a teenaged biker gang leader Kaneda, political activist
      Kei, a trio of Espers, and Neo-Tokyo's military leader Colonel Shikishima
      to prevent Tetsuo, Kaneda's mentally-fractured childhood friend, from
      using his unstable telekinetic abilities to ravage the city and awaken a
      mysterious individual with similar psychic abilities named "Akira".
      Through this work, Otomo uses conventions of the cyberpunk genre to detail
      a saga of political turmoil, social isolation, corruption, and power.
    </p>
    <p>
      An animated film adaptation (anime)...

CSS

@import url("https://fonts.googleapis.com/css?family=Roboto:400,700");

html,
body {
  margin: 0;
  padding: 0;
  font-family: "Roboto", sans-serif;
  text-rendering: optimizeLegibility;
  color: white;
  overflow-x: hidden;
}
* {
  box-sizing: border-box;
}
img {
  max-width: 100%;
  height: auto;
}
.container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 0 20px;
}
h2 {
  font-size: 3rem;
  text-transform: uppercase;
  margin: 0;
  font-weight: 900;
}
p {
  line-height: 1.6;
}
h2 span {
  font-size: 1.2rem;
}
.absolute {
  position: absolute;
  width: 100%;
  height: auto;
  margin-top: 100px;
}
#hero {
  background: #e9e9e9;
  overflow: hidden;
  position: relative;
  min-height: 850px;
  background-image: url(https://jeffbredenkamp.neocities.org/bg_line-min.png),
    url(https://jeffbredenkamp.neocities.org/bg-min.png);
  background-position: top center;
  background-repeat: repeat-y, repeat;
}
#hero #bike {
  position: absolute;
  left: 50%;
  margin-left: -275px;
  top: 50px;
  width: 550px;
  text-align: center;
}
#hero #kaneda {
  position: absolute;
  left: 0;
  right: 0;
  top: 270px;
  margin-left: auto;
  margin-right: auto;
  max-width: 600px;
  text-align: center;
}
#hero #kaneda img {
  max-width: 180px;
}
#hero #akira {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 50px;
  margin-left: auto;
  margin-right: auto;
  max-width: 350px;
  text-align: center;
}
#content {
  padding: 100px 0;
  background: #1c1c1c;
  background-image: url(https://jeffbredenkamp.neocities.org/bg_content-min.png),
    url(https://jeffbredenkamp.neocities.org/bg_grey-min.png);
  background-position: top;
  background-repeat: repeat-x, repeat;
}

JavaScript

var rellax = new Rellax(".rellax", {
  speed: -2,
  center: false,
  round: true,
  vertical: true,
  horizontal: false,
})