Thursday, January 28, 2021

How to 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.

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 REPLY

Please enter your comment!
Please enter your name here

Hot Topics

Netflix MOD APK 7.85.1 (Premium Unlocked) [Working]

Are you looking for Netflix Mod APK Premium Version? This article brings you the latest version of Netflix Mod APK with unlimited features. Netflix is...

How to Watch deleted YouTube Videos

Ever watched a video you liked a lot that you had to bookmark the URL and when you return to see that video for...

How to Remove Apple ID from iPhone/iPad without Password?

Apple has done a good job of making its newer iPhone models safe and the same goes with recent iOS updates. As important as...

Related Articles

Netflix MOD APK 7.85.1 (Premium Unlocked) [Working]

Are you looking for Netflix Mod APK Premium Version? This article brings you the latest version of Netflix Mod APK with unlimited features. Netflix is...

How to Watch deleted YouTube Videos

Ever watched a video you liked a lot that you had to bookmark the URL and when you return to see that video for...

How to Remove Apple ID from iPhone/iPad without Password?

Apple has done a good job of making its newer iPhone models safe and the same goes with recent iOS updates. As important as...