Javascipt masking effect.

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Javascipt masking effect.

Post by JellyFish »

What are some ways to do masking effects, like in flash, with javascript? Not just masking images, but masking elements like text.

The reason I want to know this is because I'm trying to make a mirror/water effect. Where when the text element hits the water part it ripples the water making the the text warp etc.

I don't want to go into detail about my water effect because that's not my subject. My subject is basically how to take text("hello") and have a image that has transparent area, and it acts as a mask for lager text("hello").

'Opefully I help on explaining this well enough.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

I hope you realize that this would be an IE only effect.
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Post by JellyFish »

What effect is that exactly?
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

Post by alex.barylski »

The effect you are after is virtually impossible using javascript even if coupled with an advanced DOM it would be very difficult. I think feyd was hinting at the fact, that you would likely need IE filters (pre-programmed special effects) to accomplish what you desire using nothing *but* javascript. I think Flash would be the way to go though, as rippled water is a pretty intensive effect, especially if you want the ripples to follow your cursor. Otherwise, why not just use a series of PNG's or JPEG's and animate them using javascript??? Choppy, but pure javascript...

Masking required at that level of complexity...would be next to impossible in javascript.
User avatar
feyd
Neighborhood Spidermoddy
Posts: 31559
Joined: Mon Mar 29, 2004 3:24 pm
Location: Bothell, Washington, USA

Post by feyd »

Amazingly, water ripples are really simple and involve little math. Even with multiple emitter interaction, it's quite simple to program. Whether many people write it in the simple way is their own problem. The technique's been around since before 1993. It works just as well today as it did then, and back then it was quite impressive. But with Javascript, it is quite difficult because of the drawing speed that it has, not the math involved.
User avatar
JellyFish
DevNet Resident
Posts: 1361
Joined: Tue Feb 14, 2006 7:18 pm
Location: San Diego, CA

Post by JellyFish »

I wasn't talking about following the cursor. Let me clear somethings up.

Imagine text that say "hello" let say -100px from the center of the browsers screen (i.e. the webpage). now picture another line of text saying "hi" above the text saying "hello" kind of like windows media centers menu setup. And now above the "hi" there is "hey" but hey is slightly translucent as with "hi" but more then "hi". So now we have the three lines of text and the upper lines are faded more just like Media Center. Now imagine moving your mouse over text "hi" (the one above "hello" which is closest to the center) and now the text "hi" moves down to the place of "hello" just like Media Centers menu and how it works. Now what "hello" does is move downward as well and as it gets closer to the center of the page a translucent and vertically flipped text of "hello" rises up from 100px from the screen getting stronger in opacity till it meets the upright "hello" and as they collide the ripple effect takes place and upside-down "hello" takes on the ripple effect. Thus I need a larger upside down "hello" so as when the ripple effect takes place an image that acts as a mask to show the larger upside-down "hello" starts to animate like a ripple. Now the mask that I'm talking about looks like a white picture but as it animates instead of black, blue, or any color as to draw ripples it's the transparent color that make the ripples so that the ripples are the window to the larger text "hello" that is upside-down.

Hopefully that makes things more clearer. Whew...
nickvd
DevNet Resident
Posts: 1027
Joined: Thu Mar 10, 2005 5:27 pm
Location: Southern Ontario
Contact:

Post by nickvd »

Could you post a graphic (using layer transparencies) if possible?
Post Reply