Scroll animations

Source: https://cssanimation.rocks/scroll-animations/

by Mukul kant

HTML

<link rel="stylesheet" href="https://cssanimation.rocks/levelup/public/03/02-end/stylesheets/main.css">
<header class="header show-on-scroll">
  <div class="main-photo"></div>
  <h1 class="heading">When the moon hits your eye</h1>
</header>
<article class="content">

  <p><strong>The history of pizza begins in antiquity, when various ancient cultures produced flatbreads with toppings.</strong></p>

  <p>The word pizza was first documented in AD 997 in Gaeta and successively in different parts of Central and Southern Italy. The precursor of pizza was probably the focaccia, a flat bread known to the Romans as panis focacius, to which toppings were then added.</p>

  <p>Modern pizza developed in Naples, when tomato was added to the focaccia in the late 18th century. However, pizza was mainly eaten in the country of Italy and by immigrants from there. This changed after World War II, when Allied troops stationed in Italy came to enjoy pizza along with other Italian foods.</p>

  <img src="https://cssanimation.rocks/levelup/public/03/02-end/images/pizza2.jpg" class="inline-photo show-on-scroll">

  <h2>Make an Italian pizza</h2>

  <p>(makes dough for 4 pizzas, each one about 12 inches in diameter)</p>

  <h3>Ingredients</h3>

  <ul>
    <li>600 mL of warm water</li>
    <li>7 cups (1kg) flour</li>
    <li>2.5 – 3 tablespoons (25 grams) of fresh yeast or 2 teaspoons (7-8 grams) of dried yeast</li>
    <li>6 tablespoons of extra virgin olive oil</li>
    <li>1.5 teaspoons salt</li>
    <li>2 teaspoons sugar</li>
  </ul>

  <img src="https://cssanimation.rocks/levelup/public/03/02-end/images/pizza.jpg" class="inline-photo show-on-scroll">

  <h3>Method</h3>

  <p>Sprinkle the yeast into a medium bowl with the warm water. We don’t mean hot, and we don’t mean cold… we mean warm! That’s the kind the yeast likes best. Stir until the yeast dissolves.</p>

  <p>Place almost all of the flour on the table in the shape of a volcano. (Think Mt. Vesuvius… appropriate since Naples...

CSS

.inline-photo {
  border: 1em solid #fff;
  border-bottom: 4em solid #fff;
  border-radius: .25em;
  box-shadow: 1em 1em 2em .25em rgba(0,0,0,.2);
  margin: 2em auto;
  opacity: 0;
  transform: translateY(4em) rotateZ(-5deg);
  transition: transform 4s .25s cubic-bezier(0,1,.3,1),
    opacity .3s .25s ease-out;
  max-width: 600px;
  width: 90%;
  will-change: transform, opacity;
}

.inline-photo.is-visible {
  opacity: 1;
  transform: rotateZ(-2deg);
}

header {
  opacity: 0;
  transition: opacity .5s .25s ease-out;
}

header.is-visible {
  opacity: 1;
}

.main-photo {
  transform: scale(.8);
}

.heading {
  transform: translate(-50%, calc(-50% + 1em));
}

.is-visible .main-photo {
  transform: none;
}

.is-visible .heading {
  transform: translate(-50%, -50%);
}

.main-photo,
.heading {
  transition: transform 4s .25s cubic-bezier(0,1,.3,1),
    filter 10s 2s ease-out;
  will-change: transform;
}

JavaScript

// Detect request animation frame
var scroll = window.requestAnimationFrame ||
    // IE Fallback
    function(callback){ window.setTimeout(callback, 1000/60)};
var elementsToShow = document.querySelectorAll('.show-on-scroll'); 

function loop() {

  Array.prototype.forEach.call(elementsToShow, function(element){
    if (isElementInViewport(element)) {
      element.classList.add('is-visible');
    } else {
      element.classList.remove('is-visible');
    }
  });

  scroll(loop);
}

// Call the loop for the first time
loop();

// Helper function from: http://stackoverflow.com/a/7557433/274826


function isElementInViewport(el) {
  // special bonus for those using jQuery
  if (typeof jQuery === "function" && el instanceof jQuery) {
    el = el[0];
  }
  var rect = el.getBoundingClientRect();
  return (
    (rect.top <= 0
     && rect.bottom >= 0)
    ||
    (rect.bottom >= (window.innerHeight || document.documentElement.clientHeight) &&
     rect.top <= (window.innerHeight || document.documentElement.clientHeight))
    ||
    (rect.top >= 0 &&
     rect.bottom <= (window.innerHeight || document.documentElement.clientHeight))
  );
}