JavaScript/Letter spacing effect
This script creates a letter spacing effect in the browser. It can be recorded using a screen recorder and put into a video editor. It works by repeatedly updating the letter spacing CSS property of the text inside the letter spacing containers.
The effect starts after a two-second delay, specified using setTimeout, so the user can see the initial appearance. Additional functions for stopping, starting, and resetting the letter spacing are provided.
The max_letter_spacing variable specifies at which value the letter spacing should stop increasing. At the beginning, the user is asked to set a limit. It is set to thirty pixels by default.
<!DOCTYPE html>
<html>
<head>
<title>Letter spacing effect</title>
<meta name=author content="Elominius from Wikiversity">
<meta name=license content="CC-by-SA 4.0">
<style type="text/css">
/* dark theme */
body { background-color: #333; color: white; }
/* styling the letter spacing containers */
.letter_spacing_container {
font-family: futura, 'noto sans', ubuntu;
text-transform: uppercase;
text-align: center;
font-size: 20pt;
}
</style>
</head>
<body>
<!-- Wrappers to center the text -->
<div style="display:table-cell; vertical-align:middle; width:100vw; height:100vh;">
<div style="margin-left:auto;margin-right:auto;">
<div class="letter_spacing_container">
example text
</div>
<div class="letter_spacing_container">
example text 2
</div>
</div></div>
<script type="text/javascript">
// variable for letter spacing containers
var letter_spacing_containers = document.getElementsByClassName("letter_spacing_container");
var letter_spacing = 0; // initial letter spacing
// This option shows the pixel distance in the page title. Deactivate it if it causes performance issues.
var letter_spacing_document_title_enabled = true;
// stops the letter spacing effect when it reaches this spacing:
var max_letter_spacing = 30; // set to "false" to never stop
// set manual letter spacing
var manual_letter_spacing_limit = prompt("At which letter spacing should the effect stop? (default: "+max_letter_spacing+")");
if (manual_letter_spacing_limit) max_letter_spacing = manual_letter_spacing_limit;
function increase_letter_spacing() {
for ( var count=0; // initiate counter to 0
// run as many times as letter spacing containers exist
count < letter_spacing_containers.length;
// count up by one
count++
) {
// set letter spacing in each letter spacing container
letter_spacing_containers[count].style.letterSpacing=letter_spacing+"px";
}
letter_spacing+=0.1; // increase memorized letter spacing by 0.1 pixels
letter_spacing_document_title(); // set document title
if (letter_spacing > max_letter_spacing) { stop_letter_spacing(); }
}
function reset_letter_spacing() {
for ( var count=0; // initiate counter to 0
// run as many times as letter spacing containers exist
count < letter_spacing_containers.length;
// count up by one
count++
) {
// set letter spacing in each letter spacing container
letter_spacing_containers[count].style.letterSpacing=0;
}
clearInterval(letter_spacing_interval); // stop increasing letter spacing
letter_spacing = 0; // reset letter spacing to zero
letter_spacing_document_title(); // set document title
}
var initial_document_title = document.title; // memorize original document title
var last_title_letter_spacing = 0; // initializing variable to scope it outside of the function below
function letter_spacing_document_title() {
// update document title every 0.1 pixels
var letter_spacing_decimal = Math.floor(letter_spacing*10)/10;
if (letter_spacing_decimal != last_title_letter_spacing && letter_spacing_document_title_enabled) {
document.title= initial_document_title + " (" + letter_spacing_decimal + " pixels)";
last_title_letter_spacing = letter_spacing_decimal;
}
}
// declare variable outside of loop to make it accessible to clearInterval
var letter_spacing_interval;
function start_letter_spacing() {
// Increasing letter spacing 15 times per second.
// Not 30 or 60 because some screen recorders might have a low frame rate.
letter_spacing_interval = setInterval(increase_letter_spacing,1000/15);
}
function stop_letter_spacing() {
// clears the letter spacing
clearInterval(letter_spacing_interval);
}
// start letter spacing effect two seconds after opening page
setTimeout(start_letter_spacing,2000);
</script>
</body>
</html>