<section data-identity="Batman">
<blockquote>
I am
<span></span>
</blockquote>
</section>
<div class="pen__lines-wrapper">
<div class="pen__line"></div>
<div class="pen__line"></div>
<div class="pen__line"></div>
<div class="pen__line"></div>
<div class="pen__line"></div>
<div class="pen__line"></div>
<div class="pen__line"></div>
<div class="pen__line"></div>
<div class="pen__line"></div>
<div class="pen__line"></div>
</div>
* {
box-sizing: border-box;
}
body {
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background-color: white;
color: rgb(60, 60, 80);
font-family: 'Montserrat';
font-weight: 800;
font-size: 3em;
overflow: hidden;
}
section {
position: relative;
z-index: 1;
&::after {
text-transform: uppercase;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 2.5em;
letter-spacing: 0.5em;
content: attr(data-identity);
color: #EAEAF2;
z-index: -1;
animation: animLetterSpacing 4500ms infinite ease-in-out;
}
}
.pen__lines-wrapper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
display: flex;
}
.pen__line {
flex: 1;
border-right: solid 1px #EAEAF2;
opacity: 0.8;
position: relative;
}
span {
font-family: "Libre baskerville";
font-style: italic;
display: inline-block;
color: #ff0333;
}
@keyframes animLetterSpacing {
0% {
letter-spacing: 2.5em;
opacity: 0;
}
40% {
opacity: 1;
letter-spacing: 0.5em;
}
70% {
letter-spacing: 0.75em;
}
100% {
letter-spacing: 2.5em;
}
}
View Compiled
var index = 0;
var data= ["Batman", "your father", "no man", "Groot", "Spartacus", "Julius fucking Caesar", "no one", "Dracula", "Lord Voldemort", "the black wizards", "whatever you say I am, if I wasn't, then why would I say I am ? In the news, the papers everyday I am, radio won't even play my jam.", "the one, I'm the one! "];
var span= document.querySelector('span');
var section= document.querySelector('section');
function init() {
let txt = document.createTextNode(data[index]);
section.dataset.identity = data[index];
span.innerText = txt.textContent;
index++;
}
init();
setInterval(
function(){
let txt = document.createTextNode(data[index]);
section.dataset.identity = data[index];
span.innerText = txt.textContent;
index++;
index = index < data.length ? index++ : 0 ;
}
, 4501);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.