Make Your Own Google Gravity Pages

Make Your Own Google Gravity Pages in an Easy way in 2021

by

In this article, we will be explaining the Google gravity pages and to make your own Google Gravity pages very easily. Well, it is kind of an old trick but very easy to do.

In the year 2009, Google developed it as an experiment. Later, Google scrapped it after the experiment.

Make Your Own Google Gravity Pages

But, Mr. doob also known as Ricardo Cabello who is a founder of Threejs recreated it again. It was developed in plain JavaScript with the use of Box2D physics engine which is pretty obvious. The code of JavaScript sees every element with a class box2d and starts its animation.

In case, you separate the JavaScript and attach it to the page; After attaching it, if you give the box2d class name to the element then you can make your own Google Gravity Pages.

There are certain steps which would be make it much easier to create.

You may also like to read about ‘What is the “MBN Test” app on Android devices?‘.

Step 1

Table of Contents

Create your HTML Page

First, create your own HTML page on the place where you want to apply.

In case, you are looking for just to try out the creation, just copy-paste the code written below. You can save it as index.html on your device.

<!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>

Step 2

Download the JavaScript files

These are two JavaScript code file, place them beside your HTML file:

  1. Box-2d.js
  2. Gravityjs.js

Step 3

Include the JavaScript files

Attach JavaScript files in the index.html before you close body tag. You can also copy the code written below and paste.

script type=”text/javascript”

Src=”box-2d.js”></script>

<script type=”text/javascript”

Src=”gravityjs.js”></script>

You may also like to read about ‘How to benchmark my PC using Unigine Heaven Benchmark Tool 2020‘.

Step 4

Add the Class Name

Next and very last step is to add the box2d class name to all the elements which needs to be pulled.

<h1 class=”box2d”>Tech Inscribes</h1>

That’s all you have to do to make your own Google Gravity Pages. Now open index.html in the browser and see your own Gravity pages.

Conclusion

I hope the above procedure on how to make your own Google Gravity Pages was helpful. Please let us know if you have any queries regarding it.

You may also like to read about ‘How To Schedule a Text Message On iPhone in 2021‘.

Leave a Comment

x