Page 1 of 1

Nice effect, how is this done?

Posted: Wed Oct 26, 2011 1:35 pm
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!

Re: Nice effect, how is this done?

Posted: Thu Oct 27, 2011 2:37 am
by Weirdan
mozilla: html + css transitions
apple: html + css transitions + some scripting

Re: Nice effect, how is this done?

Posted: Sat Oct 29, 2011 1:54 am
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/