Random word highlight script
How do I make an random word highlight script?
What is a random word highlight script? How do you make a random word highlight script? This script and codes were developed by Moses Holmström on 21 August 2022, Sunday.
Random word highlight script - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Random word highlight script</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="quote" id="neat">A year here and he still dreamed of cyberspace, hope fading nightly. All the speed he took, all the turns he'd taken and the corners he cut in Night City, and he'd still see the matrix in his dreams, bright lattices of logic unfolding across that colourless void... The Sprawl was a long, strange way home now over the Pacific, and he was no Console Man, no cyberspace cowboy. Just another hustler, trying to make it through. But the dreams came on in the Japanese night like livewire voodoo, and he'd cry for it, cry in his sleep, and wake alone in the dark, curled in his capsule in some coffin hotel, hands clawed into the bedslab, temper foam bunched between his fingers, trying to reach the console that wasn't there.</div> <script src="js/index.js"></script>
</body>
</html>
Random word highlight script - Script Codes CSS Codes
@import url(http://fonts.googleapis.com/css?family=VT323);
html { background-color: #0c0a0e; font-family: "M+ 1mn", "VT323", monospace; font-size: 2.2vmax; line-height: 1.75em; overflow: hidden;
}
.quote { cursor: default; color: #00331a; margin: 0 auto 0; max-width: 82vw; -webkit-perspective: 1000vmin; perspective: 1000vmin; width: 33rem;
}
.quote span { border-radius: 0.3em; display: inline-block; padding: 0 0.25em; margin: 0.1em 0.1em; -webkit-transform: translateZ(-500vmin) rotateX(90deg); transform: translateZ(-500vmin) rotateX(90deg); -webkit-transition: background 2s ease-in, color 5s ease-out, text-shadow 0.5s ease-out, -webkit-transform 15s ease-in; transition: background 2s ease-in, color 5s ease-out, text-shadow 0.5s ease-out, -webkit-transform 15s ease-in; transition: background 2s ease-in, color 5s ease-out, text-shadow 0.5s ease-out, transform 15s ease-in; transition: background 2s ease-in, color 5s ease-out, text-shadow 0.5s ease-out, transform 15s ease-in, -webkit-transform 15s ease-in;
}
.quote .highlight, .quote span:hover { background: rgba(0, 255, 128, 0.1); color: #80ffc0; text-shadow: 0 0 0.6em #00ff80; -webkit-transform: translateZ(0) rotateX(0deg); transform: translateZ(0) rotateX(0deg); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; z-index: 9001;
}
Random word highlight script - Script Codes JS Codes
var eQuote = document.querySelector("#neat");
var regex = /\ /;
// save the original paragraph as array of words
// regex = /[,.?!;:]/; /* Uncomment for sentences */
var aQuote = eQuote.innerHTML.split(regex);
// wrap each word with a span
eQuote.innerHTML = "";
for(var word in aQuote){ eQuote.innerHTML += "<span>" + aQuote[word] + "</span>";
}
// ...and save them for later
var eWords = document.querySelectorAll("span");
var repeat = setInterval(function() { if(Math.random() > 0.85) fClearAllHighlights(eQuote); fHighlightRandomWord(eWords);
}, 275);
function fHighlightRandomWord (e) { var iRandom = Math.floor(Math.random() * e.length); e[iRandom].classList.add("highlight");
}
function fClearAllHighlights (e) { var nlHighlights = e.querySelectorAll(".highlight"); // convert the nodeList into an array var aHighlights = Array.prototype.slice.call(nlHighlights); // remove .highlight from the spans which have it Array.prototype.map.call(aHighlights, function(){ arguments[0].classList.remove("highlight"); });
}
Developer | Moses Holmström |
Username | thykka |
Uploaded | August 21, 2022 |
Rating | 4.5 |
Size | 3,578 Kb |
Views | 80,960 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Rotary control with value display | 3,750 Kb |
I long for quaternions.... | 2,998 Kb |
Firework | 3,489 Kb |
Eclipse | 209,811 Kb |
Pageful Catalogue | 2,875 Kb |
Thing | 3,802 Kb |
HSL color picker | 3,957 Kb |
Pagination indicators | 3,263 Kb |
Freaky Shadow Effect | 2,946 Kb |
Brainbow Menu | 3,767 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Eunice A | Ejbronze | 2,203 Kb |
Drag and Drop Quiz | Cgspicer | 3,837 Kb |
Webkit decolorize | Fivera | 1,675 Kb |
Perspective Origin Demo | Agelber | 3,614 Kb |
JavaScript Animation | Rcmeisty | 4,581 Kb |
Matrix | Stathisnikolaidis | 1,922 Kb |
Slick Slider | Wearebold | 5,913 Kb |
Em Test | Rodesco | 1,784 Kb |
Pure CSS Read More Arrow | Zephyr | 1,747 Kb |
Flat buttons for Eliassen.com | Kdooley89 | 1,737 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!