Here is my very first attempt to make a text-gradient plugin for jquery.
It contains four functions appliable to a selection :
spanize, unspanize, textgrad and textscan.
You can consider this version as being on version 0.
spanize
spanize will take an element, and cut its text into spans.
It takes two arguments, you might call it like this : $('...').spanize(spanClass,maxGroup);
Both arguments are mandatory for it to work correctly.
I was not able to find a case when there is a problem in this process,
but it doesn't mean it's bug-proof. Please feedback any trouble to me.
spanClass
the class to be given to the spans generated. If you
specify an empty string, the function will not bother adding classes. But
if you want to unspanize the block later, you'd better give a spanClass to
know what to remove...
maxGroup
the maximum number of characters each span created
will contain. A span never contains any spacing character.
unspanize
unspanize will take an element, remove all the opening and closing tags
of any span having for class the argument given.
The text will remain the same.
Example : ceci est du code dans un span,
et puis d'autreschoses avec des balises.
The argument for that function is :
spanClass
the class of the spans to be removed within
the selected element. If you give an empty string, all the spans
will be removed.
textgrad
The basical use is very straight-forward :
$('...').textgrad({option:value,...});
Currently supported options :
begin
a color expressed either as a String with 3 or 6 digits
(the initial # being optional), or as an array of 3 numbers, as [125,0,241].
Values under 0 will be set to 0, above 25 to 255.
default : 'F00'
end
a color, same as begin
default : '0FF' (yes, the default is ugly, you really have to change it)
colgrad
you can specify a color gradient more elaborate,
in which case begin and end will be ignored. A color gradient is an array of
objects following the pattern : {pc:number,col:color}
pc for percent : the percentage of the position of this color,
col for color : the value of the color at this place, specified as begin or end above.
default : generated by the program as begin color at 0% and end color at 100%
type
the type of gradient you would like, can be either
'_' : horizontal gradient (begin or 0% is on the left-side),
'|' : vertical gradient (works for any text block, but pointless it has only one line...) (begin or 0% is on the top),
'o' : circled gradient, from (almost) the center of the block to the corners (begin or 0% is at the center),
'/' : from the bottom-left corner of the box to the right-top one (begin or 0% is on the bottom-left corner) (if the block has only one line, converted to '_'),
'\' or anything : form top-left corner to bottom-right corner (begin or 0% is on the top-left corner) (if the block has only one line, converted to '_').
default : '\'
spanize
number. Here I have to explain a bit how the gradient is
made : it splits the text inside of the selected block into spans, then uses
their relative position inside of the block to compute the css-color to be
applied, given a distance function determined by the type of gradient. If you
have already applied a gradient to that block, or spanized it before,
it has already been splitted, no need to do it again, you would then
put a negative value, like -1.
default : 1
spanClass
the class to be given to the spans generated
default : empty
maxGroup
the maximum number of characters each span created
will contain. For small texts, like a title, put 1, for bigger texts it can
become quite slow, so don't put 1. The quality of the gradient might be almost
the same anyways if you don't have a very strong gradient. Note that maxgroup=50
is generally useless : at most the span contains a whole word, but no spacing
character.
default : 3
cb
callback function after the gradient has been applied
default : none
A few guidelines on how to use it :
It uses the whole width of the element to make the computation on the
colors of the generated spans, therefore the gradient might be invisible
on very wide blocks containing few text, for that case you may do as
I have manually done on this page on the subtitles (but can be done
automatically) : apply
the gradient to a span instead, containing the whole text. The limitation
of this is that your block must not contain inline blocks, but hey, it
must contain very short text anyways...
The block you apply the gradient to must have very little padding/margin,
the best case being when it has none. I have noyt found a way to get the
value of padding/margin for sure as a pixels value. Anyone knowing how to
do this, I am interested.
The round gradient is not very well centered. Still have no clue why
but I'll be investigating.
Don't use it for big texts, and don't use it for too many small texts.
I think this page is an example of the maximum limit it can be used before it
gets very long for the user-agent to finish the page.
textscan
textscan will make a little animation.
Please note that it is not as carefully crafted
as you might expect...
Any help or suggestions on this greatly appreciated.
So, the idea is that when you want a piece of text to change from one color
to another, not to do it on the whole text but only little by little,
like a 'scanning' effect.
So typically, this is what textscan does.
Double scanning now, there slow, back fast !
This animation gets very slow on text bigger than a hundred characters.
I don't really recommend to use it as is on anything bigger than a title, and
it's not yet really finished...
It creates gradient objects (as the colgrad of textgrad) using the parameters,
and applies them to the block the one after the other...
Nothing really optimized yet.
It is called the same way as textgrad, but the parameters are different.
So here they are.
initColor
the color the text has as the beginning of the animation.
default : '000'
endColor
the color will have at the end
default : 'F00'
transColor
the transition color
default : 'FFF'
direction
direction of the animation, can be '->' or anything, meaning left-to-right or right-to-left
default : '->'
amplitude
in %, the width of the scanning gradient
default : 20
step
in %, how much the scan must move forward each step
default : 5
spanize
same as textgrad one ; if the block you want to apply the
animation to has already been spanized, put a negative value not to do it again.
It's crucial if you want to chain the textscan thanks to the callback below...
if you spanize in a recusive way, the animation will get very slow after a
few times. I'm not sure there is a 100% efficient way to automate this choice,
so be very careful. If somebody smarter than me has a solution to this, please
contact me.
default : 1
unspanize
number. If you want the generated spans to be removed
at the end of the animation, put a positive value. If you want to chain, don't unspanize but don't
spanize either, so give a negative value to both.
default : 1
spanClass
the class to be given to the spans generated, only used when spanizing
default : empty
maxGroup
same as textgrad one, only used when spanizing
default : 2
cb
callback function after the animation has finished...
useful if you want to chain and make a return textscan in the other direction
Contact
Please contact me at sub-tenante@yahoo.fr,
removing the hyphen from the first part.