Best jQuery CSS2 / CSS3.0 Plugins & Tutorials with Demo

    Expanding Bar Navigation Concept with CSS & JavaScript

    Expanding Bar Navigation Concept with CSS & JavaScript

    Today we’d like to share an experimental tab-like navigation with you. The main idea is to animate the bars of the navigation in a way that they expand to reveal some further content. The navigation is either shown in a vertical or horizontal orientation. For this experiment we are using anime.js.

    Stack Motion Hover Effects with CSS & JavaScript

    Stack Motion Hover Effects with CSS & JavaScript

    Today we’d like to share some tiny hover effect ideas with you. The concept stems from the hover effect seen on Merci-Michel which has a really nice feel to it because of its fluidity. The idea is to show a stack behind the hovered thumbnail that has the same main color as the image and then animate the elements in a swift motion. We are using the JavaScript library anime.js for the animations.

    Form Wizard : jQuery Multi Step Form Validation

    Form Wizard : jQuery Multi Step Form Validation

    Single page 3/4/5 step form with every step script field validation. Multi format and style 144 item Sign up form, Include image uploader system. Using bootStrap responsive and it’s easy to customize for you.

    Blurify : JavaScript library to blurred Images

    Blurify : JavaScript library to blurred Images

    Blurify.js is a tiny(~2kb) library to blurred pictures, support graceful downgrade from `css` mode to `canvas` mode.

    AniCollection : Collection of CSS Animations

    AniCollection : Collection of CSS Animations

    AniCollection is a collection of awesome CSS3 animations from many libraries and many people. To give you an easy way to find, use and share it.

    First Person Sunglasses with CSS & JavaScript

    First Person Sunglasses with CSS & JavaScript

    Today we’d like to share a fun little experiment with you: a geeky “try-on” sunglasses effect. It’s not a “try-on” in the classical sense for previewing how the sunglasses might look on a person, but instead how the view looks like when putting on some sunglasses and looking through them. For that we use a simple overlay effect and some animations to mimic the movement you do when you try on glasses from the first person perspective.

    Image Mask Effect with CSS & jQuery

    Image Mask Effect with CSS & jQuery

    An immersive transition effect powered by image masks and CSS transforms.

    Inspiration for Search UI Effects with CSS & JavaScript

    Inspiration for Search UI Effects with CSS & JavaScript

    Today we’d like to share a couple of ideas for search interaction effects with you. Mainly, we’d like to provide you with some inspiration for how to show the search interface in an interesting way. Maybe you’ve seen some modern animations for showing the search already, like Swiss Army Man or CMMNTY. Today we want to explore some different layouts combined with some engaging CSS animations.

    Muuri : Filterable & Draggable Grid Layouts with JavaScript

    Muuri : Filterable & Draggable Grid Layouts with JavaScript

    Muuri creates responsive, sortable, filterable and draggable grid layouts. Yep, that’s a lot of features in one library, but we have tried to make it as tiny as possible. Comparing to what’s out there Muuri is a combination of Packery, Masonry, Isotope and jQuery UI sortable.

    Little Fragments: Simple Image Poster Effect with CSS & JavaScript

    Little Fragments: Simple Image Poster Effect with CSS & JavaScript

    A tutorial on how to create a simple image effect with little image fragments inspired by some poster art and powered by clip-path.

    The inspiration comes from a poster of the Grand Canyon with a fun distortion-like effect: some pieces of the image are cut out and placed in a different position. The pieces are very small which creates an interesting and creative look. We’ll be showing you today how to create a similar effect with CSS and some JavaScript.