Webstandard & Webdesign - CSS, HTML

 

Quicksand - The animated jQuery-Filter

Quicksand - Das in Anlehnung an Mac-Applikationen und hier insbesondere an die Datenvisualisierung CoreAnimation ( animierte Benutzeroberfläche die bspw. auch im iPhone Anwendung findet ), entstand das auf dem JavaScript-Framework jQuery basierende Filter-Plugin Quicksand. Um auch den Besuchern von Webseiten dieses Feeling nicht vorzuenthalten wurde dieses 3KB große Plugin ( komprimierte Version ) für eine Neuordnung und / oder Filterung von Elementen anhand der Bezeichnung oder auch der Dateigröße entwickelt. Ein durchaus interessanter Ansatz zur Filterung von Produkten eines Online-Shops. Das jQuery-Plugin Quicksand bietet hierfür auch einige Optionen, wie bspw. die Art und Weise und die Dauer des Animations-Effektes für die Neuordnung der Elemente.

As it was stated earlier, Quicksand works by comparing two collections of items and replacing them. It's that simple.

Das auf jQuery basierende Filter-Plugin Quicksand ( zu dt. Treibsand ) ist in der dazugehörigen Dokumentation verständlich und einfach beschrieben, so dass sich jQuery-Einsteiger mit diesem Plugin ohne große Probleme zurecht finden mössten.

Das auf jQuery Version 1.3+ basierende Plugin ( unkomprimiert 9KB ) wird für Safari 4, Chrome 4, Firefox 3.5, Opera 10.15 und ab Internet Explorer 7 unterstützt. Ein Support für den IE6 ist seitens der Entwickler nicht geplant. Wer noch ein wenig mehr aus dem Plugin herausholen möchte, sollte sich einmal mit den zusätzlichen allerdings nicht zum Plugin selbst gehörenden Features, wie dem Ajax call, beschäftigen.

Ähnliche Artikel zu diesem Thema:

• Puffing Smoke Effect with jQuery
• PhotoShoot - The Photoshoot Effect with jQuery and CSS
• Sliding Labels - jQuery and Mootools Version