CodePen Embed - VwaYydM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Grid</title>
</head>
<body onload="scrollAnimation(animItems)">
    <div class="header">
        <h1 class="animation">Scroll animation</h1>
        <a href="#" class="animation">Link 1</a>
        <a href="#" class="animation">Link 2</a>
        <a href="#" class="animation">Link 3</a>
        <a href="#" class="animation">Link 4</a>
        <a href="#" class="animation">Link 5</a>
    </div>

    <div class="content">
        <div class="content__item animation">
            <div class="content__title">Lorem ipsum dolor sit amet.</div>
            <div class="content__text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minima, sed quasi quo totam illo at velit similique mollitia nobis laudantium, consequatur ea, illum optio qui harum doloribus. Quidem deserunt libero cumque est corporis soluta pariatur ab, fugit architecto totam rem alias, laudantium tempora voluptatibus. Aliquam, iste. Qui reprehenderit alias quidem?</div>
        </div>
        <div class="content__item animation">
            <div class="content__title">Lorem ipsum dolor sit amet.</div>
            <div class="content__text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minima, sed quasi quo totam illo at velit similique mollitia nobis laudantium, consequatur ea, illum optio qui harum doloribus. Quidem deserunt libero cumque est corporis soluta pariatur ab, fugit architecto totam rem alias, laudantium tempora voluptatibus. Aliquam, iste. Qui reprehenderit alias quidem?</div>
        </div>
        <div class="content__item animation">
            <div class="content__title">Lorem ipsum dolor sit amet.</div>
            <div class="content__text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minima, sed quasi quo totam illo at velit similique mollitia nobis laudantium, consequatur ea, illum optio qui harum doloribus. Quidem deserunt libero cumque est corporis soluta pariatur ab, fugit architecto totam rem alias, laudantium tempora voluptatibus. Aliquam, iste. Qui reprehenderit alias quidem?</div>
        </div>
        <div class="content__item animation">
            <div class="content__title">Lorem ipsum dolor sit amet.</div>
            <div class="content__text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minima, sed quasi quo totam illo at velit similique mollitia nobis laudantium, consequatur ea, illum optio qui harum doloribus. Quidem deserunt libero cumque est corporis soluta pariatur ab, fugit architecto totam rem alias, laudantium tempora voluptatibus. Aliquam, iste. Qui reprehenderit alias quidem?</div>
        </div>
        <div class="content__item animation">
            <div class="content__title">Lorem ipsum dolor sit amet.</div>
            <div class="content__text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minima, sed quasi quo totam illo at velit similique mollitia nobis laudantium, consequatur ea, illum optio qui harum doloribus. Quidem deserunt libero cumque est corporis soluta pariatur ab, fugit architecto totam rem alias, laudantium tempora voluptatibus. Aliquam, iste. Qui reprehenderit alias quidem?</div>
        </div>
        <div class="content__item animation">
            <div class="content__title">Lorem ipsum dolor sit amet.</div>
            <div class="content__text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minima, sed quasi quo totam illo at velit similique mollitia nobis laudantium, consequatur ea, illum optio qui harum doloribus. Quidem deserunt libero cumque est corporis soluta pariatur ab, fugit architecto totam rem alias, laudantium tempora voluptatibus. Aliquam, iste. Qui reprehenderit alias quidem?</div>
        </div>
        <div class="content__item animation">
            <div class="content__title">Lorem ipsum dolor sit amet.</div>
            <div class="content__text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minima, sed quasi quo totam illo at velit similique mollitia nobis laudantium, consequatur ea, illum optio qui harum doloribus. Quidem deserunt libero cumque est corporis soluta pariatur ab, fugit architecto totam rem alias, laudantium tempora voluptatibus. Aliquam, iste. Qui reprehenderit alias quidem?</div>
        </div>
        <div class="content__item animation">
            <div class="content__title">Lorem ipsum dolor sit amet.</div>
            <div class="content__text">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minima, sed quasi quo totam illo at velit similique mollitia nobis laudantium, consequatur ea, illum optio qui harum doloribus. Quidem deserunt libero cumque est corporis soluta pariatur ab, fugit architecto totam rem alias, laudantium tempora voluptatibus. Aliquam, iste. Qui reprehenderit alias quidem?</div>
        </div>
    </div>

    <div class="footer animation">
        © 2020 «Scroll animation»
    </div>
</body>
</html>

* {
  font-family: sans-serif;
}
body {
  margin: 0;
  overflow-x: hidden;
}
.header {
  display: flex;
  align-items: center;
  height: 70px;
  background: #222;
  padding: 0 25px 0 25px;
  color: white;
}
.header h1 {
  font-size: 26px;
  opacity: 0;
  transform: translate(-225px, 0px);
  transition: all 0.8s ease;
}
.header a:nth-child(2) {
  margin-left: auto;
}
.header a {
  margin-right: 15px;
  outline: none;
  text-decoration: none;
  font-size: 19px;
  color: white;
  transform: translate(0px, -45px);
  transition: all 0.8s ease;
}
.header a:hover {
  cursor:pointer;
  text-decoration: underline;
}
.header a:last-child {
  margin-right: 0px;
}
.footer {
  height: 45px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #111;
  color: white;
  transition: all 0.8s ease;
  opacity: 0;
}
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 25px 0 25px;
}
.content__item {
  margin-bottom: 10px;
  padding: 12px;
  background: #333;
  color: white;
  transform: translate(-102%, 0px);
  transition: all 1.6s ease;
}
.content__item:nth-child(even) {
  transform: translate(+102%, 0px);
}
.content__title {
  font-weight: bold;
}
.content__item:nth-child(1) {
  margin-top: 15px;
}
.content__item:last-child {
  margin-bottom: 15px;
}
h1.active, a.active, .content__item.active, .footer.active {
  opacity: 1;
  transform: translate(0px, 0px);
}

const animItems = document.querySelectorAll('.animation')

function elementInViewport(el) {
  let top = el.offsetTop
  let left = el.offsetLeft
  const width = el.offsetWidth
  const height = el.offsetHeight

  while (el.offsetParent) {
    el = el.offsetParent
    top += el.offsetTop
    left += el.offsetLeft
  }

  return (
    top >= window.pageYOffset &&
    left >= window.pageXOffset &&
    top + height <= window.pageYOffset + window.innerHeight &&
    left + width <= window.pageXOffset + window.innerWidth
  )
}

function scrollAnimation(items) {
  for (item of items) {
    if(elementInViewport(item)) item.classList.add('active')
  }
}

window.addEventListener('scroll', () => {
  scrollAnimation(animItems)
})

This Pen is owned by Afalor on CodePen.

See more by @Afalor on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.