Javascript (jQuery) gallery made easy

When I need to put a fancy gallery in a site my pick i Galleria.io. It’s a well documented MIT-licensed jQuery-based gallery that you can download here. You can eventually purchase even more fancy themes!

css transformation easing

With CSS3 you can apply transformation to DOM objects.. you can do a lot of thing but basically you can translate, rotate, scale and skew. One interesting thing I discovered today is how to add a custom “easing” to that transformation: cubic-bezier!

What you have to put in your css is:

-webkit-transition: -webkit-transform .5s cubic-bezier(.82,.2,.89,.3);
   -moz-transition: -moz-transform    .5s cubic-bezier(.82,.2,.89,.3);
    -ms-transition: -ms-transform     .5s cubic-bezier(.82,.2,.89,.3);
     -o-transition: -o-transform      .5s cubic-bezier(.82,.2,.89,.3);

Instead of “cubic-bezier(a,b,c,d)” you can also use a few preset (linear, ease, ease-in, ease-out, ease-in-out).

To figure out which values put in that function you can use this useful site: cubic-bezier.com. There you can also compare curves!!!