20+ demo's tonen geavanceerde JQuery-effecten
Nog maar kort geleden was Flash een van de primaire technologieën die door webontwerpers werden gebruikt om interactiviteit aan een website toe te voegen.
Sinds de introductie van de iPad, met het ontbreken van de Flash Player, is er een versnelling in de webontwikkelwereld om andere technologieën te gebruiken voor Flash, zoals jQuery, Ajax en anderen.
Hoewel Flash nog steeds een zeer krachtige en nuttige tool is, die in veel gevallen uitstekend werkt, kunnen verschillende van de effecten die webontwerpers in Flash gewend zijn, net zo eenvoudig worden geïmplementeerd met jQuery.
Hier zijn 21 online demo's die de kracht van jQuery laten zien voor het creëren van geavanceerde effecten en interactiviteit die kunnen wedijveren met Flash.
1. Flip! Een jQuery-plug-in
Deze demo bootst de populaire kaarttik-techniek na die een element 360 graden rond zijn eigen x- of y-as kan roteren.
2. jQuery Quicksand-plugin
Dit is een geweldige plug-in voor het sorteren van een reeks elementen / pictogrammen op een pagina met mooie fade-in / fade-out en animatie-effecten.
3. ImageFlow
Deze image viewer is vergelijkbaar met de CoverFlow-interface van Apple die zo bekend is geworden in hun verschillende producten en toepassingen.
4. Een interactieve kaart bouwen met jQuery in plaats van Flash
Deze demo sluit zich aan bij de kracht van jQuery met Ajax om echt een boeiende interface te creëren.
5. Uitschuif tips met jQuery & CSS3
Als u op de symbolen "+" klikt, wordt extra informatie weergegeven met een mooi vloeiend animatie-effect.
6. Zoomer-galerij
In deze demo lijkt het een regulier statisch te zijn afbeeldingengalerij krijgt wat extra interactiviteit door een meerlagig zoomeffect te gebruiken wanneer de muis over een afbeelding zweeft.
7. jQuery Circulate
Deze demo toont het veel gebruikte Flash-effect van het cirkelen van een afbeelding rond een pagina - alles gedaan met behulp van jQuery.
8. Foto uitzoomen Effect
Deze demo ziet er bedrieglijk eenvoudig uit, maar bij verder onderzoek zul je zien dat er verschillende lagen zijn aan de complexiteit van het uitzoomeffect.
9. Glijdende dozen en bijschriften met jQuery
Hier krijgen we te zien hoe krachtige overgangen kunnen worden gemaakt met jQuery, een techniek die ooit alleen voor Flash-ontwikkelaars was gereserveerd.
10. CSS3 Lightbox-galerij
Deze plug-in ziet eruit alsof deze specifiek is geschreven voor sociale media. Een foto slepen en neerzetten boven het "deelvak" opent een modaal venster dat de interface kan zijn om een API aan te roepen via AJAX, waarmee de gebruiker een foto kan delen op Flickr, Twitter, Facebook en andere sites.
11. Een Photoshoot-effect maken met jQuery & CSS
Hoewel deze demo op het eerste gezicht misschien een eye-candy lijkt, kan het een zeer krachtig hulpmiddel zijn om met grote afbeeldingen te werken in combinatie met AJAX of HTML5 lokale opslag.
12. Geweldige bellennavigatie
Hier maakt de ontwikkelaar goed gebruik van kleurovergangen en animatie om een zeer aantrekkelijk en interactief menu te produceren.
13. Prachtige achtergrondafbeeldingen Navigatie
In deze demo activeert elke gebruikersactie verschillende overgangen die allemaal werken om de gebruiker volledig onder te dompelen in de interface.
14. AviaSlider
AviaSlider maakt gebruik van klassieke Flash-achtige overgangseffecten om te verbeteren wat lijkt op een standaard slider-interface.
15. Diapresentatie achtergrondafbeelding
Geanimeerde achtergronden zijn een van de gebieden waarop Flash domineerde in webontwerp. Hier is een voorbeeld waarin jQuery wordt gebruikt.
16. Diavoorstelling pannen
Nog een unieke kijk op de typische diavoorstelling-interface. Hier voegt de auteur diagonale navigatie toe om de interface op te fleuren en op te laten vallen.
17. jqFancyTransitions
Deze plug-in kan worden gebruikt om uw foto's als een diavoorstelling weer te geven met fraaie Flash-achtige overgangseffecten.
18. iCarousel - Schuifregelaar horizontale afbeeldingen
Nog een diavoorstelling die slechts een beetje ontspanning toevoegt om de overgangen echt op te laten vallen. Het is geen wonder dat ze ervoor kozen om sexy Mac-producten in deze demo te presenteren.
19. Een interactieve foto maken met jQuery
Deze demo kan worden gebruikt om te profiteren van websites met veel schermruimte. Als u op een gedeelte van de website klikt, wordt een modaal vak weergegeven met meer informatie over het gedeelte waarop is geklikt.
20. Cloud Zoom
Een plug-in die eruit ziet alsof deze is ontworpen met eCommerce in gedachten. Cloud Zoom is eenvoudig te implementeren en kan de gebruikerservaring echt verbeteren.
21. Apple-achtig netvlieseffect
Iedereen die een iPhone, iPod touch of iPad heeft gebruikt, is bekend met de "Retina-weergave" die een klein gebied op het scherm vergroot wanneer u het gebied gedurende langere tijd aanraakt. Deze demo implementeert dit effect voor de desktop.
Gecompileerd exclusief voor WDD door Kalim Fleet . Hij is een professionele webdesigner en blogger met meer dan 6 jaar ervaring. Het web is zijn passie omdat hij zijn tijd verdeelt tussen blogschrijven, softwareontwikkeling en sociale media. Hij houdt van het gebruiken en ontwikkelen van nieuwe applicaties voor het web, mobiel en desktop.
Kent u andere geweldige voorbeelden van jQuery-effecten die de kracht van Flash kunnen evenaren? Suggereer je ooit jQuery-effecten op Flash wanneer je klanten ze vragen? Deel hieronder uw mening en voorbeelden!