Twinkling Word Cloud
How do I make an twinkling word cloud?
Word cloud that twinkles each word every now and then. Mostly a CSS keyframe animation if you were to generate it from a backend.. What is a twinkling word cloud? How do you make a twinkling word cloud? This script and codes were developed by Ken Lane on 25 October 2022, Tuesday.
Twinkling Word Cloud - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Twinkling Word Cloud</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <head> <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Source+Sans+Pro:100,100"> <style> @keyframes glow { 0% { text-shadow: 0 0 0px #ff0; color: #000; } 0.5% { text-shadow: 0 0 3px #ff0;} 1% { text-shadow: 0 0 0px #ff0; } 100% { text-shadow: 0 0 0px #ff0; } } </style>
</head>
<body> <p>Twinkling Word Cloud</p> <div class="cloud"> <span class="word">Cart</span> </div> <p><a href='https://tanjo.ai/' target='_blank'>Tanjo.ai</a></p>
</body> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Twinkling Word Cloud - Script Codes CSS Codes
.word { font-family: 'Source Sans Pro', arial; color: #489; transition: color 1s, font-size 3s, background 5s; line-height: 25px; font-size: 10px; text-wrap: justify; padding: 0 3px 0 2px; margin-right: 1px; border-radius: 6px;
}
.word:hover { font-size: 35px !important; line-height: 25px; color: #fff !important; cursor: default; background: #000; transition: background 0.01s, font-size 0.5s 0.25s;
}
.word { display: inline-block;
}
.word:hover { line-height: 25px; cursor: default; background: #000; font-size: 17px !important; transition: background 0.01s, font-size 0.5s 0.25s;
}
.cloud { border: 1px #bbb solid; padding: 7px 17px; text-align: justify;
}
body, p { font-family: 'Source Sans Pro', arial;
}
Twinkling Word Cloud - Script Codes JS Codes
var wordTwinkle = { ctr: 1, twinkleAllWords: function( el ) { wordTwinkle.addGlowAnim( wordTwinkle.randomWordEl() ); setTimeout( wordTwinkle.twinkleAllWords, 1 ); }, randomWordEl: function() { var els = $('.word:not([style])'); if (els.length == 0) return null; else { return els[wordTwinkle.getRandomInt(0, els.length)]; } }, addGlowAnim: function(el) { $(el).attr('style', 'animation: glow '+ wordTwinkle.ctr*863*50 +'ms '+ wordTwinkle.ctr*103*50 +'ms '+ 'ease infinite; color:hsl(200,50%,'+((Math.random()*50)+30)+'%);'); wordTwinkle.ctr++; }, init: function() { $(document).ready( function() { wordTwinkle.twinkleAllWords(); }); }, getRandomInt: function( min, max ) { min = Math.ceil(min); max = Math.floor(max); return Math.floor( Math.random() * (max - min) ) + min; }
};
wordTwinkle.init(); // ♪ ♪ Twinkle twinkle little word ♪ ♪
//----------------------------------------------o
// Demo stuff below...
// Add random word size styles for this demo
setTimeout( function()
{ $('.word').each( function() { var sz = wordTwinkle.getRandomInt( 12, 22 ); var sty = $(this).attr('style') || ''; // existing style $(this).attr( 'style', sty + 'font-size:'+sz+'pt;' ); });
}, 1000 );
// Word cloud words for this demo
var words = "Intervention Hair Chicken Bottle Participant Retail Company Fat Service Runway Bag Carpet Stroke Walk Association Photo Study Medicaid Hormone Rice Model Drama Nike Sneakers Event Grocery Federal Family Calorie Design↥ Sew Author Sex Healthcare Assign Energy Live Fur Brother Juice Foot Trial Liquor Award Boom Heart Music Hazard History Lincoln Pomegranate Winner Brand Air Cardiovascular Diabetes Treatment Analyze Designer Loss Footwear Collection Water Inspire Parenthood Cancer Fund Goat Young Song Kid Dress Win Bell Wear↥ Fashion↥ Veggie Pizza Online Hat Bean White Blue France Style Antidepressant↧ Band Chan Jazz Leather Trump Meme Test Hollywood Age Shop Girl Retailer Gown Chicago Muslim Feminism Husband Woman New York City New York";
$.each( words.split(/[ \?,\.:]/), function(i,w)
{ if (w.length > 0) { $('.cloud').append("<span class='word'>"+ w +"</span> "); }
});
Developer | Ken Lane |
Username | kenlane22 |
Uploaded | October 25, 2022 |
Rating | 3 |
Size | 3,299 Kb |
Views | 12,144 |
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 |
CSS Box Shadow on Left and Right Only For Tab UI | 2,502 Kb |
A Pen by Ken Lane | 1,707 Kb |
Comic Talk Bubble | 1,577 Kb |
Money Buttons | 1,774 Kb |
Magnify Linked Page Area | 7,515 Kb |
ZoomCards | 2,926 Kb |
Tabs and Filters | 6,930 Kb |
Pin Game | 14,075 Kb |
Links in FirePad | 3,201 Kb |
Word Array Into Sentences | 2,953 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 |
Countdown Timer | Massiebn | 3,001 Kb |
Fullscreen audio play button | 72 | 2,148 Kb |
Loading... | Adamjacob | 2,384 Kb |
A Pen by Jay | Jaycode | 3,784 Kb |
Simple jQuery Slider | Jurbank | 2,874 Kb |
Cofee and sugar | Tripack | 2,094 Kb |
Another brick in the wall | Fivera | 1,955 Kb |
Expert Help | SinceSidSlid | 4,064 Kb |
LBCA - Mail canvas | Emnbdx | 3,856 Kb |
Angular Route | Arun_v606 | 1,837 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!