views:

212

answers:

7

Possible Duplicate:
How does Google achieve the fading effect on the home page?

Hi All,

If you visit Google, notice that when the page loads it is very sterile. Upon moving the mouse many elements of the web page now appear in front of you.

How is this done? I think that it is pretty neat.

Is it AJAX?

A: 

This is done using regular Javascript.

Google uses the mousemove event to find out when the mouse moves, and the setTimeout function to create a timer that gradually fades in the content.

SLaks
+5  A: 

No it's not AJAX. It is regular JavaScript.

You may want to check the following post:

Daniel Vassallo
Please vote to close if you find a dupe (instead of answering).
Josh Stodola
@Josh: I do normally. But here I thought I should answer the "Is it AJAX?" question.
Daniel Vassallo
+1  A: 

Have a look at jQuery, they have a function called fadeIn.

That is not what Google is using, but it is (probably) the simplest way you can recreate it.

Also, AJAX stands for Asynchronous JavaScript And XML, which is just another (friendlier) name for XMLHttpRequest. XMLHttpRequest is a way of sending data to and from the server without refreshing the entire page. When you view images in an album on Facebook and click on it, it loads the new image witohut refreshing the page. That is AJAX. Google (and jQuery's fadeIn) are what used to be called DHTML (Dynamic HTML), that is, clever JavaScript programming.

Marius
However, Google isn't using it.
SLaks
+1  A: 

It's not AJAX. Ajax is this.

What you're seeing is probably a mix of CSS/Javascript animation techniques. One example can be found on this CSS Animation page from the webkit site

Bartek
+2  A: 

Technically, no, it's not AJAX.

AJAX officially stands for Asynchronous Javascript And XML, and colloquially refers to any communication between the browser and the web server without a full page load. Those elements are already on the page from the initial page load, and are simply revealed via Javascript (not retrieved from the server).

Any major Javascript effects library can achieve the effect you describe. See e.g. jQuery and Scriptaculous.

Triptych
A: 

This can be done by using CSS+Javascript, changing the value of opacity (for non-IE browsers) or the opacity level of the DXImageTransform.Alpha filter (IE only), through a setInterval().

Joel Alejandro
A: 

Please try to understand what AJAX is before making questions like this!

If you knew what ajax was you would know that the fade in of the options in google has nothing to do with AJAX

AntonioCS