Subscribe by Email

I decided to spend yesterday attempting to create this slide in background effect. Through frustration and a bit of effort I managed to accomplish it! In this tutorial I’ll give you a quick run down of how to go about creating this slide in effect.

What we Want

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.

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.

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

We want the slices to reset when another animation comes on top of it.

The slices should be positioned absolutely so content can be placed on top if it.

What we’ll use

Lets get Started

To start out we want to create a few divs in our HTML file. These will act as the containers for each of our pages. In these containers we’ll put a div called content which will contain any content you wish to add to your page. This should act as a regular div when we’re done. I’ve also included a menu but you may wish to create this differently. This code is made to work with first level divs. That means the divs with backgrounds which slide in must be direct children of the <body> tag.

Starting jQuery

Include the jQuery file as you normally would. We’re going to do a few things such as create a wrapping function for inserting functions into a queue and actually making a queue. The queue will allow the animations to run fluidly without interrupting each other. I’ve also included an object variable which contains the ID of the element we wish to give a slide in background and the direction in which it should slide in.

We’re then going to create a function which will get the container from the objects variable and the direction. We will then check which direction the user wants the particular element to slide in from and use an if statement to determine how to generate objects. We’re also going to create a bunch of containers in order to keep everything ordered. More information on how everything works can be seen in the comments in the full code, found in the download link.

We use a for statement to generate the slices depending on the screen width. I decided to use screen width since resizing can become bothersome, so making it the full screen size makes coding a little bit easier. When the slices are generated they are generated based on whether or not they have a shadow. If they have the no shadow class it means that the code

After creating the whole function it’s pretty easy to run. Just run it through an each function based on the object variable.

$.each(objects, function (k, v) {
generateSlice(k, v);
});

Animating

Animating is the next step. I created a function which resets the animation by checking the direction in which the elements are moving and then changing the position based on this. This function is run after the animations are finished.

Then we just have check if the animation is running, remove some classes and animate each slice. We use a random number generator to generate a random time for each slice. This means every slice slides in separately at different times.