dominiccooney/index.html

## index.html
<!DOCTYPE html>
<title>Hello, World</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
}

#content {
  margin: 2em;
}

#counter {
  display: inline-block;
}

#counter.bump {
  animation-duration: 1s;
  animation-name: bump;
  animation-direction: alternate;
  animation-iteration-count: 2;
}

@keyframes bump {
  from {
    transform: scale(1, 1);
    color: black;
  }

  to {
    transform: scale(20, 20);
    color: green;
  }
}

iframe {
  border: 1px solid red;
  /* TODO(dominicc): Remove this duplication with a CSS variable after M49. */
  width: calc(100vw - 2px);
  height: calc(100vw - 2px);
}
</style>
<iframe id="f" src="data:text/html,<style>* { background: black; }"></iframe>
<div id="content">
<h1>Sic transit gloria mundi</h1>
<p>Scrolled <span id="counter">0</span> times.

<p>
<a href="#" onclick="f.src = 'data:text/html,<style>* { background: black; }'; return false;">Light frame</a>
<a href="#" onclick="f.src = 'https://rawgit.com/coonsta/2dcfaccb153bd2903a8b/raw/da6431bcebf288c6d8405e546adcead8f2903ef5/julia.html'; return false;">Heavy frame</a>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi blandit
congue lacus, sed tincidunt eros scelerisque non. Sed id lacus in diam
commodo faucibus. Duis purus augue, ultricies vitae consectetur non,
laoreet sagittis libero. Cras tincidunt quam ut dui aliquam sagittis
sed vel turpis. Phasellus neque elit, sollicitudin sed sodales sed,
fermentum non sem. Vivamus felis leo, volutpat ac lectus volutpat,
finibus euismod libero. Proin velit ipsum, bibendum id venenatis vel,
rhoncus sed sem. Mauris mollis hendrerit arcu, eget fermentum nunc
fringilla vitae. Duis volutpat sollicitudin venenatis. Donec dapibus
laoreet pulvinar. Pellentesque fringilla ante massa, id suscipit nisi
porttitor ut. Morbi rhoncus accumsan nisl, at ultrices enim tempus
ac. Pellentesque dolor nunc, dapibus in dui ac, ornare sodales
magna. Nullam ullamcorper metus in velit cursus, sed pretium sapien
fringilla.

<p>Pellentesque volutpat ante iaculis risus ornare tincidunt. Vivamus
suscipit enim at tortor bibendum, et molestie neque
condimentum. Vivamus maximus porta orci sit amet feugiat. Quisque
mollis urna non ante venenatis, ac cursus magna condimentum. Sed est
enim, auctor eu maximus quis, mollis non purus. Sed lobortis nisi
massa, in sollicitudin magna gravida nec. Sed nibh mi, iaculis non
feugiat eget, mattis ornare nulla.

<p>Aliquam pretium sagittis dictum. Suspendisse et eros nibh. Aenean
pharetra a magna et ultricies. Mauris scelerisque quam eu augue
hendrerit malesuada. Nullam sagittis mauris ac tristique
ullamcorper. Ut mattis sit amet nisi sed pellentesque. Pellentesque
congue vitae justo sed tristique. Quisque aliquam elit odio, a
faucibus erat aliquet sit amet.

<p>Morbi imperdiet tincidunt arcu, eget vulputate nunc egestas a. Nulla
convallis pretium lorem. Vestibulum condimentum, risus finibus
placerat bibendum, purus nulla laoreet diam, quis aliquam enim leo a
justo. Pellentesque sagittis pretium consequat. Nulla iaculis
venenatis mauris eget porta. Mauris finibus ligula et sapien sagittis,
id molestie tellus rutrum. Ut ac gravida lacus, sed mollis lorem. Ut
scelerisque faucibus fringilla. Aliquam laoreet sit amet nisi id
iaculis. Quisque ut dapibus arcu. Vestibulum facilisis dignissim dui,
vitae mattis magna rhoncus nec. Ut est tortor, condimentum in viverra
ac, tristique sed magna. Donec interdum malesuada nulla sit amet
mattis. Suspendisse tellus metus, vehicula a dui sed, pulvinar
placerat est.

