Bouncing Ball With Only HTML and CSS

Introduction: Bouncing Ball With Only HTML and CSS

About: Fun guy that loves to code👌

Ever wanted to make a ball, a DOM or even your logo bounce on a HTML page? This instructable should more than satisfy you; with just HTML and CSS

Supplies:

All you need:

-a text editor

-a browser

Teacher Notes

Teachers! Did you use this instructable in your classroom?
Add a Teacher Note to share how you incorporated it into your lesson.

Step 1: HTML File

Create an HTML file named "bounce.html"

Step 2: Getting Our File Ready

Enter the basic HTML5 syntax, then give your page a nice title with the title tag

Here we will also create a link to "bounce.css" which we will name of our stylesheet (css file) later in this instructable.

Done? Let's move....

Step 3: Building Our Ball a Home.

We can't let our ball bounce around all on it's own, right?

Let's create a div which will serve as a container for our ball, the class of this very div element will be "container".

After that, it's goodbye to Step 3.

Step 4: Meet the Stylesheet.

Remember the link we inserted in our HTML syntax in Step 2? We are going to create a stylesheet named "bounce.css'"(from our link tag in step 2).

Once that is done, we will add a few variables, which will help shorten our code when we use them

Immediately after, we will style the body of our page.

Next: Back to HTML

Step 5: Back to HTML

Don't worry, we won't dwell much on it this time.

We are only here to add two more accessories including our ball!

To start, we will insert an svg inside the first div(with class; "container")

The svg tag will have the class; "ball" , this element will be our ball.

After the svg, we will create a div with class;"shadow" to make our ball look a little more realistic with shadow effects.

And ...we'reee out like a light.

Step 6: Returning to Styling.

The first task in our comeback to CSS will positioning our container to be relative.

Once that has been settled, we will add some styles for appearance of our ball and it's shadow.

Notes:

-The border-radius is what makes our ball circular

-Background-size will be relevant if you use an image/ gradient not of color.

Step 7: Dimensioning

All elements need to have widths and heights and the variables we inserted earlier on will come in handy. Our job has been cut out, we assign those variables to width and height.

Notes:

-The width and height of the ball must be equal.

Step 8: Positioning

Now we will set the positions of the ball,it's shadows's,and we also set margins(in px, cm or %)

top positions a DOM from the top,left from the left and so forth.

Step 9: Setting Up the Animation.

In this step closer to the end, we start dealing with the animations proper.

To get our desired result, we give the animation a name, set it's delay time, set it's speed and make sure it loops using only the CSS animation functions.

Notes

-cubic bezier measures the speed of the animation at four stages.

-infinite iteration-count makes the animation go on forever.

Step 10: Finishing Up.

In this section we will add a little code to transform and translate the position of(bounce) the ball and it's shadow

Notes

-from indicates original position while

-to indicates new position.

Step 11: You Did It!

I had no doubt you had it in you :-)

Be the First to Share

    Recommendations

    • Trash to Treasure Contest

      Trash to Treasure Contest
    • Raspberry Pi Contest 2020

      Raspberry Pi Contest 2020
    • Wearables Contest

      Wearables Contest

    Discussions

    0
    chesterchexy
    chesterchexy

    Tip 26 days ago on Step 6

    To make a square box instead of a circle, omit(don't add) border-radius