We recently launched a new page on our website, and during the design phase, our team had discussed incorporating some features that haven't previously been built into our other interior pages. The page is highlighted by a few interactive elements—including an ungated contact-to-customer calculator—that we knew would be important for facilitating engagement. But simply put, I was tasked with adding movement to the page using a tool called Ceros (which is really cool, and worth looking into if you're a savvy content creator).
One of the ways we accomplished this "movement" goal was by creating a flat image where only the image's background is in motion. This post provides step-by-step instructions for creating a 360-degree rotation of an otherwise static website image using the Ceros platform. A little movement can go a long way (in fact, we're already seeing the average time spent on this page is over 4 minutes), so read on to learn how you can do it, too!
1. Break your image into two pieces.
To start, you'll need the background component that will actually be rotating, and the foreground component that will remain static. Note that it's important to upload each file into Ceros separately, and to make sure they are both PNG files. When working with the images in Ceros, their backgrounds should be transparent, not flattened.
2. Upload both images into the Ceros workspace.
You'll find the image icon on the top menu bar in the workspace. Click on this icon, and add your images from your drive or desktop. You can adjust the order of the images on the side bar where the file names will appear. This is where you can position the rotating piece of the image in the back and the static image on top, as pictured below.
3. Add the animation.
As the foreground component of the image will not be moving, these next instructions only apply to the piece that's in the background.
- First, click to select the image. It will appear with a box around it in the workspace to indicate you've selected it.
- Next, go to the "Animate" tab. It's located in the top-right corner of the workspace under the blue "Publish" tab.
- Select "on view" – here you will set how you want the animation to start when the page is opened. Since we have our animation on a loop, we did not select any "entry" or "exit" effect. If you select an entry or exit effect on a repeated loop, the effect will happen each time, and therefore it will not look continuous.
- Below "Entry Effects" is the "Attention Seekers" section. In this drop-down field, select "Spin"—and then select clockwise or counter clockwise, set the delay to 0, and set the duration based on how fast you want your image to spin.
In our first few drafts, the background was spinning too fast; we wanted a slow rotation to mimic clouds in the sky. The duration is equivalent to the number of seconds it takes for a full rotation to happen. Keep that in mind, and adjust accordingly. It may take some trial and error to figure out the right speed for your image.
Once you have your image specifications set, you're ready to preview the end result. In the top right there is a "Preview" button that allows you to see what the changes you've made would look like live.
Finally, to embed the code of your new rotating image on your website, you select the "Embed" option on the top right next to preview. You would then copy and paste that into whatever module or code you're using for your website editor.
Want to see our rotating image in action? Visit this page!
If you have any questions, drop them in the comments below. We're happy to help.
