main
	ul.inner
		li
			p(data-js="reveal") SANDWICHES & PANCAKE
			p(data-js="reveal") GARDEN
			p(data-js="reveal") MORNING & TOMORROW & FRIEND
			p(data-js="reveal") ORANGE & BIRD & SHEEP & CUP & BUS
			p(data-js="reveal") APPLE & FRUIT & CAR
			p(data-js="reveal") CAKE & PICTURE & CAT & STAMP
			p(data-js="reveal") PLANE & BOOK & RACKET & GLASS & BED
		li
			p(data-js="reveal") APPLE<br>BANANA&nbsp;&amp;&nbsp;PINE APPLE&nbsp;&amp;&nbsp;SHEEP
			p(data-js="reveal") BANANA&nbsp;&amp;&nbsp;PINE APPLE
		li
			p(data-js="reveal") PUMPKIN&nbsp;&amp;&nbsp;TARO&nbsp;&amp;&nbsp;CARROT
		li
			p(data-js="reveal") HORSERADISH&nbsp;&amp;&nbsp;LETTUCE
			p(data-js="reveal") PUMPKIN&nbsp;&amp;&nbsp;TARO&nbsp;&amp;&nbsp;CARROT
			p(data-js="reveal") HORSERADISH&nbsp;&amp;&nbsp;LETTUCE
			p(data-js="reveal") POTATO&nbsp;&amp;&nbsp;BURDOCK
		li
			p(data-js="reveal") EGG&nbsp;&amp;&nbsp;BAG&nbsp;&amp;&nbsp;ROSE&nbsp;&amp;&nbsp;CHAIR&nbsp;&amp;&nbsp;BAT
			p(data-js="reveal") FISH&nbsp;&amp;&nbsp;NOTEBOOK&nbsp;&amp;&nbsp;PENCIL&nbsp;&amp;&nbsp;DOG&nbsp;&amp;&nbsp;DESK
			p(data-js="reveal") WATCH&nbsp;&amp;&nbsp;MITT&nbsp;&amp;&nbsp;MILK&nbsp;&amp;&nbsp;FLOWER
			p(data-js="reveal") DOOR&nbsp;&amp;&nbsp;BOAT&nbsp;&amp;&nbsp;PIANO&nbsp;&amp;&nbsp;
		li
			p(data-js="reveal") POTATO&nbsp;&amp;&nbsp;BURDOCK
			p(data-js="reveal") APPLE<br>BANANA&nbsp;&amp;&nbsp;PINE APPLE
			p(data-js="reveal") LETTER<br>CAP&nbsp;&amp;&nbsp;TAPE&nbsp;&amp;&nbsp;MAIL&nbsp;&amp;&nbsp;BOX
		li
			p(data-js="reveal") APPLE<br>BANANA&nbsp;&amp;&nbsp;PINE APPLE
			p(data-js="reveal") TURNIP&nbsp;&amp;&nbsp;OKRA&nbsp;&amp;&nbsp;PEA
		li
			p(data-js="reveal") SHIITAKE&nbsp;&amp;&nbsp;BEEFSTEAK PLANT
		li
			p(data-js="reveal")
				a(href="https://github.com/okawa-h") GIT&nbsp;HUB
View Compiled

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #000;
}

main {
  padding: 10vw 0;
}

ul {
  width: 100%;
  max-width: 70%;
  margin: 0 auto;
}

li {
  margin: 10vw 0;
  text-align: left;
}

p {
  display: block;
  color: #fff;
  font-family: 'Lato', sans-serif;
  font-size: 2vw;
  font-weight: 900;
  line-height: 1.2;
}

p + p {
  margin-top: 10px;
}

li:first-child {
  margin-top: 0;
}

li:last-child {
  margin-bottom: 0;
}

li:nth-child(even) {
  text-align: right;
}

a {
  color: #fff;
}

a:hover {
  text-decoration: none;
}

[data-js="reveal"] {
}

[data-reveal="content"] {
  display: inline-block;
  position: relative;
}

[data-reveal="cover"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  z-index: 1;
}

[data-reveal="text"] {
  opacity: 0;
}

@keyframes reveal-cover {
    0%   { width: 0;left: 0; }
    44%  { width: 100%;left: 0; }
    54%  { width: 100%;left: 0;  }
    100% { width: 0;left: 100%; }
}

@keyframes reveal-text {
    0%   { opacity: 0; }
    44%  { opacity: 0; }
    54%  { opacity: 1; }
}

[data-js="reveal"].loaded [data-reveal="cover"] {
  animation: reveal-cover 1.5s ease-in-out;
}

[data-js="reveal"].loaded [data-reveal="text"] {
  opacity: 1;
  animation: reveal-text 1.5s ease-in-out;
}
View Compiled

const COLOR_LIST = ['#7f00ff','#ff00ff','#0000ff','#007fff','#00ffff'];
let $targetList;

const init = () => {

 $targetList = document.querySelectorAll('[data-js="reveal"]');

 setup();

 window.addEventListener('scroll',onScroll,false);
 window.dispatchEvent(new Event('scroll'));

}

const getArrayRandomValue = (array) => array[Math.floor(Math.random() * array.length)];

const setup = () => {

 for (const $target of $targetList) {

	const content = $target.innerHTML;
	const color   = 'revealColor' in $target.dataset ? $target.dataset.revealColor : getArrayRandomValue(COLOR_LIST);
	$target.innerHTML = `<span data-reveal="content"><div data-reveal="cover" style="background-color:${color}"></div><span data-reveal="text">${content}</span></span>`;

 }

}

const onScroll = () => {

 const windowH      = window.innerHeight;
 const scrollTop    = document.documentElement.scrollTop || document.body.scrollTop;
 const isMostScroll = document.body.clientHeight <= scrollTop + windowH;

 for (const $target of $targetList) {

	if ($target.classList.contains('loaded')) continue;

	const rect = $target.getBoundingClientRect();
	const top  = rect.top + scrollTop;
	if (isMostScroll || top <= scrollTop + (windowH * .8)) $target.classList.add('loaded');

 }

}

document.addEventListener('DOMContentLoaded',init,false);
View Compiled
Run Pen

External CSS

  1. https://fonts.googleapis.com/css?family=Lato:400,900&amp;display=swap

External JavaScript

This Pen doesn't use any external JavaScript resources.