Nice effect, how is this done?

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
siko
Forum Commoner
Posts: 37
Joined: Tue Feb 16, 2010 11:28 pm

Nice effect, how is this done?

Post by siko »

I browsed a couple of nice websites recently and I'm curious how those effects are created, I'm not even sure what kind of language they are written in, but javascript looks like a good bet so here I am in this forum :P

Yeah, I'm the outdated guy who thinks the only way to make something move/animate on a website is through flash :P

If anyone can give me a brief outline of how each of the following is done, like, what language is used to do that, javascript/html or whatever it is.. would be very helpful, I'm thinking of learning and putting in some nice touches into my website :)

1. http://www.mozilla.org/en-US/firefox/features/

Those 6 pin-like icons prominently display on that page that floats up when you hover over it and lands when you move your mouse away.

2. http://www.apple.com/iphone/

That big advertisement that takes up pretty much the whole page, scrolling to a different advertisement every 5 seconds or so.

Hmm, actually those 2 are all I remember for now.. Forgot to bookmark.. :cry:

Anyone? :)

Thanks in advance!
User avatar
Weirdan
Moderator
Posts: 5978
Joined: Mon Nov 03, 2003 6:13 pm
Location: Odessa, Ukraine

Re: Nice effect, how is this done?

Post by Weirdan »

mozilla: html + css transitions
apple: html + css transitions + some scripting
uday8486
Forum Newbie
Posts: 22
Joined: Fri Oct 28, 2011 11:42 pm
Location: Pune, India

Re: Nice effect, how is this done?

Post by uday8486 »

You can use jquery which is very easy to do. here you can use hover function of jquery to 1) functionality of 6 pins like changing their top posistion or margin-top
http://api.jquery.com/hover/

For second you can use the jquery sliders like
http://nivo.dev7studios.com/
Post Reply