Slide-in backgrounds with jQuery

Slide-in backgrounds with jQuery

In this tutorial I’ll give you a quick run down of how to go about creating this slide in effect.There are a few things we want to accomplish. The code I provide below is just a quick roundup of how this effect is accomplishable. I do plan to turn this into a plugin at a later date with a much wider breadth of applicability.

  1. Firstly we must generate the ‘slices’ in Javascript. This will be determined by screen width and will have to change as the user resizes their window.
  2. Next we need the slices to slide in. We can do this with animations, but we don’t want the animations to queue in such a way that it ruins the effect
  3. We want the slices to reset when another animation comes on top of it.
  4. The slices should be positioned absolutely so content can be placed on top if it.

Leave a Reply