PDA

View Full Version : Ext.Fx - Additional Effects



VinylFox
6 Oct 2009, 4:03 AM
Ive opened up a generic code repo on Google code/Github where additional ExtJS effects can be added.

I started it off with my Shake effect, and I would love to have others contribute their effects so we can have a more complete set of effects for ExtJS.

http://code.google.com/p/ext-fx/

http://github.com/VinylFox/Ext.Fx

Current Effects:

Shake
Works in either the x or y direction, and the number of shakes and excitement can be configured.
Ripple
CSS3 Spin
CSS3 Zoom
CSS3 Fade


Demo: http://www.artalat.com/Ext.Fx/Ext.Fx.html

CSS3 Demo: www.simoens.org/projects/CSS3/

Hope to see more of these soon.

jay@moduscreate.com
6 Oct 2009, 4:29 AM
sweet dude!!! I always wanted to do this, but have not had time. You are the man.


In 2.x i had a 'reverse' frame working, but has broken in 3.x. I need to find time to refactor it to work with the latest version of the framework and will post here.

VinylFox
8 Oct 2009, 6:45 AM
Animal worked to make the shake animation run non-blocking and more efficiently, so I have updated the SVN to reflect this. Documentation was also added.

http://code.google.com/p/ext-fx/source/browse/trunk/src/Ext.Fx.shake.js?spec=svn4&r=4

I hope to see more contributions from the community to the effects library.

Animal
8 Oct 2009, 7:04 AM
What effects do you see out there that we could add to Ext.Fx? I don't really keep up with what other libraries can do.

VinylFox
8 Oct 2009, 7:29 AM
Not really sure. I figure, like I did, that someone will just come across a situation where they say to themselves: "This really needs a Shake to let the user know they are doing something bad."

I think a fun one to have would be Puff, which is somewhat similar to Frame. Haven't given it much thought though.

