Copy‑and‑Paste Parallax Scroll Effect (JavaScript)

• Home
• Javascript | Samples
• Copy‑and‑Paste Parallax Scroll Effect (JavaScript)

Demo

Scroll upward, and when an element enters the lower 20% of the screen, it will animate upward from the bottom and appear on the screen.

HTML & JavaScript Source Code

<script>
let elms;
window.addEventListener("DOMContentLoaded", function () {
  elms = document.getElementsByClassName("mamParallax");

  // Set initial opacity to 0 for all target elements
  for (i = 0; i < elms.length; i++) {
    elms[i].style.opacity = "0.0";
  }

  let css = document.createElement('style');
  document.head.appendChild(css);

  // translateY(20vh) cannot be used for animation in IE, so use translateY(100px) instead
  let keyframe = '@keyframes mamParallax{' +
    '  0%{transform:translateY(200px);opacity:0.0;} ' +
    '100%{transform:translateY(0px);opacity:1.0;} ' +
  '}';
  css.sheet.insertRule(keyframe, 0);
});

window.addEventListener("load", function () {
  window.addEventListener("scroll", onScrollShow);
  onScrollShow();
});

function onScrollShow() {
  // Get current scroll position
  let scrollY = window.pageYOffset || document.documentElement.scrollTop;

  // Window height
  let windowH = window.innerHeight;

  // Threshold (trigger when entering the lower 20% of the screen)
  let threshHold = windowH * 20 / 100;

  let elms = document.getElementsByClassName("mamParallax");
  for (i = 0; i < elms.length; i++) {
    let r = elms[i].getBoundingClientRect();

    if (r.top < (windowH - threshHold)) {

      // IE11 cannot handle animation-duration when set in a single shorthand property
      // elms[i].style.animation = "mamParallax 1.0s linear 0s 1 normal both running";

      // Setting animation properties individually works in IE11
      elms[i].style.animationName = "mamParallax";
      elms[i].style.animationDuration = "1.0s";
      elms[i].style.animationTimingFunction = "ease-in-out";
      elms[i].style.animationDelay = "0";
      elms[i].style.animationIterationCount = "1";
      elms[i].style.animationDirection = "normal";
      elms[i].style.animationFillMode = "both";
      elms[i].style.animationPlayState = "running";
    }
  }
}

// Force scroll position to (0,0) when reloading the page
window.addEventListener("beforeunload", function () {
  window.scrollTo(0, 0);
});
</script>

<div class="mamParallax">
  <h4 class="standard">1. Scroll down</h4>
  <p class="normal">Description goes here.<br>Second line of the description.<br>Third line of the description.</p>
  <p class="normal">Description goes here.<br>Second line of the description.<br>Third line of the description.</p>
  <p class="normal">Description goes here.<br>Second line of the description.<br>Third line of the description.</p>
</div>

<div style="margin:50px;"></div>

<div class="mamParallax">
  <h4 class="standard">2. Scroll down</h4>
  <p class="normal">Description goes here.<br>Second line of the description.<br>Third line of the description.</p>
  <p class="normal">Description goes here.<br>Second line of the description.<br>Third line of the description.</p>
  <p class="normal">Description goes here.<br>Second line of the description.<br>Third line of the description.</p>
</div>

<div style="margin:50px;"></div>

<div class="mamParallax">
  <h4 class="standard">3. Scroll down</h4>
  <p class="normal">Description goes here.<br>Second line of the description.<br>Third line of the description.</p>
  <p class="normal">Description goes here.<br>Second line of the description.<br>Third line of the description.</p>
  <p class="normal">Description goes here.<br>Second line of the description.<br>Third line of the description.</p>
</div>

<div style="margin:50px;"></div>

<div class="mamParallax">
  <h4 class="standard">4. Scroll down</h4>
  <p class="normal">Description goes here.<br>Second line of the description.<br>Third line of the description.</p>
  <p class="normal">Description goes here.<br>Second line of the description.<br>Third line of the description.</p>
  <p class="normal">Description goes here.<br>Second line of the description.<br>Third line of the description.</p>
  <p class="normal"><img src="./imgs/c001.jpg" width="640" height="480" style="width:320px;max-width:90%;height:auto;"></p>
</div>

<div style="margin:50px;"></div>

<div class="mamParallax">
  <h4 class="standard">5. Scroll down</h4>
  <p class="normal">Description goes here.<br>Second line of the description.<br>Third line of the description.</p>
  <p class="normal">Description goes here.<br>Second line of the description.<br>Third line of the description.</p>
  <p class="normal"><img src="./imgs/c002.jpg" width="640" height="480" style="width:320px;max-width:90%;height:auto;"></p>
  <p class="normal">Description goes here.<br>Second line of the description.<br>Third line of the description.</p>
</div>

<div style="margin:50px;"></div>

<div class="mamParallax">
  <h4 class="standard">6. Scroll down</h4>
  <p class="normal">Description goes here.<br>Second line of the description.<br>Third line of the description.</p>
  <p class="normal">Description goes here.<br>Second line of the description.<br>Third line of the description.</p>
  <p class="normal">Description goes here.<br>Second line of the description.<br>Third line of the description.</p>
</div>

<div style="margin:50px;"></div>

<div class="mamParallax">
  <h4 class="standard">7. Scroll down</h4>
  <p class="normal">Description goes here.<br>Second line of the description.<br>Third line of the description.</p>
  <p class="normal">Description goes here.<br>Second line of the description.<br>Third line of the description.</p>
  <p class="normal">Description goes here.<br>Second line of the description.<br>Third line of the description.</p>
</div>