Wave Display Effect with jQuery

How cool is it to sometimes just display content a little bit differently? Today we want to share an experiment with you that let’s you show images and content in a unique form – a wave. The idea is to initially have some smaller thumbnails rotated and placed in the shape of a sine curve. When clicking on a thumbnail, we’ll “zoom” in to see a medium sized version. Clicking again will make the large content area appear; here we will show some more content.

The images used in the demo are by Chris Willis. They are licensed under the Attribution 2.0 Generic (CC BY 2.0) License.

The icons are by WPZOOM and you can find the set here:
WPZOOM Developer Icon Set (154 free icons)
They are licensed under the Attribution-ShareAlike 3.0 Unported License.

The beautiful slider is by Orman Clark of premiumpixels.com.

How it works

The HTML structure will consist of a main wrapper with the class wd-wrapper. In the demo it is set as absolute so that we can stretch it over the page with left/right/top/bottom without giving it a height or a width. But it could also be a relative element with a defined width and height. The sine curve will automatically adjust to the wrapper height. In the demo, you can see that working by resizing the window.

Initially, we will have the sine curve showing small thumbnails, all randomly rotated:

For adding images and content, the following element is of interest:

<div class="wd-element">
	<img src="images/1.jpg" alt="Some Image" />
	<div class="wd-info">
		<div class="wd-info-title">
			<h2>Some title</h2>
		</div>
		<div class="wd-info-desc">
			<p>Some Description</p>
		</div>
	</div>
</div>

The element with the class wd-info-desc is the one showing when opening an item in the second zoomed view, which is the following:

In this stage, we also have a zoom out button that will allow us to go back to the previous small thumbnail view. When clicking on one of the medium thumbnails, the content area opens. Here, the user can navigate through all of the items or click on “close” in order to go back to the medium thumbnail view:

Options

There are several options you can use in order to adjust the appearance and animation of the wave.
Let’s have a look at the default options:

speed				: 1000,				
// speed for the animations

easing				: 'easeInOutExpo',	
// easing for the animations

minImgW				: 50,				
// minimum width the thumbnail 
// will have (randomly set)

maxImgW				: 90,				
// maximum width the thumb 
// image will have (randomly set)

minImgAngle			: -15,				
// minimum rotation angle the 
// thumbnail will have (randomly set)

maxImgAngle			: 15,				
// maximum rotation angle 
// the thumbnail will have (randomly set)

leftFactor			: 40,				
// space between images on the x-axis  

startFactor			: 1,				
// the higher this value, the more 
// space between the first thumbnail and 
// the left of the container

sinusoidFunction 	: {
	A	: 100,	// amplitude
	T 	: 700, 	// period
	P	: 0		// phase
}

Demos

We have four demonstrations, each one using different option values:

1. Default: In this demo we are showing the wave with its default options
2. Demo 2: The thumbnails are slightly bigger, the amplitude of the sine curve is smaller and period is higher, making the whole curve look smoother.
3. Demo 3: Here we set the size of the thumbnails to be the same size and a bit smaller. The speed and the easing effect is different, too.
4. Demo 4: The range of the rotation angles are bigger and we have a different phase making the wave start differently.

We hope you like our little experiment and find it inspiring and useful!