text effects – giving random size and color

link for the demo is available at the end of the artile

Text effects – random size and color

What is it

This little demo show how to give random size and colors to the words . Lets say i have a <div> or <p> tag and i want all the words inside it to acquire random size and color. At the same time i also want a choice among those colors so that it suits my websites background and all. Check the demo page (link provided at the end of the article)

The setup

Give any <div> or <p> tag a class of js_typografy

<p class='js_typografy'>

Next Add the following javascript to your page

function typografy() {
            var minSize = 15;
            var maxSize = 80;
            var colorise = true;
            var colorArray = ['#369', '#000', '#aaa'];
            $(".js_typografy").each(function () {
                var retHTML = "";
                //get the text
                var allText = $(this).text().trim().split(' ');

                //now add each word one by one
                for (i = 0; i < allText.length - 1; i++) {
                    var size = getRandomInt(minSize, maxSize);
                    size = Math.ceil(size / 10) * 10;
                    if (colorise == true) {
                        var j = getRandomInt(0, colorArray.length - 1);
                        if (j < 0) { j = 0; }
                        retHTML += " " + allText[i] + "";
                    }
                    else
                    { retHTML += " " + allText[i] + ""; }
                }
                $(this).text('');
                $(this).html(retHTML);
                
            });
        }
        function getRandomInt(min, max) {
            return Math.floor(Math.random() * (max - min + 1)) + min;
        }
        $(document).ready(function () {
            typografy();
        });

you need to change the following according to your needs

var minSize = 15;//the minimum size of font - in pixels
var maxSize = 80;//the maximum size of font - in pixels
var colorise = true;//whether you want to give random colors or not
var colorArray = ['#369', '#000', '#aaa'];//the set of colors to choose from

What it does

Basically it finds all the elements with the class ‘js_typografy’, captures there text, wraps around each word in a span tag with style attribute having randomly generated size and color.

check the demo and refresh the demo page to see the random behaviour…


Published by

Chandan Chaudhary

Chandan is a WordPress guy. A programmer at heart. He loves building community sites with WordPress and BuddyPress.

4 thoughts on “text effects – giving random size and color”

  1. Hi, I found your script very interesting and I would like to use it !

    But could you explain how to do it an other way ?

    I would like groups of words (links) to have random size.

    So the script would apply to each < a href=”#” class=js_typografy””></a>

    Best regards.

  2. Sweet script, learning lots but I can’t seem to make the script work using a comma as the split instead of a class.
    So you have each block of words contained within a comma set to the same text and color.
    What a great job, Well done, Super duper

    Group 1: What a great job
    Group 2: Well done
    Group 3: Super duper

  3. The script leaves off the last word in the ‘div’.
    You should take the line:

    for (i = 0; i < allText.length – 1; i++) {

    and remove the ‘ – 1 ‘.

    for (i = 0; i < allText.length; i++) {

    thanks for the script.

Leave a Reply

Your email address will not be published. Required fields are marked *