Introduction: Bouncing Ball With Only HTML and CSS
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
All you need:
-a text editor
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.
-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.
-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.
-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
-from indicates original position while
-to indicates new position.
Step 11: You Did It!
I had no doubt you had it in you :-)