<div class='screen'>
<div class='text-container'>
<p class='text'>A problem has been detected and system has been shut down to prevent damage to your computer.
</p>
<br />
<p class='text'>IRQL_NOT_LESS_OR_EQUAL</p>
<br />
<p class='text'>If this is the first time you've seen this Stop error screen, restart your computer.</p>
<p class='text'>If this screen appears again, follow these steps:</p>
<br />
<p class='text'>Check to make sure any new hardware or soFtware is properly installed.</p>
<p class='text'>If this is a new installation,</p>
<p class='text'>ask your hardware or soFtware manufacturer for any system updates you might need.</p>
<br />
<p class='text'>If problems continue, disable or remove any newly installed hardware or soFtware.</p>
<p class='text'>Disable BIOS memory options such as caching or shadowing.</p>
<p class='text'>If you need to use Safe Mode to remove or disable components, restart your computer.</p>
<p class='text'>press F8 to select Advanced Startup options, and then select Safe Mode.</p>
<br />
<p class='text'>Technical information:</p>
<br />
<p class='text'>*** STOP: 0x0000000A /0x0000000000004A,</p>
<p class='text'>0x0000000000000002, 0x0000000000000001, 0xFFFFF80002B37ABF</p>
<br />
<p class='text'>Collecting data for crash dump ...</p>
<p class='text'>Initializing disk for crash dump ...</p>
<p class='text'>Beginning dump of physical memory.</p>
</div>
</div>
*{
padding: 0;
margin:0;
box-sizing: border-box;
}
@keyframes typing {
from { width: 0; }
to { width: 100%; }
}
div.screen {
background-color: #032f7c;
div.text-container {
padding: 20px;
p.text {
font-family: monospace;
color: #ebf6ff;
overflow: hidden;
white-space: nowrap;
letter-spacing: 1.5px;
animation: typing 5s steps(90, end);
}
}
}
What I want to do is here showing the text to the user with a typing animation that line by line, one after the other, from top to bottom. I tried many things but I couldn't find a solution other than defining a different keyframe
for each p.text
element. In this way my code turns into spaghetti because there are 17 p.text
element. How do I do?
Here is this problem's codepen link : https://codepen.io/mehmetguduk/pen/RwJqzpN
CodePudding user response:
You need to apply a delay manually to each line. With SCSS, an example code snippet to do so is using a @for
loop and then multiplying the index with the duration of the animation.
@for $i from 0 through 20 {
p.text:nth-of-type(#{$i 1}) {
animation-delay: #{$i * 4}s;
}
}
This, of course, needs some additional tweaking for the perfect timing, but should give you a general idea of how to solve this.
Make sure, your animation state is also set to both
, so the text is already hidden in the beginning and stays visible after the end of the animation.
Edit:
You can also use JavaScript to set the animation-delay, like this:
document.querySelectorAll('p.text').forEach((el, i) => el.style.animationDelay = `${i * 5}s`)