Flying memes

Recently I’ve been dealing with a page containing a stripe pattern as following:

If you scroll a page containing this kind of pattern you obtain a strange effect, sometimes the box seems to appear all black, like if the eyes cannot refresh fast enough. You can try this problem by watching this fiddle http://jsfiddle.net/5Gpjn/ and trying to scroll.

The best way to solve this problem is using background-attachment: fixed but sometimes this is not possible, in that cases the only solution I found was to listen to the page scroll and switch between two images with inverted stripes. We can use a sprite to handle both images:

And then switch between the two images on the sprite using a check triggered by requestAnimationFrame

var grid = $('#grid').eq(0);
requestAnimationFrame(adjustposition);

function adjustposition(){
  "use strict";

  requestAnimationFrame(adjustposition);
  grid.css('background-position', $(window).scrollTop() % 2 === 0 ? '0 -60px' : '0 0');
}

Here’s the working demo: http://jsfiddle.net/VfwSQ/