I created a grid, and in 6 grid boxes I wanted to have a blurred image that becomes clear on hover, which was easy i suppose and text next to it with a typewriter effect. This is some code I found on the typewriter effect. But I can’t seem to make it work. the cursor line is huge and spans the entire paragraph and it goes through the text really slowly.
I kind of understand what this code does a little, I was hoping to learn something from doing this, but if i can’t make it work, there is nothing to learn. As an alternative, from the limited coding knowledge i have, I thought about creating a c++ loop, since in c++ text is considered to be an array of letters. So a function that would loop through the text, add a letter and then write,delete,write, delete a “|” symbol after each new element, but I don’t know how I would add that into the website.
HTML
<div id="box_1">
<img id="box_1_img" src="/images/artmainpage/pic1.jpg" alt="Image cannot be displayed">
<span id="box_1_para">
<div class="text_hide"></div>
<div class="text1">Cras egestas porttitor ante, ut iaculis nulla facilisis sit amet. Pellentesque tristique erat est, eget consectetur nunc pulvinar vel. Aliquam vel lorem et massa auctor dictum vitae at tellus. Suspendisse potenti.</div>
<div class="text_cursor"></div>
</span>
</div>
CSS
#box_1
{
grid-area: b;
border: 1px dotted red;
margin: 2px;
display: flex;
align-items: center;
justify-content: space-around;
}
#box_1_img
{
margin-left: 10px;
height: 80%;
filter: blur(1px);
background: (255,255,255,0.1);
backdrop-filter: blur(6px);
transition: all .5s ease-in-out;
}
#box_1_img:hover
{
margin-left: 10px;
height: 90%;
transition: all .5s ease-in-out;
filter: blur(0px);
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
#box_1_para
{
margin-left: 10px;
margin-right: 10px;
font-family: 'Courier New', Courier, monospace;
font-size: small;
position: relative;
}
.text_hide{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: white;
}
.text_cursor{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: transparent;
border-left: 3px solid black;
}
JS
function typing_animation() {
let text_element = document.querySelector(".text1");
let text_array = text_element.innerHTML.split("");
let text_array_slice = text_element.innerHTML.split(" ");
let text_len = text_array.length;
const word_len = text_array_slice.map((word) => {
return word.length;
})
console.log(word_len);
let timings = {
easing: `steps(${Number(word_len[0] + 1)}, end)`,
delay: 1000,
duration: 1000,
fill: 'forwards'
}
let cursor_timings = {
duration: 700,
iterations: Infinity,
easing: 'cubic-bezier(0,.26,.44,.93)'
}
document.querySelector(".text_cursor").animate([
{
opacity: 0
},
{
opacity: 0, offset: 0.7
},
{
opacity: 1
}
], cursor_timings);
if (text_array_slice.length == 1) {
timings.easing = `steps(${Number(word_len[0])}, end)`;
let reveal_animation = document.querySelector(".text_hide").animate([
{ left: '0%' },
{ left: `${(100 / text_len) * (word_len[0])}%` }
], timings);
document.querySelector(".text_cursor").animate([
{ left: '0%' },
{ left: `${(100 / text_len) * (word_len[0])}%` }
], timings);
reveal_animation.onfinish = () => {
setTimeout(() => {
document.querySelector('.text_hide').animate([
{left: '0%'}
], {
duration: 2000,
easing: 'cubic-bezier(.73,0,.38,.88)'
});
document.querySelector('.text_cursor').animate([
{left: '0%'}
], {
duration: 2000,
easing: 'cubic-bezier(.73,0,.38,.88)'
});
typing_animation();
}, 1000);
}
} else {
document.querySelector(".text_hide").animate([
{ left: '0%' },
{ left: `${(100 / text_len) * (word_len[0] + 1)}%` }
], timings);
document.querySelector(".text_cursor").animate([
{ left: '0%' },
{ left: `${(100 / text_len) * (word_len[0] + 1)}%` }
], timings);
}
for (let i = 1; i < text_array_slice.length; i++) {
console.log(word_len);
console.log(text_array_slice.length);
const single_word_len = word_len[i];
console.log(single_word_len);
if (i == 1) {
var left_instance = (100 / text_len) * (word_len[i - 1] + 1);
console.log(left_instance);
}
let timings_2 = {
easing: `steps(${Number(single_word_len + 1)}, end)`,
delay: (2 * (i + 1) + (2 * i)) * (1000),
// delay: ((i*2)-1)*1000,
duration: 2000,
fill: 'forwards'
}
if (i == (text_array_slice.length - 1)) {
timings_2.easing = `steps(${Number(single_word_len)}, end)`;
let reveal_animation = document.querySelector(".text_hide").animate([
{ left: `${left_instance}%` },
{ left: `${left_instance + ((100 / text_len) * (word_len[i]))}%` }
], timings_2);
document.querySelector(".text_cursor").animate([
{ left: `${left_instance}%` },
{ left: `${left_instance + ((100 / text_len) * (word_len[i]))}%` }
], timings_2);
reveal_animation.onfinish = () => {
setTimeout(() => {
document.querySelector('.text_hide').animate([
{left: '0%'}
], {
duration: 2000,
easing: 'cubic-bezier(.73,0,.38,.88)'
});
document.querySelector('.text_cursor').animate([
{left: '0%'}
], {
duration: 2000,
easing: 'cubic-bezier(.73,0,.38,.88)'
});
typing_animation();
}, 1000);
}
} else {
document.querySelector(".text_hide").animate([
{ left: `${left_instance}%` },
{ left: `${left_instance + ((100 / text_len) * (word_len[i] + 1))}%` }
], timings_2);
document.querySelector(".text_cursor").animate([
{ left: `${left_instance}%` },
{ left: `${left_instance + ((100 / text_len) * (word_len[i] + 1))}%` }
], timings_2);
}
left_instance = left_instance + ((100 / text_len) * (word_len[i] + 1));
}
}
typing_animation();