Bouncing Ball Made With CSS

Introduction: Bouncing Ball Made With CSS

About: Fun guy that mixes coding and content writing👌

Ever wanted to make a ball, or even your logo bounce on your webpage?

Look no further because this instructable should more than satisfy you; with just HTML and CSS, you can make magic

Supplies

All you need:

-fresh air

-a text editor

-a browser

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, we'll be dealing with stylesheet animations .

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

    • Backyard Contest

      Backyard Contest
    • DIY Summer Camp Contest

      DIY Summer Camp Contest
    • Metal Contest

      Metal Contest

    Comments

    0
    chesterchexy
    chesterchexy

    Tip 1 year ago on Step 6

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