Make an Image Float with JavaScript, HTML, and CSS
A quick way to add style to your web design.
We’ll start by capturing our image from the DOM and determining the center, x & y, coordinates of our image.
Let’s break apart the x & y axis of our animation…but first we need an animation loop.
Let’s handle that y-axis now…
Every time our animation function runs, let’s decrease the value of y and as a result move the image straight up the page…
decrease means moving the image upwards, the direction is reversed for the y-axis.
Let’s move on to the x-axis…
How do we get our image to float back-and-forth; left-and-right?
We’ll model the horizontal movement of our image after a sine curve.
We’ll have to modify the properties of that sine curve in our code to make it look great:
- increase the amplitude by 60
- slow down the period by 0.010
If you would like a more in-depth guide, as well as code to make our image fade in, check out my full video tutorial on YouTube, An Object Is A.
