Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
jQuery 3d text plug-in
/**
* 3D Text plugin for jQuery
* v1.0
* Creates 3D text using CSS3 text-shadows
*
* By Craig Buckler, @craigbuckler, http://optimalworks.net
*
* As featured on SitePoint.com:
* http://www.sitepoint.com/css3-3d-text-jquery-plugin/
*
* Please use as you wish at your own risk.
*/
(function($) {
// jQuery plugin definition
$.fn.text3d = function(opts) {
// default configuration
var config = $.extend({}, {
depth: 5,
angle: 100,
color: "#ddd",
lighten: -0.15,
shadowDepth: 10,
shadowAngle: 80,
shadowOpacity: 0.3
}, opts);
// to radians
config.angle = config.angle * Math.PI / 180;
config.shadowAngle = config.shadowAngle * Math.PI / 180;
// create text shadow
function TextShadow(e) {
var s = "", i, f, x, y, c;
// 3D effect
for (i = 1; i <= config.depth; i++) {
x = Math.round(Math.cos(config.angle) * i);
y = Math.round(Math.sin(config.angle) * i);
c = ColorLuminance(config.color, (i-1)/(config.depth-1)*config.lighten);
s += x+"px "+y+"px 0 "+c+",";
}
// shadow
for (f = 1, i = 1; f <= config.shadowDepth; i++) {
f = f+i;
x = Math.round(Math.cos(config.shadowAngle) * f);
y = Math.round(Math.sin(config.shadowAngle) * f);
c = config.shadowOpacity - ((config.shadowOpacity - 0.1) * i/config.shadowDepth);
s += x+"px "+y+"px "+f+"px rgba(0,0,0,"+c+"),";
}
e.style.textShadow = s.substr(0, s.length-1);
}
// return lighter (+lum) or darker (-lum) color
function ColorLuminance(hex, lum) {
// validate hex string
hex = String(hex).replace(/[^0-9a-f]/gi, '');
if (hex.length < 6) {
hex = hex[0]+hex[0]+hex[1]+hex[1]+hex[2]+hex[2];
}
lum = lum || 0;
// convert to decimal and change luminosity
var rgb = "#", c, i;
for (i = 0; i < 3; i++) {
c = parseInt(hex.substr(i*2,2), 16);
c = Math.round(Math.min(Math.max(0, c + (c * lum)), 255)).toString(16);
rgb += ("00"+c).substr(c.length);
}
return rgb;
}
// initialization
this.each(function() {
TextShadow(this);
});
return this;
};
})(jQuery);
// initialize all expanding textareas
jQuery(function() {
jQuery(".text3d").text3d();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment