DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Pure CSS "Matrix code" effect
Tetragius
Tetragius

Posted on

Pure CSS "Matrix code" effect

Step 1

Create CSS property (better for animation)

@property --timer {
     syntax: '<integer>';
     inherits: false;
     initial-value: 1;
}
Enter fullscreen mode Exit fullscreen mode

Or just

:root { --timer: 1; }
Enter fullscreen mode Exit fullscreen mode

Step 2

Animate property

 @keyframes animate-letter {
     to {
         --timer: 26; /*26 -  the number of letters of the English alphabet*/
     }
 }
Enter fullscreen mode Exit fullscreen mode

Step 3

Add some counter magic

.letter {
     counter-reset: timer var(--timer);
     animation: animate-letter 2s linear infinite running;
}

.letter div:before{
     content: counter(timer, lower-alpha);
}
Enter fullscreen mode Exit fullscreen mode

lower-alpha - predefined counter styles

Now, at each step of the animation, the variable --timer will increase by 1 until it reaches 26. For each digit, the corresponding letter of the alphabet will be selected.

Step 4

Add more counters

.letter {
      counter-reset: timer-1 calc(var(--timer) + 1) timer-2 calc(var(--timer) + 2) timer-3 calc(var(--timer) + 3) timer-4 calc(var(--timer) + 4) timer-5 calc(var(--timer) + 5) timer-6 calc(var(--timer) + 6) timer-7 calc(var(--timer) + 7) timer-8 calc(var(--timer) + 8) timer-9 calc(var(--timer) + 9) timer-10 calc(var(--timer) + 10);
     animation: animate-letter 2s linear infinite running;
}
/*Add new counters, shifting each subsequent one by one*/

.letter div:before{
      content: counter(timer-1, lower-alpha) counter(timer-2, lower-alpha) counter(timer-3, lower-alpha) counter(timer-4, lower-alpha) counter(timer-5, lower-alpha) counter(timer-6, lower-alpha) counter(timer-7, lower-alpha) counter(timer-8, lower-alpha) counter(timer-9, lower-alpha) counter(timer-10, lower-alpha);
        writing-mode: vertical-rl; 
        text-orientation: upright;
}
/*Also directing text from top to bottom*/
Enter fullscreen mode Exit fullscreen mode

Step 5

Add other effects and animations on the bite. And it's ready!

Top comments (0)

Why You Need to Study Javascript Fundamentals

The harsh reality for JS Developers: If you don't study the fundamentals, you'll be just another β€œCoder”. Top learnings on how to get to the mid/senior level faster as a JavaScript developer by Dragos Nedelcu.