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. a ‘fixed’ primary navigation in the footer.

a large black and white photograph that would randomly load (based on five different options) every time a user visited the page.The previous version of the homepage included two main features: The team and their advisory board wanted to highlight some of this new content on the homepage (by making it scrollable) while also staying true to the original design. Since then much more content has been incorporated into the site. The SNCC Digital Gateway site originally was launched in the Fall of 2016. Earlier this summer I worked with the SNCC Digital Gateway team to launch a revised version of their homepage.

Crossfade background image cycler