How to Make Your Own Google Gravity Pages Easily 1

How to Make Your Own Google Gravity Pages Easily

by

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.

It is obvious that it is developed in plain JavaScript using the Box2D physics engine. The JavaScript code looks at all elements with the class box2d and starts animating them. 

Making Google Gravity Pages

If we separate the JavaScript and include it on our page and give the 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 ‘index.html‘.

<!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>IndiaTechnoBlog</h1> 
</body> 
</html>

Step 2: Download the JavaScript files

I have already separated out the JavaScript code into two files. You can download them here.

  1. box-2d.js
  2. gravityjs.js

Place the files beside your HTML file.

Step 3: Include the JavaScript files

Add the JavaScript files in the index.html just before the closing body tag (</body>). You can copy and paste the following code.

<script type="text/javascript" src="box-2d.js"></script>
<script type="text/javascript" src="gravityjs.js"></script>

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.

I’d love to know where you have planed to use this. Do let me know in the comments section.

Leave a Comment

x