CODEWITHSUNDEEP
javascriptjquery
thebradnet
thebradnet

Reputation: 125

Fade in Words from a Word Cloud Randomly

I have build the a word cloud (you can check it out at http://www.cybernetiksolutions.com/wordcloud )

Currently the cloud fades every word in all at one time. I would like to have the words fade in randomly from top to bottom. The idea was inspired by www.vudu.com and http://wonderwall.msn.com . I figure in the right direction on how I can make this happen would be greatly appreciated.

Upvotes: 3

Views: 839

Answers (3)

jfriend00
jfriend00

Reputation: 707766

I'd suggest an algorithm that picks a random word from the remaining hidden words so each cycle is guaranteed to show a new word until all are shown. This starts with a list of all the words, then picks one at random, removes it from the list, animates it, then repeats the cycle picking the next one from the ones remaining in the list, etc... Rather than a timer, it uses the completion function from the animation to kick off the next word.

function fadeInRandom() {
    var words = $('#wordcloud a');
    function fadeNext() {
        if (words.length) {
            var index = Math.floor(Math.random() * words.length);
            var item = words.eq(index);
            words = words.not(item);
            item.animate({color: "#89171a"}, 800, fadeNext);
        }
    }
    fadeNext();
}
fadeInRandom();

If you had so many words that you wanted to be fading multiple words in at the same time, you can simply be doing this (which will do four at a time):

function fadeInRandom() {
    var words = $('#wordcloud a');
    function fadeNext() {
        if (words.length) {
            var index = Math.floor(Math.random() * words.length);
            var item = words.eq(index);
            words = words.not(item);
            item.animate({color: "#89171a"}, 800, fadeNext);
        }
    }
    fadeNext();
    fadeNext();
    fadeNext();
    fadeNext();
}
fadeInRandom();

Or if you want four at a time and evenly spaced, you could do this:

function fadeInRandom() {
    var words = $('#wordcloud a');
    function fadeNext() {
        if (words.length) {
            var index = Math.floor(Math.random() * words.length);
            var item = words.eq(index);
            words = words.not(item);
            item.animate({color: "#89171a"}, 800, fadeNext);
        }
    }
    fadeNext();
    setTimeout(fadeNext, 50);
    setTimeout(fadeNext, 100);
    setTimeout(fadeNext, 150);
    setTimeout(fadeNext, 200);
    setTimeout(fadeNext, 250);
    setTimeout(fadeNext, 300);
    setTimeout(fadeNext, 350);
    setTimeout(fadeNext, 400);
    setTimeout(fadeNext, 450);
    setTimeout(fadeNext, 500);
    setTimeout(fadeNext, 550);
    setTimeout(fadeNext, 600);
    setTimeout(fadeNext, 650);
    setTimeout(fadeNext, 700);
    setTimeout(fadeNext, 750);
}
fadeInRandom();

Change your whole document.ready() code to this:

$(document).ready(function(){

    var count = 0;

    for(count=0;count<words.length;count++){
        $('#wordcloud').append('<a href="'+words[count].url+'">'+words[count].text+'</a>')
    }

    for(count=0;count<6;count++){
        $('#wordcloud').append($('#wordcloud').html());
    }

    for(count = 0 ; count < $('#wordcloud a').length ; count++){
        $('#wordcloud a').eq(count).css('font-size', $.randomBetween(10, 20)+'px');
    }

    // Random Fade In

    function fadeInRandom() {
        var words = $('#wordcloud a');

        function fadeNext() {
            if (words.length) {
                var index = Math.floor(Math.random() * words.length);
                var item = words.eq(index);
                words = words.not(item);
                item.animate({color: "#89171a"}, 800, fadeNext);
            }
        }
        fadeNext();
    setTimeout(fadeNext, 50);
    setTimeout(fadeNext, 100);
    setTimeout(fadeNext, 150);
    setTimeout(fadeNext, 200);
    setTimeout(fadeNext, 250);
    setTimeout(fadeNext, 300);
    setTimeout(fadeNext, 350);
    setTimeout(fadeNext, 400);
    setTimeout(fadeNext, 450);
    setTimeout(fadeNext, 500);
    setTimeout(fadeNext, 550);
    setTimeout(fadeNext, 600);
    setTimeout(fadeNext, 650);
    setTimeout(fadeNext, 700);
    setTimeout(fadeNext, 750);
    }
    fadeInRandom();

    // Fade In and Fade Out on Hover

    $("#wordcloud a").hover(function() {  
        $(this).stop().animate({ color: "#89171a"}, 800);  
    },function() {  
        $(this).stop().animate({ color: "#2f2f2f" }, 800);  
    }); 
});

Upvotes: 1

user8109
user8109

Reputation: 808

One simple method would be to loop through each word and assign a randomly selected fade in speed to each individual word. For example...

$('.words').each(function(index, value) { // Using the class assigned to each word
    rn = $.randomBetween(200, 5000); // Or whatever random call you're using
    $(this).fadeIn(rn);
});

Upvotes: 0

Mohsen
Mohsen

Reputation: 65825

Do you mean something like this?

var i = 2;
setInterval(function(){
$('#wordcloud a').eq(Math.floor(Math.random()*i)).animate({ color: "#89171a"}, 800);
i*= 4
}, 800)

Upvotes: 0

Related Questions