funText demo

Description: Add 3D shadows to text which respond to mouse movement.

shadowSize (default: 10)

Type: number

An positive integer representing the maximum shadow size, in pixels.

shadowColor (default: #e74c3c)

Type: string or array

A string representing a color or an array representing a palette of colors. If an array is passed each color in the palette will represent a layer, starting at the text and moving outward.

funText is a plugin for jQuery and Zepto that adds 3D shadows to text by layering successive text-shadows in 1 or more colors.

The shadow responds to mouse movement by moving in an inverse direction to the mouse, relative to the browser window. This can be best understood by imaging the browser window divided into 4 quadrants, with the center of the window at position 0x0. If the mouse is positioned at the bottom of the screen, or 100% of the possible negative vertical position, the text shadow will be 100% of it's maximum size, extending in a positive direction, or up. If the mouse is in the center of screen horizontally, this is understood as 0, and the text shadow will be 0 in the horizontal direction, though it may still appear if the mouse is not in the vertical 0 position. This sounds more complicated than it would seem by simply looking at the demo above. I'm pretty sure you already "get it" and probably "got it" before you read this. If anything, this only added to your confusion.

In addition to displaying solid colors funText supports displaying color palettes which will render as successive layers moving away from the text. funText "knows" a few palettes out-of-the-box. Those include candy (seen above) and rainbow - which, like the color spectrum, progress from from violet to red - as well as reverseCandy and reverseRainbow. You can also add any palette of your choosing by passing in an array of color values.