Heya, The latest script.aculo.us trunk features an experimental text effects feature. See a demo here (probably broken in IE, haven''t tested): http://script.aculo.us/__trunk_test/test/functional/ texteffects_test.html It works like this: The new method Effect.tagifyText(element) wraps all single characters of all text node children (not grandchildren) of the given element in <span style="position: relative"> wrappers. The second new method, Effect.Text(element, effect) takes the parent element and and calls the given effect for each child element (including != <span> with an increasing delay. There''s a new "delay" parameter in Effect.Base to allow for delayed effects. I''d like to hear your comments on this. Two things I have in mind: - expand the Effect.tagifyText method to take regexps and do the spanning only around the matches (so you can do stuff like word based animation) - give all this better names (like Effect.Text can be called on any elements that contain children, so the name makes no sense at all, but my brain is currently not working to well for stuff like this). :-) Thomas
On 31/08/05, Thomas Fuchs <thomas@fesch.at> wrote:> The latest script.aculo.us trunk features an experimental text > effects feature.Neat :-) It will be even more difficult to contain oneself to use it reasonable than already with the other effects.> The new method Effect.tagifyText(element) wraps all single characters > of all text node children (not grandchildren) of the given element in > <span style="position: relative"> wrappers.I think unTagify() would be a good addition. Maybe by adding a special property to the span as to identify it later. Bye, Martin
Am 02.09.2005 um 14:55 schrieb Martin Bialasinski:> On 31/08/05, Thomas Fuchs <thomas@fesch.at> wrote: > > >> The latest script.aculo.us trunk features an experimental text >> effects feature. >> > > Neat :-) It will be even more difficult to contain oneself to use it > reasonable than already with the other effects.True, but if it looks cool, why not? :) And it''s perfectly backwards compatible to begin with.>> The new method Effect.tagifyText(element) wraps all single characters >> of all text node children (not grandchildren) of the given element in >> <span style="position: relative"> wrappers. >> > > I think unTagify() would be a good addition. Maybe by adding a special > property to the span as to identify it later.Yeah. It probably should set a css class on the parent element and on each of the created children, like "tagifieds-container" and "tagified". I''m also thinking that a way use effects with one call with auto- tagifying would be nice. Something like: new Effect.Appear(''my_h1'', {scope: ''children'', tagify: true, speed: 0.15 }) or so. scope: null means parent element (default), "children" means all child elements, "<cssclass>" all child elements with this css class. tagify: true will call Effect.tagifyText with default options, or tagify: { ... } will call tagifyText with options (which should include "characters", "words", regexps, ...?). something like that.
On 02/09/05, Thomas Fuchs <thomas@fesch.at> wrote:> > Am 02.09.2005 um 14:55 schrieb Martin Bialasinski: > > Neat :-) It will be even more difficult to contain oneself to use it > > reasonably than already with the other effects. > > True, but if it looks cool, why not? :)It is the same as with everything. It depends on how it is used, so ultimately on the education of the user. When DTP got available for PC, people used 6 font faces on a page because they could. Not only is this ugly, but it also dimishes the signal value of a change in typeface. The same applies to the effects. The yellow fade will loose its usefulness when everything is moving, appearing, zooming and flashing.> > I think unTagify() would be a good addition. Maybe by adding a special > > property to the span as to identify it later. > > Yeah. It probably should set a css class on the parent element and on > each of the created children, > like "tagifieds-container" and "tagified".IMHO, effects should return elements to the state they were before the effect took place after the effect finishes, if applicable. The current behaviour in effects leaves traces in the style property, which bite me in other code. Tomorrow, I will send a post on this topic. I have to merge my things with the trunk first.> Something like: new Effect.Appear(''my_h1'', {scope: ''children'', > tagify: true, speed: 0.15 }) or so. > > scope: > null means parent element (default), "children" means all child > elements, "<cssclass>" all child elements with this css class. > > tagify: true will call Effect.tagifyText with default options, or > tagify: { ... } will call tagifyText with options (which should include > "characters", "words", regexps, ...?). something like that.Sounds really good to me. Bye, Martin