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 a wave-like manner. When clicking on a thumbnail, we'll "zoom" into the wave. Clicking again will make the large content area appear; here we will show some more content.

WaveDisplayEffect
View demo Download source

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:

WaveDisplayEffect_01

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:

WaveDisplayEffect_02

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:

WaveDisplayEffect_03

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!

View demo Download source

Previous:
Next:

Tagged with:

Mary Lou (Manoela Ilic) is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://tympanus.net/

Related Articles

Feedback 27

Comments are closed.
  1. 1

    Many thanks for this wonderful job! I have a question, is it possible to increase the height of the thumbnail images? thanks

  2. 2

    Great! Looks awesome! Trying to implement it for displaying my Flickr gallery using this effect. Got a quick question, any suggestions on how I can implement the same effect from my Flickr?

  3. 3

    Hi Mary,

    Thank you for sharing this great gallery with us. I am currently interested in integrating this Wave in a new website that I am working on, for a zoo. The Wave will have images of the different animals in the zoo and their individual stories. However I am still struggling to finish the project, and since the client won’t pay me until I present the finished product to him, I would need a set of images of wild animals. I am getting a bit desperate, I don’t want to steal some images from other photographers and I want to finish the website as fast as possible. Could anyone help me out?

    • 4

      Hi Gabriel,
      I’m sure you can find lots of free images, because the internet is unlimited, so you just need to search in the right place. You can try some websites like freephotosbank.com or http://www.creattor.com.

  4. 5

    Thanks Mary Lou… Thank you very much for sharing these top galleries with us…………

  5. 6

    Mary Lou… thanks for the share. Another piece of digital interactive art. You (and codrops) are definitely helping to make the web a more beautiful world!

Comments are closed.