Beautiful images animation Waves effect

DOWNLOAD

Makes cool ass lakes.

No license, do what you want as long as it involves some Cool Ass Lakes.

How does it work?

<script src="jquery.js"></script>
<script src="lake.js"></script>
<script>
$(function() {
  $('#lake-img').lake({
    'speed': 1,
    'scale': 0.5,
    'waves': 10
  });
});
</script>

Lake.js takes an img element and inserts a canvas element displaying the image and its flipped reflection directly after the img element.

The new canvas element will be the same width as the original image and double the height.



Speed makes the waves move faster or slower.
Scale makes the waves higher or shallower.
Waves creates more or less waves.


Frames are precomputed, lake.js will slow down page loads but will perform well on lots of devices.

The article source:http://alligator.github.com/lake.js/

Awesome CSS3 images Stacked Elements

DOWNLOAD

we'll show you how to create a simple ‘stacked’ look to some images.

HTML

<div class="stack">
    <img src="image1.jpg" />
</div>

HTML5 sorting photos Drag and Drop effect

DOWNLOAD

Drag and Drop and HTML5. As you know (I hope), all modern browsers (it should be FF, Safari, Chrome, possible Opera) have native support of this useful feature (as drag and drop). It means that we can use it in our projects, the code won’t be very difficult. And, as the example of practical implementation, let assume that we have to sort some media (images) between some albums.

Step 1. HTML