jQuery Plugin For Creating Curved Text - CurvedText

jQuery Plugin For Creating Curved Text - CurvedText
File Size: 580 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

CurvedText is a fancy jQuery text effect plugin which enables you to to arrange each letter of your text along a curved path. Based on CSS3 transitions and transforms, the plugin has the ability to rotate letters to create curved text on any curve like arc text, circle text, ellipse text and much more.

Basic usage:

1. Include required Javascript libraries on your web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="javascript/jquery.throttle.js"  ></script>
<script language="javascript" type="text/javascript" src="javascript/jquery.typorize.js"  ></script>

2. Include the jQuery curvedtext plugin after jQuery library.

<script language="javascript" type="text/javascript" src="javascript/jquery.curvedtext.js"></script>

3. Create text you want to curve.

<div id="demo"> Your text goes here. </div>

4. The javascript to create arc text.

$(document).ready(function()
{
    var arc = function (t)
    {
        return {
            x: 500.0 + 300.0 * Math.cos(2.0 * Math.PI * t - 0.5 * Math.PI),
            y: 400.0 + 300.0 * Math.sin(2.0 * Math.PI * t - 0.5 * Math.PI)
        };
    };

    $('#text1').curvedText({
        curve:    arc,
        domain:   [-0.2, 0.2],
        viewport: { x: 0.0, y: 0.0, width: 1000.0, height: 400.0 }
    });

});

5. Available options and defaults.

curve:          function (t) { return { x: t, y: 0.5 }; },
domain:         [0.0, 1.0],
viewport:       { x: 0.0, y: 0.0, width: 1.0, height: 1.0 },
subdivisions:   250,
className:      'letter',
spaceClassName: 'empty',
baseline:       'above',
scale:          true,
rotate:         true,
animate:        true,
delay:          0,
duration:       300,
easing:         'linear',
watchResize:    true,
throttle:       200

This awesome jQuery plugin is developed by olivermusebrink.de. For more Advanced Usages, please check the demo page or visit the official website.