Fading effect on Google homepage? Is it AJAX? [duplicate]

This question already has answers here: Closed 12 years ago.

Possible Duplicate:

How does Google achieve the fading effect on the home page?

开发者_JAVA技巧

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?

---

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

You may want to check the following post:

• How does Google achieve the fading effect on the home page?

---

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.

---

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

---

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.

---

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.

---

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().

---

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