A quick way to add style to your web design.
All we’re going to do is bounce our image back-and-forth, left and right, up and down to create this effect.
We’ll start by capturing the image through the DOM and finding its center.
Next we’ll create a simple animation loop…
Now all we have to do is bounce our image back-and-forth on the x and y axis
we’ll use a sine curve to get this behavior…
…and of course we’ll have to modify that sine curve to make our animation attractive:
for the x-axis, increase the amplitude by 5 and decrease the period by 6%
for the y-axis, increase the amplitude by 10 and decrease the period by 0.6%
If you would like a more in-depth guide, check out my full video tutorial on YouTube, An Object Is A.