Morning Sunset

What's Going On Here Then?

Morning Sunset is a combination of CSS and Javascript used to fade one fixed full-page background image into another as you scroll down the page. As you scroll on down, watch how a blue Cable Beach morning turns into a beautiful sunset.

Technique

The images are stacked using z-index, with the "morning" image at the highest index. The "sunset" image is at the lowest. The content sits above all of them. Initially the opacity of all the images is set to 100%, so only the top image is visible. As the user scrolls down, we calculate the percentage of scroll and apply that to the opacity of the top image, so the bottom one starts to peek through. At the bottom of the page, the top image is entirely transparent and the bottom one is entirely visible.

The full-page picture markup and CSS was stolen from an excellent article on CSS-Tricks. The pictures are a little large, but it will work up to 1280px.

Degradation

It's degradable in that users without Javascript will only see the top-most image, though of course they will be downloading images they won't be able to see. With CSS turned off, there are bigger issues. The images will stack, driving the content below them. I don't normally like using images other than as a background attribute, but the full-page technique requires it.

Browser Performance

Morning Sunset works in most modern browsers, though performs best in Chrome. Firefox, IE7 and IE8 (the latter 2 in standards mode) also work, though are a bit less smooth. I'm sure the technique can be refined to make it work better in those. I haven't given any thought to making it work in IE6. In this original implementation, Dojo is used to calculate the scroll percentage and connect up the events. There is some rate limiting going on (courtesy of this article over at Dojo Campus). Adjusting the rate limit to a higher interval will probably improve the performance, those make the transitions less granular.

Extensions

If I were rolling it out onto a production site, I'd:

Generalise the code to n Layers, rather than just two.
Break out the rate-limiting code and store it as a re-usable component.
Use better images than my own.
Work harder at cross-browser performance.

Still, it's a fun technique, and a cool demonstration of what can be done with a little markup and code.

Prior Art

I'm not aware of anybody else demonstrating this technique, and it was arrived at independently, but if there are other approaches out there, I'd love to see them. You can contact me @majelbstoat on Twitter, or leave a comment on my site.

Body Text

Now let's have a little bit of body text to increase the scroll size. The more content you have, the slower the transition will be. Lorem Ipsum, if you'd be so kind...

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Etiam a nisl ac turpis vehicula varius. Nunc eget eros nunc. Mauris massa ligula, bibendum faucibus lobortis sit amet, faucibus in diam. Curabitur sed bibendum libero. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed erat purus, semper sit amet ultricies nec, suscipit at sem. Integer vitae justo nisi. Aenean dui velit, porta quis molestie non, ullamcorper ut elit. Integer nunc ante, placerat ut mattis dictum, ultrices quis diam. Vestibulum eget pretium urna. Quisque posuere, lorem a egestas egestas, elit magna convallis massa, sit amet consequat risus augue ut mi.

Aenean non lectus nec libero ultrices euismod non id arcu. Aenean porta convallis cursus. Vestibulum vel velit massa, quis aliquam tellus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus eget velit purus, vitae facilisis nibh. Aliquam at odio leo, at bibendum dui. Aliquam ut tellus et ipsum rutrum semper. Etiam quis tellus dolor, ut vulputate libero. Etiam vehicula sagittis eleifend. Fusce eu mi et lacus bibendum suscipit at eu urna.

Quisque ac enim augue. Nunc sagittis posuere est, a egestas sem consectetur vel. Nulla porta faucibus nibh, vitae commodo orci aliquet non. Mauris non lobortis mi. Ut dapibus porta mattis. Ut enim urna, pellentesque sed tempor vitae, eleifend a libero. Praesent libero risus, facilisis pharetra rutrum et, posuere vel erat. Duis orci dui, elementum at venenatis vitae, elementum vitae nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In consectetur lorem ac leo vulputate et sodales nisi auctor. Phasellus euismod, velit varius pulvinar porta, nisi lorem tempus orci, eu bibendum nisl lacus nec leo. Suspendisse laoreet, metus vitae vulputate consequat, orci metus malesuada ante, sed fermentum nisi libero at arcu. Nulla quis dui tortor. Cras eu diam massa. Donec lorem libero, interdum vel congue sed, varius ultrices nunc.

Donec vehicula tempus nisl eu porta. Curabitur ultricies lobortis placerat. Fusce porta nibh tincidunt justo vestibulum pellentesque. Nam ac vulputate leo. Sed congue nulla ac orci faucibus non mattis ante laoreet. Proin tincidunt, nisi id consectetur dictum, nibh enim hendrerit ante, ut bibendum elit nisi vel mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin ullamcorper rutrum tortor. Ut pellentesque odio eu nulla bibendum ac lobortis urna convallis. Donec sed arcu in lacus convallis elementum id a lorem. Fusce sed diam et metus lobortis porttitor id ut diam. Quisque eu nisi lorem. Donec elit orci, ultrices eget dapibus suscipit, varius eget magna.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nisl enim, ultrices quis fringilla vitae, semper ac dolor. Nulla sodales malesuada quam, vel facilisis felis elementum eget. Donec a lectus in est posuere dapibus sed non massa. Aliquam erat volutpat. Vestibulum convallis est vel enim feugiat viverra. Curabitur ullamcorper dui vel lacus mattis molestie. Aenean vel ipsum nibh, non ullamcorper diam. Donec urna ipsum, aliquam id egestas non, iaculis sit amet arcu. Duis hendrerit neque vitae erat adipiscing vitae varius ipsum laoreet. Nulla facilisi. Maecenas leo eros, venenatis a pharetra vitae, scelerisque sit amet elit. In quis sem commodo arcu ornare lobortis ac vel lacus. Nullam congue felis quis dolor sollicitudin eu tempus diam luctus. In a quam tellus. Praesent sem justo, ultricies eget tempus volutpat, suscipit sit amet odio. Suspendisse magna risus, varius in pulvinar a, laoreet nec felis. Nulla auctor felis vel leo accumsan vehicula.

Fin.

PS: Google, this page is not in Danish! :)