The scriptaculous Puff (http://wiki.github.com/madrobby/scriptaculous/effect-puff)

jay@moduscreate.com
8 Oct 2009, 7:37 AM
I don't see effects being worthwhile when DOM-heavy applications are still using sluggish javascript engines.

VinylFox
8 Oct 2009, 7:50 AM
Im not talking about rotating a window in 3D space while dancing teletubbies parade across a bouncing rainbow in the background.

Just simple effects to aid with user interaction.

jay@moduscreate.com
8 Oct 2009, 8:10 AM
Hrmm.. that might be interesting.

Jul
8 Oct 2009, 8:58 AM
Puff was also an effect that I was looking for in ExtJS recently.

Here's a list of effects from jQuery:
http://docs.jquery.com/UI/Effects/Types

The pulsate (http://docs.jquery.com/UI/Effects/Pulsate) and transfer (http://docs.jquery.com/UI/Effects/Transfer) effects in that list look interesting to me.

Animal
8 Oct 2009, 11:49 AM
There is a puff effect but it doesn't work like it should. I'm looking at it.

jay@moduscreate.com
8 Oct 2009, 11:56 AM
neat: http://docs.jquery.com/UI/Effects/Explode

Animal
8 Oct 2009, 12:21 PM
Actually, it works fine.

hitekshu
12 Nov 2009, 4:49 AM
Hi guys,

I included the file Ext.Fx.shake.js in my application but while running i faced an error which says Ext.Element.addMethods is not a function

I have included the file below all ext files

What went wrong here?

Thanks

Animal
12 Nov 2009, 4:51 AM
You're on another version of Ext.

hitekshu
12 Nov 2009, 4:54 AM
I am using Extjs 2.2

Will this work on Ext 3.0 ?

i am going to migrate soon to extjs 3.0

jay@moduscreate.com
12 Nov 2009, 4:57 AM
I am using Extjs 2.2

Will this work on Ext 3.0 ?

i am going to migrate soon to extjs 3.0

this is a 3.0 forum. 8-|

hitekshu
12 Nov 2009, 5:00 AM
Oh im really sorry.

I got to this link using google search.

Please tell me how can i get this effect working in extjs 2.2

Or shall i post this in that forum ?

Its urgent for me please help

jay@moduscreate.com
12 Nov 2009, 5:02 AM
It's urgent for you to apply an effect? Since when have effects been such a priority?

hitekshu
12 Nov 2009, 5:05 AM
Well,

i am using some other js script to achieve this effect. But the file is a bit large in size and we are working on performance tuning therefore, i thought of getting the ext code.

It would be great if u could help. But i know better what is the priority and what is not.

dearsina
13 Dec 2009, 8:43 AM
Shake is very cool and *exactly* what I was looking for. Thanks!

VinylFox
13 Dec 2009, 9:39 AM
Shake is very cool and *exactly* what I was looking for. Thanks!

Cool man, glad you enjoyed it. Im using it on a login window for when the user types their password wrong - it shakes the whole login window.

Please feel free to suggest other effects you would like to see.

Animal
22 Jan 2010, 7:45 AM
New effect added.

Grab the file Ext.Fx.ripple.js

Then just do



Ext.get("el-with-characters").rippleText();


A rippleText call progress: http://i131.photobucket.com/albums/p286/TimeTrialAnimal/ripple-in-progress.jpg

jay@moduscreate.com
22 Jan 2010, 7:47 AM
awesome - thought don't know when i'd use it. :(

Animal
22 Jan 2010, 7:52 AM
No, I wouldn't use it in a business app.

It should work in Ext Core so can be used as eye candy in "web sites" ;)

artalat
25 Jan 2010, 11:14 AM
awesome! i was thinking of making the "pulse" effect a few days ago...its great the now we have a platform to do it. ill submit it as soon as i complete it.

p.s: we should also have an examples/demo page.

brian.moeskau
25 Jan 2010, 10:24 PM
A rippleText call progress: http://i131.photobucket.com/albums/p286/TimeTrialAnimal/ripple-in-progress.jpg

Interesting subliminal message in there...

artalat
25 Jan 2010, 11:38 PM
Ok so I’ve gone ahead and converted a function that I was using in one of my projects to an effect. I used Animal's rippleText as a template. It animates a number change...err...I’m finding it really hard to explain, so here is a demo, see for yourself:

http://artalat.obspk.com/examples/Ext.Fx/Ext.Fx.html#numTransition

Usage:


Ext.get("el-with-number").numTransition(newNumber); This is very basic for now, hopefully I’ll be adding easing to it.

Also I've never used svn or google code so I have no idea how to put it there, I plan to look into it but for now I’m uploading the file here.

Hope you guys like it.

Thanks

geoffrey.mcgill
25 Jan 2010, 11:45 PM
@artalat - I like it, but I made my local copy/test 1000 times more betterer by renaming it .numNutz().

artalat
25 Jan 2010, 11:53 PM
@artalat - I like it, but I made my local copy/test 1000 times more betterer by renaming it .numNutz().

You're saying that the performance gets better by renaming the function?

VinylFox
26 Jan 2010, 5:10 AM
Interesting subliminal message in there...

LOL - I totally missed that the first time I looked at it.


You're saying that the performance gets better by renaming the function?

I think that was geoffrey.mcgill's attempt at being funny.

Love your effect, if you PM me your gmail address I will give you commit rights on the SVN repo.

artalat
26 Jan 2010, 5:55 AM
I think that was geoffrey.mcgill's attempt at being funny.

LOL! i feel dumb now :">.

On that note, I don't like the name of the function myself, but couldn't come up with anything better. Open for suggestions.


Love your effect, if you PM me your gmail address I will give you commit rights on the SVN repo.

Thanks! and done!

artalat
26 Jan 2010, 6:57 AM
I've created a simple little demo page for all three effects made so far. Please correct me if i have the author name or info wrong.

You can anchor to a particular effect by adding a #effectname at the end of the url. Its just a static page for now.

Heres the link:

http://artalat.obspk.com/examples/Ext.Fx/Ext.Fx.html

Enjoy :)

VinylFox
26 Jan 2010, 7:17 AM
Thanks for posting the demo page. Im going to link to it from the Google Code repo if thats ok with you.

As for the name of your effect, I think numTransition is fine, there might be better names, but it describes what happens.

artalat
26 Jan 2010, 7:21 AM
Thanks for posting the demo page. Im going to link to it from the Google Code repo if thats ok with you.

Sure you can, its for the ext community. Anything to make this community bigger than jQuery ;)

geoffrey.mcgill
26 Jan 2010, 7:44 AM
LOL! i feel dumb now :">.

On that note, I don't like the name of the function myself, but couldn't come up with anything better. Open for suggestions.

Here's my train of thought...

numNutz => "numbers-go-nuts"

I added the 'z' for an extra bit of style.


... I'll stop now.

VinylFox
20 Jun 2010, 4:58 AM
Updated the first post on this thread to reflect the recent CSS3 additional effects.

wemerson.januario
20 Jun 2010, 4:17 PM
Nice work

wemerson.januario
8 Nov 2011, 2:25 AM
How about extjs 4? Has anyone ported? thanks