Tutorial: How to make your own shuffle effect with jQuery

i think after you have read most of my effect tutorial on jQuery, you will notice that effect is just playing around with CSS. Nonetheless, without jQuery help using pure JavaScript to achieve the same result will really take a lot of time than the usually time we spend on jQuery. Anyway, back to the topic that i am going to write. In this tutorial, i will demonstrate another very simple concept to shuffle your containers or images. I believe this should be the last effect available in the market currently. Most of the effect i should have covered them up.

Tutorial

i find this way of writing tutorial is easy for me to understand and its much more neat and clearer compare to my other tutorial which is quite a mess. So i will continue using such structure to write my tutorial as much as possible. If you have any feedback or improvement that i can make, please send me an email or just leave a comment. =)

Concept

Let's imagine you have a set of poker card. The poker cards should be shown on the screen in a z-axis way. When we shuffle, we take the highest card, pull it out and placed at the back (Sound like a first in last out concept to me). Let's assume each container is a card. We will have to stack the card together in a z-axis row in order to simulate the pattern of a poker card deck. Well, since its programming we can really just have 2 containers and placed the image on the second level so that when the first image is being shuffled down, the second level image is being displayed during the shuffling of the first card. But let's not do such complex stuff, we are doing a simple tutorial right? Opps.

CSS

from the description in the concept section, the necessary and required CSS rule to apply on the containers are most probably something that can help us stack n containers together. Below listed the approximate rule required for shuffle effect to work.

  • position: absolute - so that every container in the deck has a MUST obey position
  • z-index: x - so that every element is being position in an z-axis level
  • top: x em - the vertical position of the container
  • left: x em - the horizontal position of the container
  • float: left - we float all element so that they are no longer on the ground

where x is an integer value. Please take note that if you do not provide a type for your top and left, it may post a problem later when you try to shuffle your containers. Another thing to take note, z-index don't take in types like em or px, it is a pure number without type.

HTML

with the CSS rule declared, its time to setup our structure for each container. The structure of the container is fairly easy to setup. We just need a set of n containers in order to display different container during shuffling.

Coding

This part always get a bit confusing when there are piece and pieces of code flying around the place. But i will try my best to explain what is happening in here.

5 thoughts on “Tutorial: How to make your own shuffle effect with jQuery

  1. Thanks Montana! This really motivates me to write more! The follow me side bar is just a wordpress plugin called Social Profilr, you can do a search on wordpress theme to find this plugin. I believe it is a css image swap on hover. =)

Comments are closed.