This makes it simpler to make adjustments with the animation later. Use the viewport width as a base unit, so make the image groups a multiple of 200px in this case.

My advice is to create groups that are the same width if possible. The train can be positioned completely outside of the viewport if you want. Otherwise we will have a weird blank space. We always want our viewport to have a complete frame of the background and the foreground. Our viewport of the scene is 200px by 200px. To create an animation we must have at least 2 frames for an image group to do anything! So, the image you create must be at least 2 times wider than our intended viewport. This ensures that in our animation, we only need to manipulate the horizontal position of an image group. Make the hills and the train an appropriate size and don’t change it. What should you consider when you prepare the image?īaking in the scale of the elements when you draw the image makes the animation simpler. I will show you this in another example later to highlight the differences between the approaches. Instead of creating separate PNGs, you could create a single SVG with 3 different groups ( g elements), and add it inline into the webpage. We will stick to these 3 groups for simplicity. You could create more groups if you wish to create a more dynamic scene. Jamie created 3 PNGs of 600px by 200px for each of these groups as below. The background is a collection of hills and the sky. Closest to us is the river and the elevated area where the track is on. In your graphics editor, you will create a layer for each of these groups, so that they can be referenced in CSS to add an independent animation to each of them.įor our train scene, we are observing the train from across a river. To construct the image(s) for the animation, you must group elements together based on their vicinity (how near or far away they are) to the observer. See the Pen Parallax Animation Deconstructed by Rob ( on CodePen.

I have adapted the train orb into a complete example that you can play with to understand how it works behinds the scenes! You can explode the animation to show the individual layers. The codepen animates a travel-related mini-scene when you hover over one of the orbs to give a cool preview. I will demonstrate the parallax effect with an adapted, deconstructed version of this codepen by Jamie Coulter. So, to give a greater sense of depth to a scene with movement: make things nearby move faster, and things further away move slower. If you look at the ground just a few meters away, it appears to be passing by very fast. If you are travelling in a vehicle and look out the window, the further away something is, the slower it appears to be passing by. If something is further away, it appears to be smaller. Our perception of depth is based on scale, light, and speed. The theory will serve you in adding parallax dynamics to your UI in whatever way you like. I will create a fun animated scene that you can use as a loading animation or as a dynamic hover effect.

I’m going to deconstruct how you can create the parallax effect with a very visual, interactive example. It is used mostly to create slick scrolling animations. The parallax effect creates a greater perception of depth, making movement appear more dynamic.

Parallax css with images