WebAppers

/ best free open source web resources /

Shopify

Quicksand Reorder & Filter Items with Slick Shuffling Animation

Posted · Category: GPL License, Menu, MIT License

We love Mac apps, especially for their attention to detail. CoreAnimation makes it so easy to create useful and eye-pleasing effects. Quicksand aims at providing a similar experience for users on the web. It can reorder and filter items with a nice shuffling animation.

At the very basic level, Quicksand replaces one collection of items with another. All you need to do is provide those two sets of items. Advanced demonstrations include custom jQuery code to achieve some of the goals, like sorting or making Ajax calls. This code can be copied and used freely, but it’s not part of the plugin.

jquery-filter

Requirements: jQuery Framework
Demo: http://razorjack.net/quicksand/
License: MIT and GPL2 License

10 Comments
  • http://www.gold-price-today.com/ اسعار الذهب

    WOW, that’s great website and service
    thanks alot

  • i think this is awesome!! love it

  • Fodcj

    That is cool. I shall most certainly be using this.

    Thanks

  • Ian

    It’s cool but I don’t like using non-standard HTML like this requires.

    I’m sure that the author could’ve come up with something better than using ‘data-id’ as a new attribute.

  • http://www.TweetMySong.com Robert Durish

    @Ian very true why not just use id instead of data-id. Still I love the effect, I will have to check this out to see how hard it would be to change it to ID in the code.

  • http://getbiblestudy.com London Kentucky Church

    wow, this is awesome, I’ll have to use it on my new site

  • http://pr0digy.com Alex

    @Ian & Robert Durish

    It is a standard attribute in HTML 5, mainly intended for local storage, that can be utilized by scripts. Have a look here – http://www.w3.org/TR/html5/dom.html#custom-data-attribute – or just google for “html 5 data- attribute”.

  • http://riddle.pl riddle

    Robert & Ian

    You can change HTML5 data-attribute to something more familiar like id. All you need to do is use additional parameter:

    $(‘elements’).quicksand({
    attribute: ‘id’
    });

    You can see it in action here: http://razorjack.net/quicksand/demos/two-sets-replace.html

  • http://fedmich.com/life fedmich

    Sweet, I have a project now that can use this Thanks :)

  • Nate

    Pretty cool but the performance is bad and gets screen lag whenever it has to add/remove “rows”

Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons