33 ms·
JQuery Quicksand plugin
- csomar 17y agoThe design is terrible I mean it's VERY VERY nice :D
- adamilardi 17y agoWOW maybe that can go on the Ipad
- boundlessdreamz 17y agoAmazing. The animations are so smooth. It is almost addictive to watch the animations :)
- bd 17y agoThe animations are so smooth. Unfortunately not in Firefox, at least for me (FF3.6 / Win7). Especially this test was horrible: http://razorjack.net/quicksand/demos/one-set-clone.html http://razorjack.net/quicksand/demos/one-set-clone.html Chrome, Safari and Opera performed much better. Even Explorer had smooth animation, though alpha-channel transparency animation there is broken.
- boundlessdreamz 17y agooh. On chrome mac it is very smooth. On Firefox 3.6 Mac, sometimes the "rearranging objects" feels non-smooth.
- bd 17y agoRearranging is quite fine, it's crossfade and zoom that is very jerky on my notebook. I suspect it could be something about transparencies. Firefox has long tradition of slowdowns when dealing with alpha-channel transparency, especially when compositing multiple transparent layers (also this demo uses "text-shadow" CSS property which puts additional load on renderer).
- psadauskas 17y agoIts smooth for me, FF3.5/Win7. I can't tell any difference between it and Chrome
- bd 17y agoI just tested FF3.5.7 and it's noticeably smoother than FF3.6.
- GrandMasterBirt 17y agoWow, would have never thought! Take that optimization!
- GrandMasterBirt 17y agoSlow for me: FF 3.6 / Ubuntu
- gojomo 17y agoLove it. Thank you, razorjack -- need this for an upcoming project and thought I'd have to piece it together myself from other animation primitives.
- jdee 17y agoI thought I couldnt love jQuery more than I do until I saw this.
- al_james 17y agoHmmmm... does require the addition of a non-standard attribute ("data-id") to the HTML/XHTML... so it will be invalid... Shame that cant be done with class names. E.g. class="data-id-macos".
- hbien 17y agoI think it's fine moving forward towards HTML5.
- cheald 17y agoI'm almost positive you could use jQuery's data functionality to modify that out.
- rossriley 17y agoYes, that's a standard and valid HTML5 attribute.
- al_james 17y agoOh is it? Whoops!
- nostrademons 17y agohttp://dev.w3.org/html5/spec/Overview.html#attr-data http://dev.w3.org/html5/spec/Overview.html#attr-data
- OmarIsmail 17y agoIn the docs there's a parameter for attribute. From the docs it seems like you can use this param to replace the data-id with an XHTML valid attribute.
- threepointone 17y agoThis is pretty cool. I did a similar thing at my last job with this site - http://www.idiom.co.in http://www.idiom.co.in
- martincrow 17y agoYa its really work..
- go2startup 17y agogreat plugin but still wondering how useful it will be
- timinman 17y agoLOL! That's pretty cool, 'Google Pokemon'.
- timinman 17y agoSo did I get downgraded for using 'cool', or or 'LOL', or just for laughing at the Pokemon joke in the demo?
- RedWolves 17y agoHeard about this plugin on last weeks jQuery Podcast.
- lecha 17y agoThis is powerful feature, but the demo example doesn't really give justice to it. There needs to be a good reason to use it. Resorting from name to size of the file it not it. For instance: - Filtering down to a small subset from a large set of visible items. It makes sense to use this effect in case the selected item's representation is zoomed or displays additional detail. The animation indicates that there's a relation between the selection and the larger set. It also gives a clue original distribution of the selected items within the larger set. Example: Show all facebook connections groupped by country. Then select those that have a particular interest as a list. The animation would give you a clue about geo-distribution of people having the same interest. This clue is an additional information you could not see by simply showing the selection. - Reordering (eg. promoting) a small set of items in a large set. The animation shows you how far the item travels when it is promoted. Example: Display the list of tennis players according to their rank at after a given competition. When the user selects the different competition, the list is reordered. The payers who make big jumps attract more attention.
- systemtrigger 17y agoHis ajax demo is your first idea: http://razorjack.net/quicksand/demos/ajax.html http://razorjack.net/quicksand/demos/ajax.html You can use the ajax demo to make your second idea. Like this: $(function(){ $('#load-players a.button').click(function(e){ $.get(($this).attr('href'), function(data) { $('.rank-after').quicksand($(data).find('li')); }); }); }); For each link: event-name.html <ul class="rank-after"> <li data-id="1"><img src="federer.png" /></li> <li data-id="2"><img src="roddick.png" /></li> </ul>
- al_james 17y agoAnyone know of a mootools equivalent?
- lambdom 17y agoThe website design is great too. Congrats.
- nym 17y agoNice, but how many items can it handle without getting choppy? I see 13 items in that demo. Can it do 30? 50? I worked on a large project that attempted to do this for new cars, which is a slightly larger dataset, and in the end we went with Flex because it had much of the functionality built in, and could do the animations much more smoothly. Check it out: http://www.newcars.com/carchooser#6 http://www.newcars.com/carchooser#6 Try clicking on "Price" in the left hand nav, and then moving the slider.