Home

Ethan Hackett Banner Creation

I wanted to take a some time and let you in on the process that went into the creation of the featured slider on the homepage.

The first step was to figure out a way to layout the elements so that I could keep the jQuery animation as D.R.Y. (Don’t Repeat Yourself) as possible. I decided to wrap the elements in divs with unique ids. Then within those divs the images, copy and buttons would have classes p1, p2, p3 all the way up to p7 (Piece 1, Piece 2 etc…).

Setting it up this way allows me to control the position of the parent divs using css then the jQuery animation controls each child element as it loops through.

The jQuery loops through the child elements, on the left, with classes p1-p4 and animates them from -500px left to 0px right and at the same time, on the right, the other child elements with classes p5-p7 animate from 500px right to 0px left.

Take for example the iPhone from The Father’s House slide. The wrapping div has an id of tfh-1 and the child image has a class of p5. Because the container has a unique id I can set it’s position from the left using css.

Then the animation moves the phone from off the screen, left 500px, too left 0px.

Here is the parent div’s CSS styling.

#tfh-1 {
    position: absolute;
    top: 0px;
    left: 50%;
    padding-top: 178px;
    margin-left: -40px;
    z-index: 30;
}

The animation slides all elements p1-p7 animate in at different intervals. After they animate in the script pauses for a few seconds then the animation pushes them all down 400 px. At the very end of the animation cycle it moves all the items back to their starting positions off the screen and transitions to the next group of divs.

Regarding the specifics of the jQuery animation I recommend reading through the comments in the javascript.js file inside of the resources.

Download The Demo Files

Leave A Comment