![]() The resulting animation looks something like this: The entire animation is applied to each image, and offset with a delay based on their position in the. With five images in our rotation, the total time of the animation would be 40 seconds. The SNCC team and I also discussed a few options for the overall timing of the transitions and settled on eight seconds per image. This was further complicated by the types of transitions I was using (crossfading the images and linearly fading the captions) and that I wanted to slightly stagger the caption animations so that they would come in after the crossfade completes and transition out just before the next crossfade starts, like so: As time moves from left to right, the images and captions have independent transitions The one thing that proved to be a little tricky was the timing between the images and the captions, as the keyframes are represented in percentages of the entire animation. I won’t bore you with the details of CSS animation, but in short they are based on keyframes that can be looped and applied to html elements. I setup the structure for the captions in a similar way: So instead I went with the approach where you stack the images on top of each other and change the opacity one at a time, like so: But I discovered that animating background images isn’t actually supported in the spec, even though it worked perfectly in Chrome and Opera. In my first attempt I tried crossfading the images as backgrounds in a wrapper div, as this was going to make things work with resizing the page much easier by using background-size: cover property. However, the current state of browser support is better, even though it still has a ways to go. In the past I’d shied away from using CSS animations for anything that was presented as a primary feature or that was complex as the browser support was spotty. I decided to try and build the SNCC background rotation using CSS animations. I was worried that doing this with Cycle 2 was going to be overly complicated with respect to syncing the timing, as in some past projects I’d run into trouble keeping discrete carousels locked in sync after several iterations - for example, with leaving the page up and running for several minutes. It was also critical that the captions match up perfectly with their associated images. With the new SNCC homepage, I wanted to figure out a way to both crossfade the background images and fade the caption text in and out elegantly. My personal favorite for a long time has been jQuery Cycle 2 which I appreciated for it’s lightweight, flexible implementation, and price ($free!). In my experience, the ‘go to’ approach for doing any kind of image rotation is to use a Javascript library, probably one that relies on jQuery.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |