Search code examples
javascriptcssaccessibilityprogressive-enhancementgraceful-degradation

How to fade-in content with graceful degradation

I'm working with a team that makes heavy use of the "fade-in" effect to animate the rendering of images, and even text sometimes.

You can see the kind of effect I'm describing here: http://www.seafireresidencescayman.com/seven-mile-beach

enter image description here

The fade-in isn't really "my thing", but what actually troubles me the most is that all implementations that I've seen so far, make the site pretty useless when javascript isn't enabled.

Here's what the same site above looks like without javascript:

enter image description here

My team's preferred tool for this is AOS, which uses more-or-less the same approach that I see elsewhere:

  1. Hide designated content with CSS
  2. Reveal it in a jazzy way using javascript

If javascript isn't available, #2 doesn't happen and the content stays hidden. Not good.

I'm interested to find a way to accomplish the same/similar effect, but in a way that fails gracefully if javascript isn't available. I'm guessing the tricky part is to keep the content from flickering initially, and that's why most approaches need to hide the content "by default." So maybe it's not as simple as just hiding things with javascript instead of CSS...

Is there a non-evil way to do this?

Solution

  • I agree with @RobG's comment, the only progressive enhancement way of accomplishing this is to not hide the content with CSS, but to use JS to hide it. This could easily be done without jQuery, but for the sake of brevity...

    <h1 class="fade-in">Yay, it's 2002!</h1>
<div>
   <img class="fade-in" src="/path/to/cat.gif" />
</div>

<script>
var $faded = $('.fade-in');
$faded.hide();
// could easily use a more intelligent mechanism for determining when to load
$('img.fade-in').on('load', function() {
   $faded.fadeIn();
});
</script>