Typing Effect Keystone Animation Tweak - html

Question

I have a typing effect that I like, I want to use it for all my page titles, but the problem is it works by specifying a width. This would be fine for a homepage with a slogan, but if I ever decide to change it all of my width values would need to change too. Is there any way this can still function the same without being based on a width?
The example is what I'm using on my homepage, it's a slogan. But my title's would be single line text like: About, Contact, Support, News, etc.
My code looks like:
<div id="head">
<div class="wrap">
<div>
<p>We Create</p>
<p>Software for</p>
<p>People!!</p>
</div>
</div>
</div>
My CSS looks like:
#head {
background: #000;
height: 700px;
overflow: hidden;
position: relative;
}
#head .wrap {
height: 100%;
margin: 0 auto;
max-width: 850px;
position: relative;
width: 100%;
}
#head .wrap div {
align-items: center;
display: flex;
flex-direction: column;
letter-spacing: 2px;
height: 100%;
position: relative;
width: 100%;
}
#head .wrap div p {
border-right: 5px solid #b5cfd7;
color: #fff;
font-family: 'Montserrat', sans-serif;
font-size: 85px;
font-weight: 900;
margin-left: 10px;
overflow: hidden;
text-transform: uppercase;
white-space: nowrap;
}
#head .wrap div p:nth-child(1) {
animation: type 2s steps(20, end) 0s 1 normal forwards, blink .5s step-end 4s infinite alternate;
width: 575px;
}
#head .wrap div p:nth-child(2) {
animation: type2 2s steps(20, end) 2s 1 normal forwards, blink .5s step-end 4s infinite alternate;
opacity: 0;
width: 775px;
}
#head .wrap div p:nth-child(3) {
animation: type3 2s steps(20, end) 4s 1 normal forwards, blink .5s step-end 4s infinite alternate;
opacity: 0;
width: 475px;
}
/* Animation */
#keyframes type {
0% {
width: 0;
}
99.9% {
border-right: 5px solid #b5cfd7;
}
100% {
border: none;
}
}
/* Animation */
#keyframes type2 {
0% {
width: 0;
}
1% {
opacity: 1;
}
99.9% {
border-right: 5px solid #b5cfd7;
}
100% {
border: none;
opacity: 1;
}
}
/* Animation */
#keyframes type3 {
0% {
width: 0;
}
1% {
opacity: 1;
}
100% {
opacity: 1;
}
}
/* Animation */
#keyframes blink {
50% {
border-color: transparent;
}
}
Live Example: https://codepen.io/joshrodgers/pen/BaxxQzo
Any help is appreciated!
Thanks,
Josh

Answer 1

Ok...
So, I found a solution...it uses some JS, but that's the only way I could get it to work!
Here's how my code looks now:
<div id="head">
<div class="wrap">
<div class="row">
<div class="text">
<p>We create</p>
<p>Software for</p>
<p>People!!</p>
</div>
<div class="title"></div>
</div>
</div>
The CSS:
#head {
background: #000;
overflow: hidden;
position: relative;
}
#head .wrap {
display: flex;
flex: 1;
flex-direction: column;
height: 100%;
margin: 0 auto;
max-width: 850px;
position: relative;
text-align: center;
width: 100%;
}
#head .row {
align-items: center;
display: flex;
height: 100vh;
justify-content: center;
}
#head .text {
display: none;
}
#head .title {
position: relative;
z-index: 1;
}
#head .title span {
color: #fff;
display: block;
font-family: 'Montserrat', sans-serif;
font-size: 85px;
font-weight: 900;
letter-spacing: 2px;
height: 90px;
min-width: 5px;
text-transform: uppercase;
}
#head .cursor:after {
animation: blink 1s linear infinite alternate;
background: #b5cfd7;
content: "";
display: inline-block;
height: 75%;
margin-left: 30px;
opacity: 0;
width: 5px;
}
/* Animation */
#keyframes blink {
0% {
opacity: 0;
}
25% {
opacity: 1;
}
100% {
opacity: 0;
}
}
The JS:
var sentences = [];
var currentText;
$(document).ready(function(){
$('.text p').each(function(){
var text = $(this).text();
text += " ";
sentences.push(text);
});
currentText = sentences.shift();
typeWord(currentText);
});
jQuery.fn.extend({
appendChars: function(char){
$(this).text(char);
}
});
function spliter(string){
return string.trim().split("");
}
function appendTextLine(){
return $('<span class=""></span>').appendTo('.title');
}
function typeWord(text){
if (!text){
return;
}
var charArray = [];
for (i = 0; i < text.length; i++){
var char = text.slice(0,i);
charArray.push(char);
}
var textLine = appendTextLine();
$('.cursor').removeClass('cursor');
textLine.addClass('cursor');
var interval = setInterval(function(){
firstChar = charArray.shift();
$(textLine).appendChars(firstChar);
if (charArray.length === 0){
currentText = sentences.shift();
typeWord(currentText);
clearInterval(interval);
}
},100);
}
I have a pen here: https://codepen.io/joshrodgers/pen/yLjjzYb
Single line text version here: https://codepen.io/joshrodgers/pen/RwyJroQ
There were two problems with my initial code, it wouldn't work with dynamic text, which this solves because it's not based on a width and two the text was not centered in the window, which I didn't realize when I create this post, but the solution also solves that issue as well.
Hope this helps someone!
Thanks,
Josh