<link href="https://fonts.googleapis.com/css?family=Oswald:300,500,600,700" rel="stylesheet">
<!-- <h1 id = "sub">A Language That Questions Itself</h1> -->
<div id="container">
<div id="txtlzr">
</div>
</div>
body {
background: #fcfcfc;
font-family: 'Oswald', sans-serif;
color: #444;
font-size: 16px;
border: 5px solid #444;
width: 95%;
height: 250px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
html{
text-align: center;
}
#txtlzr
{
font-size: 260%;
/* width: 700px; */
height: 300px;
margin-left: 50px;
font-family: 'Oswald';
/* text-align: center; */
margin-top: -50px;
/* border: 1px solid red; */
}
/* trying to figure out how to center horizintally and vertically */
.thing {
/* position: absolute;
margin-top: auto;
margin-bottom: auto; */
}
h1 {
font-size: 260%;
line-height: 1.2em;
/* text-align: center; */
padding-top: 5%;
padding-left: 27%;
}
var list = ["How Does A Poem Get Someone Out Of Prison?",
"How Does A Poem Get A Person Out Of Prison?",
"How Does A Poem Get My Friend Out Of Prison?",
"How Does A Poem Get My Brother Out Of Prison?",
"How Does A Poem Get Christopher Lester Hollis Out Of Prison?",
"How Does A Poem Get Everyone Out Of Prison?"]
// ['first blurb', 'second blurb', 'third blurb']; // list of blurbs
var txt = $('#txtlzr'); // The container in which to render the list
var options = {
duration: 1000, // Time (ms) each blurb will remain on screen
rearrangeDuration: 1000, // Time (ms) a character takes to reach its position
effect: 'random', // Animation effect the characters use to appear
centered: true // Centers the text relative to its container
}
txt.textualizer(list, options); // textualize it!
txt.textualizer('start'); // start
This Pen doesn't use any external CSS resources.