Text-shadow spiral
How do I make an text-shadow spiral?
Lots of shadows…. What is a text-shadow spiral? How do you make a text-shadow spiral? This script and codes were developed by Matthias Dittgen on 26 August 2022, Friday.
Text-shadow spiral - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Text-shadow spiral</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 id="info"> <h1>Text-shadow spiral</h1> <p>lots of shadows…</p>
</div>
<b>•</b> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Text-shadow spiral - Script Codes CSS Codes
html,
body { width: 100%; height: 100%; margin: 0;
}
body{ position: relative; background-color: #333333;
}
#info { position: absolute; top: 0px; left: 0px; margin: 12px 0 0 12px;
}
h1 { color: #eeeeee; font-size: 21px; font-weight: normal; margin: 0;
}
p, a { margin: 3px 0 0 0; color: #cccccc; font-size: 13px;
}
b{ display: block; position: absolute; top: 50px; left: 200px; font-family: Helvetica, Arial, sans-serif; font-size: 15px; font-weight: normal; margin-top: 120px; color: transparent;
}
Text-shadow spiral - Script Codes JS Codes
$(function () { var b = $('b'); var ts; var blur, alpha, beta, x, y, radius; var start, end, max, count; var red, green, blue; count = 0; start = 360; end = 1800; max = end - start; var loop = function () { ts = ''; blur = 0; count++; red = Math.floor(count%255); for (alpha = 0; alpha < start + (count < max ? count : max); alpha += 5) { radius = alpha/5; beta = alpha - count; x = radius * Math.cos(beta/180*3.14); y = radius * Math.sin(beta/180*3.14); ts += (alpha===0?'':','); blur += 0.03; green = Math.floor(alpha / end * 255); blue = 255; ts += x + 'px ' + y + 'px ' + blur + 'px rgb(' + red + ', ' + green + ', ' + blue + ')'; } b.css('text-shadow', ts); setTimeout(arguments.callee, 1000/60); }; loop();
});
Developer | Matthias Dittgen |
Username | matths |
Uploaded | August 26, 2022 |
Rating | 3 |
Size | 2,228 Kb |
Views | 36,432 |
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 |
Animating non-CSS property | 3,794 Kb |
Centering something | 2,199 Kb |
A Pen by Matthias Dittgen | 1,808 Kb |
D3 bar chart experiment | 2,838 Kb |
Smooth font animation | 2,194 Kb |
Additive color mixing | 2,865 Kb |
Draw some line art | 3,145 Kb |
1x1 trainer | 2,566 Kb |
Beautiful canvas stars | 2,399 Kb |
Text-shadow fireworks | 2,430 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 |
A Pen by tugce | Ecgutcnkr | 4,197 Kb |
Flower expansion | Sreucherand | 3,425 Kb |
Example SVGZ Data URI | Joeyhoer | 2,981 Kb |
Pericles mi loro... | Judag | 4,125 Kb |
Ocean | Gordonnl | 2,817 Kb |
Fullscreen Parallax | Bassta | 3,313 Kb |
Wikipedia API | Coderpilot | 2,802 Kb |
Custom Select Element | Agrayson | 3,616 Kb |
Bootstrap 3 Price Table | Honglio | 2,655 Kb |
Three js | Paulq | 2,353 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!