Animated text title - "Reflection" text - devised with HTML/CSS

Resources
1

As well as making my Music Theory tutorial, I’ve also been going back to the enjoyable pastime of messing about creating animated text titles with HTML/CSS coding - and I have a question for @elusien.

My latest text effect design has a rather cool “reflection” effect. I got the idea of the code from a text an animation on Codepen here

… and adapted it.

Here’s a demo of 12 styles I just created, all with the sample text “A Jolly Warm-up for Flute” (The title of my next flute video).

Each title is created by double-clicking a HTML file and recording a screenshot of the screen, then importing into Shotcut and applying a Blend mode filter.

It’s rather pointless posting all the HTML files here because each one depends on having the correct font installed on the user’s computer, and they are non-standard fonts. So here is a sample HTML file using the common ARIAL font for anyone to try out. Replace the “.txt” extension and replace with “.html” then double-click the file and you should see the animation play.
Reflection Text by JONRAY - STYLE 01 Font - Arial (Jolly Warm-up for Flute).txt (3.5 KB)

About the code:
I like the line of code which gives the text reflection:

 .text_line {-webkit-box-reflect: below -110% linear-gradient(transparent, rgba(0,0,0,.6));}

… and also the way each letter is animated with a delay:

  animation-delay: calc(0.1s * var(--i));

However for it to work , each letter has to be placed on a separate SPAN line:

 <div class="text_line">
 <span style="--i:1" >A</span>
 <span style="--i:2; color:transparent" >1</span>
 <span style="--i:3" >J</span>           
 <span style="--i:4" >o</span>           
 <span style="--i:5" >l</span>           
 <span style="--i:6" >l</span>           
 <span style="--i:7" >y</span>           
 <span style="--i:8; color:transparent" >1</span>
 <span style="--i:9" >W</span>           
 <span style="--i:10">a</span>           
 <span style="--i:11">r</span>           
 <span style="--i:12">m</span>           
 <span style="--i:13">-</span>           
 <span style="--i:14">u</span>           
 <span style="--i:15">p</span> 

 ...etc

NB notice I’ve added the inline element

 color:transparent

to each of the spaces and typed “1”. This is because the spaces were not being recognised.

So my question to @elusien is:

Is it possible to write a JS script (or CSS?) which transforms the string
A Jolly Warm-up for Flute
into the above code with spans? You wrote one a while ago which did this, for a previous HTML design of mine, but this time, each of the Span lines includes the incremental inline style text. Can this be done?

By the way …
As a workaround, I devised a rather cool Auto Hot key script which does this automatically.
Here it is in action:

It’s entertaining to watch! The script CUTS each letter at the cursor, then the cursor whizzes around like a worker ant and PASTES each letter into its corresponding line.

However, using an AHK script is not for everyone and a bit specialised, so I’m hoping @elusien or someone can come up with a coding solution.

2

Your wish is my command oh master. You can’t do it just using CSS, you have to use Javascript. The code is:

   <script>
	  document.addEventListener('DOMContentLoaded', function(event) {
	     const $text_line = document.getElementsByClassName('text_line')[0];
		 const characters = $text_line.innerText.split('');
		 let   html       = '';
		 for (let i = 0; i < characters.length; i++){
			if (characters[i] === ' ') { characters[i] = '&nbsp;' }
            html += `<span style="--i:${i}" >${characters[i]}</span>\n`;
	     }
		 $text_line.style.height = 2*$text_line.offsetHeight + 'px';
		 $text_line.innerHTML    = html;
      })
   </script>

using it is here:
Reflection Text.txt (2.6 KB)

1 Like
3

OMG you are an absolute genius. I didn’t expect anything that quick … Will try it out asap. THANK YOU!

4

BTW, I had to put in this line because for some reason the height of the DIV was halved when I deleted the original text and replaced it by the SPANs. If I didn’t do that the “-110%” would not work and Flex would have the DIV in the middle of the screen with the reflection below - so not centered.

1 Like
5

Snakes alive - it works! This is the whole “body” code:

    <body>
  <div class="text_line">A Jolly Warm-up for Flute</div>

   <script>
  document.addEventListener('DOMContentLoaded', function(event) {
     const $text_line = document.getElementsByClassName('text_line')[0];
	 const characters = $text_line.innerText.split('');
	 let   html       = '';
	 for (let i = 0; i < characters.length; i++){
		if (characters[i] === ' ') { characters[i] = '&nbsp;' }
        html += `<span style="--i:${i}" >${characters[i]}</span>\n`;
     }
	 $text_line.style.height = 2*$text_line.offsetHeight + 'px';
	 $text_line.innerHTML    = html;
  })
    </script>
    </body>

COOL! Thank you so much! :+1: :+1:

6

If you don’t mind unreadable code you could “minify” it to:

<body><div class="text_line">A Jolly Warm-up for Flute</div>
<script>document.addEventListener("DOMContentLoaded",function(e){const t=document.getElementsByClassName("text_line")[0],n=t.innerText.split("");let s="";for(let e=0;e<n.length;e++)" "===n[e]&&(n[e]="&nbsp;"),s+=`<span style="--i:${e}" >${n[e]}</span>\n`;t.style.height=2*t.offsetHeight+"px",t.innerHTML=s});</script>
</body>
1 Like
7

Even better! TY!