This code provides a simple way to create an animated word cloud using JavaScript. The word cloud consists of various words displayed in different sizes and fonts. Each word in the cloud blinks using a text animation effect, making the word cloud visually appealing. The code utilizes SVG and CSS to define the layout and styling of the word cloud, while JavaScript is used to implement the animation functionality.
To use this code, you need to include the provided HTML, CSS, and JavaScript code in your web page. The HTML code includes an SVG element with text elements representing the words in the word cloud. The CSS code defines the styles for the word cloud and the animation effect. The JavaScript code handles the animation logic by randomly selecting a word and applying the blink animation to it at regular intervals.
This code can be helpful in various scenarios, such as visualizing data, presenting key concepts, or adding a dynamic element to your website. By customizing the word list and styling, you can create unique word clouds that engage your audience and enhance the visual experience of your website.
How to Create an Animated Word Cloud in JavaScript
First of all, create the HTML structure for words cloud as follows:
<svg id="tagi" x="0px" y="0px" width="920px" height="324px" viewBox="0 0 920 324">
<text transform="matrix(1 0 0 1 497.4292 293.7129)" class="st17 st0">SALES</text>
<text transform="matrix(1 0 0 1 727.8999 191.9316)" class="st17 st20">CPC</text>
<text id="XMLID_2_" transform="matrix(1 0 0 1 433.0854 82.7407)" class="st17 st8">LEADS</text>
<text transform="matrix(1 0 0 1 188.187 144.3555)" class="st5 st17 st22">CLICKS</text>
<text transform="matrix(1 0 0 1 380.8301 145.1353)" class="st17 st29">ADWORDS</text>
<text transform="matrix(1 0 0 1 378.8799 54.6626)" class="st5 st28 st6">BING</text>
<text transform="matrix(1 0 0 1 247.0718 191.1514)" class="st5 st28 st18">YANDEX</text>
<text transform="matrix(1 0 0 1 0 129.9268)" class="st5 st28 st30">vKONTAKTE</text>
<text transform="matrix(1 0 0 1 250.9712 76.1118)" class="st5 st28 st14">REMARKETING</text>
<text transform="matrix(1 0 0 1 229.9131 169.5225)" class="st5 st28 st25">MARKETING</text>
<text transform="matrix(1 0 0 1 472.4722 105.3691)" class="st5 st28 st27">LOOKALIKE</text>
<text transform="matrix(1 0 0 1 735.7007 163.4639)" class="st5 st28 st1">BIG DATA</text>
<text transform="matrix(1 0 0 1 128.9111 264.4697)" class="st5 st28 st26">REKLAMA EFEKTYWNOŚCIOWA</text>
<text transform="matrix(1 0 0 1 191.3057 102.2393)" class="st5 st28 st24">PERFORMANCE</text>
<text transform="matrix(1 0 0 1 318.4351 289.0342)" class="st5 st28 st1">AUTOMATION</text>
<text transform="matrix(1 0 0 1 740.77 211.4307)" class="st5 st28 st21">ATTRIBUTION</text>
<text transform="matrix(1 0 0 1 683.0542 230.5381)" class="st5 st28 st19">BEHAVIORAL</text>
<text transform="matrix(0.9244 0 0 1 632.7485 97.0288)" class="st5 st28 st16">E-COMMERCE</text>
<text transform="matrix(1 0 0 1 663.5552 139.2856)" class="st5 st28 st3">KONWERSJE</text>
<text transform="matrix(1 0 0 1 251.3608 240.4502)" class="st5 st17 st31">SHOPPING CAMPAIGNS</text>
<text transform="matrix(1 0 0 1 217.0439 54.2744)" class="st5 st28 st11">PRODUCT FEED</text>
<text transform="matrix(1 0 0 1 119.9526 240.2871)" class="st5 st28 st13">TRACKING</text>
<text transform="matrix(1 0 0 1 444.0044 34.7744)" class="st5 st17 st4">KEYWORDS</text>
<text transform="matrix(1 0 0 1 125.4019 129.147)" class="st5 st28 st15">CTR</text>
<text transform="matrix(1 0 0 1 350.8022 207.5303)" class="st17 st2">REVENUE</text>
<text transform="matrix(1 0 0 1 81.5249 212.6006)" class="st17 st9">ROI</text>
<text transform="matrix(1 0 0 1 545.0063 316.7061)" class="st5 st28 st23">COSTS</text>
<text transform="matrix(1 0 0 1 638.2075 66.7529)" class="st5 st28 st12">AD GROUPS</text>
<text transform="matrix(1 0 0 1 185.8467 282.4043)" class="st5 st28 st10">OPTIMIZATION</text>
<text transform="matrix(1 0 0 1 34.1494 150.5947)" class="st5 st28 st7">TARGETING</text>
</svg>
Style the word cloud using the following CSS styles:
svg text.blink {
animation: blink 2s ease-out;
}
body, .cd__main {
text-align: center;
background-color: #000000 !important;
color: #ffffff !important;
position: relative;
}
#tagi {
width: 70%;
margin: 250px auto;
}
@keyframes blink {
0% {
text-shadow: 0 0 20px rgba(226, 25, 45, 0);
}
20% {
fill: rgba(226, 25, 45, 1);
text-shadow: -5px -5px 20px rgba(226, 25, 45, 0.8), 5px -5px 20px rgba(226, 25, 45, 0.8), 5px 5px 20px rgba(226, 25, 45, 0.8), -5px 5px 20px rgba(226, 25, 45, 0.8);
;
}
30% {
fill: rgba(226, 25, 45, 1);
-5px -5px 20px rgba(226, 25, 45, 0.8), 5px -5px 20px rgba(226, 25, 45, 0.8), 5px 5px 20px rgba(226, 25, 45, 0.8), -5px 5px 20px rgba(226, 25, 45, 0.8);
}
100% {
text-shadow: 0 0 20px rgba(226, 25, 45, 0);
}
}
.st0 {
font-size: 68px;
}
.st1 {
font-size: 27px;
}
.st2 {
font-size: 82px;
}
.st3 {
font-size: 41px;
}
.st4 {
font-size: 41px;
}
.st5 {
fill: #808080;
}
.st6 {
font-size: 24px;
}
.st7 {
font-size: 24px;
}
.st8 {
font-size: 62px;
}
.st9 {
font-size: 86px;
}
.st10 {
font-size: 18px;
}
.st11 {
font-size: 18px;
}
.st12 {
font-size: 25px;
}
.st13 {
font-size: 25px;
}
.st14 {
font-size: 25px;
}
.st15 {
font-size: 32px;
}
.st16 {
font-size: 32px;
}
.st17 {
font-family: 'Open Sans';
font-weight: 600;
fill: #a0a0a0;
}
.st18 {
font-size: 22px;
}
.st19 {
font-size: 22px;
}
.st20 {
font-size: 36px;
}
.st21 {
font-size: 19px;
}
.st22 {
font-size: 51px;
}
.st23 {
font-size: 26px;
}
.st24 {
font-size: 33px;
}
.st25 {
font-size: 20px;
}
.st26 {
font-size: 23px;
}
.st27 {
font-size: 23px;
}
.st28 {
font-family: 'Open Sans';
}
.st29 {
font-size: 54px;
}
.st30 {
font-size: 20px;
}
.st31 {
font-size: 37px;
}
Load the jQuery JavaScript library by adding the following CDN link before closing the body tag:
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
Finally, add the following JavaScript code to activate the word blinking animation.
$(document).ready(function() {
var
words = $('#tagi text'),
l = words.length,
current = null,
delay = 2000;
function clearBlink(o) {
var
ca = o.getAttribute('class').split(' '),
i = ca.indexOf('blink');
if (i !== -1) {
ca.splice(i, 1);
o.setAttribute('class', ca.join(' '));
}
}
function addBlink(o) {
var
ca = o.getAttribute('class').split(' ');
ca.push('blink');
o.setAttribute('class', ca.join(' '));
}
function wordblink() {
var e;
if (current !== null) {
clearBlink(words.eq(current)[0])
}
current = Math.floor(Math.random() * l);
e = words.eq(current);
addBlink(e[0]);
setTimeout(wordblink, delay);
}
wordblink();
});
That’s all! hopefully, you have successfully created an animated word cloud in JavaScript. If you have any questions or suggestions, feel free to comment below.
You forget text-shadow in 30% in style.css
30% {
fill: rgba(226, 25, 45, 1);
text-shadow:-5px -5px 20px rgba(226, 25, 45, 0.8), 5px -5px 20px rgba(226, 25, 45, 0.8), 5px 5px 20px rgba(226, 25, 45, 0.8), -5px 5px 20px rgba(226, 25, 45, 0.8);
}
Thanks for your suggestion, adding text shadow makes text more attractive.
Hi – this is exactly what I am looking for, but need a little help as I am not that familiar with javascript…
Does the javascript code go in a separate file and if so, what name should it have?
There is a large top and bottom margin and I need to have a very small/no margin…what do I need to change to control the margin/padding (I can’t see it in the CSS code)?
Is there a way to make this responsive (if not already)?
Thanks
Phil
Hi Phill
The JavaScript code can go in a separate file with a .js extension. You can create a new file, name it something like script.js, and then link it to your HTML file using a script tag in the head or body section of the HTML file.
If you want to remove or adjust the top and bottom margins of the SVG, you can modify the margin property in the #tagi CSS rule. To make the SVG and its contents responsive, you can use CSS media queries.
#tagi { width: 70%; margin: 0 auto; /* Adjust margin as needed */ } /* Responsive */ @media screen and (max-width: 600px) { #tagi { width: 90%; } /* Add more responsive rules here as needed */ }Brilliant! Thank you, I really appreciate it. Phil