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.

Image for post
Image for post

Let’s break apart the x & y axis of our animation…but first we need an animation loop.

Image for post
Image for post

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.

Image for post
Image for post

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

Image for post
Image for post

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.

(HTML/CSS) Build A Floating Image From Scratch (No External Libraries!)

Written by

Learning to code…

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store