Teleprompter

by Ben Clayton

HTML

<html>

<head>
	<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
	<style>
		body {
			font-size:60px;
			transform: rotate3d(0, 1, 0, 180deg);
			font-family: arial;
			color:white;
			background-color:black;
			margin-left:15%;
			margin-right:15%;
			padding-top:50vh;
			padding-bottom:100vh;
		}
	</style>
</head>

<body>
But in the villages outside Jerusalem crowds were gathering ready to make the final push up into the city. Of course there was excitement – there always is in a crowd.  But imagine how this was increased as Jesus sent for, and sat, on the colt, accompanied by its mother.  For there was another collective memory which had been passed down the last few generations – the account of Judas Maccabeus who had ridden into Jerusalem to clear out the pagan sacrifices left by Antiochus Epiphanes. The temple had been rededicated in 164BC and the crowds on that occasion had waved palm branches and shouted ‘Hosanna!’, ‘the Lord saves!’

<script>
alert("Welcome to Teleprompter");
var t=-100;
setInterval(doit,30);

function doit(){
	window.scroll({
		top: t++, 
		left: 0, 
		behavior: 'smooth'
	});
	if ( t > window.innerHeight+200) t=0;
}
</script>
<body>
</html>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

#banner-message.alt {
  background: #0084ff;
  color: #fff;
  margin-top: 40px;
  width: 200px;
}

#banner-message.alt button {
  background: #fff;
  color: #000;
}

JavaScript

// find elements
var banner = $("#banner-message")
var button = $("button")

// handle click and add class
button.on("click", function(){
  banner.addClass("alt")
})