<p>Cras consequat mauris fringilla, pretium erat nec, aliquam
dolor. Mauris in maximus massa, non ullamcorper ipsum. Integer vel
convallis purus. Nunc ac mi mauris. Phasellus elementum ligula ut
sollicitudin lobortis. Pellentesque eleifend volutpat enim in
aliquam. Pellentesque odio massa, euismod sed posuere non, ultrices
bibendum dui. Nulla non ullamcorper odio. Mauris ex sem, scelerisque
nec venenatis ac, facilisis non sem.
</div>
<script>
(() => {
  var n = 0;
  var bumping = false;
  var counter = document.querySelector('#counter');
  counter.addEventListener('animationend', () => {
    bumping = false;
    counter.classList.remove('bump');
  }, false);
  window.addEventListener('scroll', () => {
    counter.textContent = '' + ++n;
    if (!bumping) {
      bumping = true;
      counter.classList.add('bump');
    }
  });
})();
</script>
	<!DOCTYPE html>
	<title>Hello, World</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
	body {
	margin: 0;
	}

	#content {
	margin: 2em;
	}

	#counter {
	display: inline-block;
	}

	#counter.bump {
	animation-duration: 1s;
	animation-name: bump;
	animation-direction: alternate;
	animation-iteration-count: 2;
	}

	@keyframes bump {
	from {
	transform: scale(1, 1);
	color: black;
	}

	to {
	transform: scale(20, 20);
	color: green;
	}
	}

	iframe {
	border: 1px solid red;
	/* TODO(dominicc): Remove this duplication with a CSS variable after M49. */
	width: calc(100vw - 2px);
	height: calc(100vw - 2px);
	}
	</style>
	<iframe id="f" src="data:text/html,<style>* { background: black; }"></iframe>
	<div id="content">
	<h1>Sic transit gloria mundi</h1>
	<p>Scrolled <span id="counter">0</span> times.

	<p>
	<a href="#" onclick="f.src = 'data:text/html,<style>* { background: black; }'; return false;">Light frame</a>
	<a href="#" onclick="f.src = 'https://rawgit.com/coonsta/2dcfaccb153bd2903a8b/raw/da6431bcebf288c6d8405e546adcead8f2903ef5/julia.html'; return false;">Heavy frame</a>

	<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi blandit
	congue lacus, sed tincidunt eros scelerisque non. Sed id lacus in diam
	commodo faucibus. Duis purus augue, ultricies vitae consectetur non,
	laoreet sagittis libero. Cras tincidunt quam ut dui aliquam sagittis
	sed vel turpis. Phasellus neque elit, sollicitudin sed sodales sed,
	fermentum non sem. Vivamus felis leo, volutpat ac lectus volutpat,
	finibus euismod libero. Proin velit ipsum, bibendum id venenatis vel,
	rhoncus sed sem. Mauris mollis hendrerit arcu, eget fermentum nunc
	fringilla vitae. Duis volutpat sollicitudin venenatis. Donec dapibus
	laoreet pulvinar. Pellentesque fringilla ante massa, id suscipit nisi
	porttitor ut. Morbi rhoncus accumsan nisl, at ultrices enim tempus
	ac. Pellentesque dolor nunc, dapibus in dui ac, ornare sodales
	magna. Nullam ullamcorper metus in velit cursus, sed pretium sapien
	fringilla.

	<p>Pellentesque volutpat ante iaculis risus ornare tincidunt. Vivamus
	suscipit enim at tortor bibendum, et molestie neque
	condimentum. Vivamus maximus porta orci sit amet feugiat. Quisque
	mollis urna non ante venenatis, ac cursus magna condimentum. Sed est
	enim, auctor eu maximus quis, mollis non purus. Sed lobortis nisi
	massa, in sollicitudin magna gravida nec. Sed nibh mi, iaculis non
	feugiat eget, mattis ornare nulla.

	<p>Aliquam pretium sagittis dictum. Suspendisse et eros nibh. Aenean
	pharetra a magna et ultricies. Mauris scelerisque quam eu augue
	hendrerit malesuada. Nullam sagittis mauris ac tristique
	ullamcorper. Ut mattis sit amet nisi sed pellentesque. Pellentesque
	congue vitae justo sed tristique. Quisque aliquam elit odio, a
	faucibus erat aliquet sit amet.

	<p>Morbi imperdiet tincidunt arcu, eget vulputate nunc egestas a. Nulla
	convallis pretium lorem. Vestibulum condimentum, risus finibus
	placerat bibendum, purus nulla laoreet diam, quis aliquam enim leo a
	justo. Pellentesque sagittis pretium consequat. Nulla iaculis
	venenatis mauris eget porta. Mauris finibus ligula et sapien sagittis,
	id molestie tellus rutrum. Ut ac gravida lacus, sed mollis lorem. Ut
	scelerisque faucibus fringilla. Aliquam laoreet sit amet nisi id
	iaculis. Quisque ut dapibus arcu. Vestibulum facilisis dignissim dui,
	vitae mattis magna rhoncus nec. Ut est tortor, condimentum in viverra
	ac, tristique sed magna. Donec interdum malesuada nulla sit amet
	mattis. Suspendisse tellus metus, vehicula a dui sed, pulvinar
	placerat est.

	<p>Cras consequat mauris fringilla, pretium erat nec, aliquam
	dolor. Mauris in maximus massa, non ullamcorper ipsum. Integer vel
	convallis purus. Nunc ac mi mauris. Phasellus elementum ligula ut
	sollicitudin lobortis. Pellentesque eleifend volutpat enim in
	aliquam. Pellentesque odio massa, euismod sed posuere non, ultrices
	bibendum dui. Nulla non ullamcorper odio. Mauris ex sem, scelerisque
	nec venenatis ac, facilisis non sem.
	</div>
	<script>
	(() => {
	var n = 0;
	var bumping = false;
	var counter = document.querySelector('#counter');
	counter.addEventListener('animationend', () => {
	bumping = false;
	counter.classList.remove('bump');
	}, false);
	window.addEventListener('scroll', () => {
	counter.textContent = '' + ++n;
	if (!bumping) {
	bumping = true;
	counter.classList.add('bump');
	}
	});
	})();
	</script>