<div id="marquee">
	<div><span>STAY INDOORS: ZOMBIE OUTBREAK</span></div>
	<div aria-hidden="true"><span>STAY INDOORS: ZOMBIE OUTBREAK</span></div>
</div>
<form onsubmit="setText(event)">
  <label for="textsource">Source text</label>
<input type="text" id="textsource" value="STAY INDOORS: ZOMBIE OUTBREAK" autocapitalize="characters" pattern=".{5,30}" title="Text must be 5 to 30 characters in length">
<input type="submit" value="Use">
</form>
// 3D switched off on viewports less than 993px wide to preserve ledgibility

@font-face {
  font-family: Agency;
   src: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/agency-fb-bold.woff);
}
body { 
  font-family: Avenir, sans-serif;
  marging: 0;
}
#marquee { 
  margin-top: 3rem;
	perspective: 500px;
	font-size: 0;
	font-family: Agency, sans-serif;
}
#marquee div {
	display: inline-block; 
	height: 12rem; 
	width: 30rem;
	position: relative;
}
#marquee div:first-of-type { 
	background: #e5233e;
	transform-origin: top right;
	transform: rotateY(-40deg);
	color: #fff;
}
#marquee div:last-of-type {
	background: #b31e31;
	transform-origin: top left;
	transform: rotateY(45deg);
	color: #f8c9d9;
}
#marquee div { 
	font-size: 8rem;
	overflow: hidden;
}
#marquee div span { 
	position: absolute; 
	width: 400%;	
	line-height: 1.4;
}
@keyframes leftcrawl {
	to { transform: translateX(-100rem); }
}
@keyframes rightcrawl {
	to { transform: translateX(-130rem); }
}
#marquee div:first-of-type span {
	transform: translateX(60rem);
	animation: leftcrawl 14s linear infinite;
	text-shadow: 4px 0px 4px rgba(0,0,0,0.3);
}
#marquee div:last-of-type span {
	transform: translateX(30rem);
	animation: rightcrawl 14s linear infinite;
}
form { 
  margin-top: 3rem; 
  background: #334;
  padding: 1rem;
  text-align: center;
  color: #fff;
}
input[type="text"] { 
  padding: .5rem; 
  font-size: 1.2rem; 
  width: 22rem; 
}
input[type="text"] {
  padding: .5rem;
}
label {
  margin: 1rem;
}
@media all and (max-width: 993px) {
  #marquee {
    perspective: none;
  }
  #marquee div:last-of-type { 
    opacity: 0; 
    height: 0;
  }
  #marquee div:first-of-type {
    width: 80%;
  }
}
View Compiled
function setText(event){
  event.preventDefault();
  leftText.innerText = textsource.value.toUpperCase();
  rightText.innerText = textsource.value.toUpperCase();
}
var leftText = document.querySelector("#marquee div:first-of-type span");
var rightText = document.querySelector("#marquee div:last-of-type span");
var textsource = document.getElementById("textsource");
setText();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.