jQuery Quicksand

gepost op Donderdag 24 juni 2010 door Inge

jQuery Quicksand

Hier bij Webatvantage werken we graag met jQuery voor het verzorgen van animaties op een website.
Een jQuery applicatie kan net dat ietsje extra toevoegen aan webdesign. Het oogt mooi en zorgt doorgaans voor een verhoogde functionaliteit (en dus gebruiksvriendelijkheid) van een website. jQuery plugins waar we vaak mee werken zijn:

  • FancyBox (Bekijk een voorbeeld op de website van Rogge Juweliers.)
    FancyBox is een hulpmiddel voor het weergeven van afbeeldingen, html-inhoud en multi-media in een Mac-stijl 'lightbox' dat verschijnt over de inhoud van je website.
  • jSuggest (Bekijk een voorbeeld op de website van Interza.)
    jSuggest is een geadvanceerde auto-complete functie voor een input field.
  • Nivo Slider (Bekijk een voorbeeld op de website van Bovo Zwembaden.)
    Nivo Slider is een coole image slideshow met vorige en volgende buttons en met meerdere knappe transitiemogelijkheden.
  • jCarousel Lite (Bekijk een voorbeeld op de website van Dama.)
    jCarousel Lite is een afbeeldingen carousel. Voor tekst én afbeeldingen gebruik ik meestal de jFlow slider.
  • Lazy Load (Bekijk een voorbeeld op onze portfolio pagina.)
    Met deze plugin worden afbeeldingen pas gedownload wanneer je er naar scrollt. De pagina zal sneller laden omdat de foto's die nog niet zichtbaar zijn niet worden gedownload.

Voor de webshop van Scarpo, een winkel die gespecialiseerd is in de verkoop van allerhande lederwaren, ben ik eens gaan spelen met het relatief recent ontwikkelde Quicksand script.

Functionality meets beauty!

Quicksand filtert en ordent items met mooie shuffelende bewegingen. Op de webshop van Scarpo kun je zoeken op merk of artikel. De integratie van de Quicksand applicatie zorgt ervoor dat je de producten in de desbetreffende categorie dan ook nog eens kunt filteren op de rubrieken dames, heren, uniseks, topper en nieuw. Ook kun je de producten gaan rangschikken op naam en prijs.

Kortom kan de bezoeker van de webshop zo gemakkelijk zelf bepalen welke content hij te zien krijgt.

Credits gaan naar Jacek Galanciak alias Razorjack.
Neem een kijkje op de webshop van Scarpo voor een voorbeeld van de Quicksand applicatie.
Meer informatie over Quicksand en enkele demo's vind je hierzo.

Categorie: Webatvantage, Technologieën, Trends & hypes, Development, Actualiteit, Webdesign, Webshop
Tags: Usability, Portfolio, Typo, Design, JavaScript, Webshop, jQuery

Geef een reactie op deze blogpost


Vrijdag 25 juni 2010 door Karel

Bedankt voor het delen van jullie meest gebruikte jQuery plugins. Bij Lazy Load heb ik wel men twijfels, het laden wordt initieel inderdaad sneller maar als gebruiker wil je ook zonder vertraging kunnen scrollen, en hoe vaak heb je een pagina waar zulke hoeveelheden foto's in eerste instantie niet zichtbaar zijn? Verder leuk artikel!

Vrijdag 25 juni 2010 door Thomas

Klopt, je mag zeker niet overdrijven met lazy load. Het zit technisch wel sterk in mekaar.

Woensdag 30 juni 2010 door Bram Lodens

Nog een leuke en handige jQuery: http://www.stumbleupon.com/su/8RFpgv/www.tuttoaster.com/creating-bar-graphs-using-jquery-ui//r:t

Woensdag 01 juni 2011 door Tim

Naar aanleiding van het filtersysteem op Scarpo, ben ik er ook maar eens mee aan de slag gegaan op mijn portfolio. Het is vrij eenvoudig te installeren en het ziet er voor de bezoeker gelijk heel futuristisch uit. Het werkt ook allemaal vrij soepel Bedankt voor de tip!Nu nog eens kijken of ik wat een Lazy Load kan gaan hebben.

Icon twitter

Twitter update

Interessante meeting met @Ogone gehad. Meer mogelijkheden met minder administratie #mooizo.

Blog categorieën



Zoeken



Laatste reacties

Donderdag 08 december 2011

zhong reageerde op HTML 5 vs Flash

Woensdag 23 november 2011

NEWTRAFFIC, internet marketing specialist reageerde op Schema.org is good for you!

Vrijdag 04 november 2011

Goedkope keukens reageerde op QR-code als mobile marketing


Icon RSS

RSS Feed

Wanneer u zich op deze pagina voor een RSS feed aanmeldt, krijgt u samenvattingen van de berichten op een eenvoudige manier aangeleverd.

 

Nieuwsbrief

Schrijf je in op de nieuwsbrief en blijf zo op de hoogte van alles wat reilt en zeilt bij Webatvantage.