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> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

    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.

    Recent Articles

    Related Articles

    Leave A Reply

    Please enter your comment!
    Please enter your name here