Long-Form Storytelling

These two projects for the Asheville Convention & Visitors Bureau, Explorers of the Blue Ridge Parkway and The Science Behind Fall Color, were inspired by a Pulitzer Prize-winning multimedia piece from the New York Times called "Snow Fall: The Avalanche at Tunnel Creek." We had writers and a photographer, but the design and development was my role.

The Fall Color project was our first long-form editorial piece, so to ensure reading to the end, we have a little "Keep Scrolling" tab that pops up if the user hasn't interacted with the page in 8 seconds (which is the average amount of time it takes people in the office to read a page of text).

$(window).scroll(function() {
  keepscrolling.stop().transition({opacity:0}, 250);
  clearTimeout($.data(this, 'scrollTimer'));
  $(document).click(function() {
    keepscrolling.stop().transition({opacity:0}, 250);
    clearTimeout($.data(this, 'scrollTimer'));
  });
  $.data(this, 'scrollTimer', setTimeout(function() {
    if($(window).scrollTop() + $(window).height() != $(document).height()) {
      keepscrolling.stop().transition({opacity:1}, 1000);
    }
  }, 8000));
});

We're also measuring the distance the user scrolls down the page. This is part of a plugin for Google Tag Manager that fires an Event when the user hits a certain percentage of the page (the rest can be seen here):

function calculateMarks(docHeight) {
  return {
    '25%' : parseInt(docHeight * 0.25, 10),
    '50%' : parseInt(docHeight * 0.50, 10),
    '75%' : parseInt(docHeight * 0.75, 10),
    // 1px cushion to trigger 100% event in iOS
    '100%': docHeight - 1
  };
}
function checkMarks(marks, scrollDistance) {
  // Check each active mark
  $.each(marks, function(key, val) {
    if ( $.inArray(key, cache) === -1 && scrollDistance >= val ) {
      sendEvent('Percentage', key);
      cache.push(key);
    }
  });
}

The Blue Ridge Parkway project used a lot of full-width, looping videos at the top of each section. Instead of loading and playing them all automatically, they wait until they are visible:

$(window).scroll(function() {
  clearTimeout($.data(this, 'scrollTimer'));
  $.data(this, 'scrollTimer', setTimeout(function() {
    $('video').each(function(){
      if ($(this).is(":in-viewport")) {
        $(this)[0].play();
      } else {
        $(this)[0].pause();
      }
    })
  }, 250));
});

Even though jQuery is used to handle user interaction in both of these projects, I learned to let CSS handle the animation in the second project. Compared to jQuery's .animate(), CSS animations were a lot faster. For example, here is how I handled the navigation on the left-hand side:

Some things I've learned

Even though the purpose of these projects was to contain everything on a single page, the load times were pretty high, especially the Blue Ridge Parkway project that has 10 embedded videos. There are better ways, that I've learned in the years since these projects, to seamlessly load new content without effecting the user experience.