Introduction

First things first, get the library and add it to your page.

Library source code: generativeText.js

Now that that's out of the way, let's continue...

How to use generativeText?

To create generativeText effects, you need to create a generativeText object. This object is initialized with 2 parameters: an object with the set of rules we want to apply to the text and another optional object with generativeText options.

Once you have created the object with it's specific ruleset and options, you can apply the transformations to any HTML element using the applyTo Functions

var rules = {
    transformSkewX: {
        min: -60,
        max: 60,
        steps: true,
    }
    backgroundColor: "#ff2200",
    color: "#f0f0f0",
    boxShadow: "inset 1px 1px 4px #dddddd",
    textShadow: "1px 1px 3px #777777",

};
var options = {
    textSpaces: "nostyleorwrap",
    split: "wrapped",
};

var skewedText = new generativeText(rules, options);
skewedText.applyToElementById("example1");
            

<div id="example1">You can use generativeText with most CSS properties!</div>
            

#example1 { font-family: 'Arvo'; font-size: 0.84em; }
            

How does generativeText work?

On the application of the function, generativeText takes the text of the HTML target element and then splits it into it´s different parts (characters or words). It then iterates through each of this parts and creates a set of spans, one for each part. This span will include the CSS directives calculated from the ruleset. Finally, it adds this newly created span element to the target HTML element.

Hint: for best results, mix the CSS directives added to the span by generativeText with general non generated CSS rules for span on the HTML element. ie: #elementId span { display: inline-block; //rest of rules you want to apply to all of the spans on the target element.. }.