Make Your Own Google Gravity Pages Easily
This article is about what are Google Gravity pages and how to make your own Google Gravity pages. It’s a bit old trick, but still a very good one.
In 2009, Google developed it as an experiment and scrapped it later.
But, Ricardo Cabello (aka Mr.doob, Founder of Threejs) recreated it. You can visit the page here: Demo. A glance at the demo page’s source code is enough to port it to any page.
After a glance…
box2d and starts animating them.
box2d class name to elements, we can create your own Google Gravity Pages.
Step 1: Create your HTML Page
First, design your HTML page where you want to apply Google Gravity.
If you are looking to just try it out, you can copy paste the following code into your editor and save it as
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"> </head> <body> <h1>Tech Inscribed</h1> </body> </html>
Place the files beside your HTML file.
index.html just before the closing body tag (
</body>). You can copy and paste the following code.
Step 4: Add the Class Name
Now add the
box2d class name to all the elements that needs to be pulled down.
<h1 class="box2d">Tech Inscribed</h1>
That is all! Open
index.html in the browser and see your own Google gravity page in action.
You can find the full code on my Github repository.
I’d love to know where you have planed to use this. Do let me know in the comments section.
Leave a Reply