Share
Er zijn veel berichten over het aantal geweldige jQuery-plug-ins en waar ze te vinden zijn. Soms is het echter het beste om niet te vertrouwen op plug-ins en bronnen van derden. Doe het zelf op de ouderwetse manier! Vandaag bekijken we meer dan 20 creatieve toepassingen van jQuery in hedendaagse websites en applicaties; zeker om u te inspireren voor uw volgende project.
Een van onze sporadische schrijvers, James Padolsey, heeft een leuke functie op zijn website. Een "aanpassen" -balk in de rechterbovenhoek van het scherm stelt u in staat de achtergrondkleur van de kop te wijzigen.
Bezoek Site
Deze kerels zijn zowat de goden van webdesign en hun site bewijst het echt. Kijk maar eens naar de aangepaste jQuery-navigatie die ze op hun homepage hebben gebruikt. Heb je ooit zo'n sexy navigatie in je leven gezien??
Bezoek Site
FamFamFam had een aangepast lightbox-achtig script nodig voor FamSpam (wat, zeg dat drie keer). Ze bouwden uiteindelijk wat nu bekend staat als FaceBox, dat de effecten van lightbox repliceert, maar het doet het beste door je te laten laden in statische html-pagina's, contactformulieren, alles wat je echt wilt! FaceBox is nu een jQuery-invoegtoepassing na alle vraag naar hun script.
Bezoek Site
In plaats van te gaan met een typisch flash-menu / bedieningsmenu, mengde Grooveshark het een beetje en bouwde een aangepast jQuery-script waarmee je je eigen muziekwidgets kunt maken; best wel knap.
Bezoek Site
CSS-Tricks, door Chris Coyier, is de volgende in de lijst met een wonderbaarlijk eenvoudige en creatieve jQuery-navigatie. Wanneer de koppelingen zijn overgeheveld, wordt jQuery gebruikt in plaats van onmiddellijk van kleur te veranderen om de kleur langzaam te laten vervagen tot de gewenste kleur.
Bezoek Site
Ontwikkelaar David Walsh van DavidWalsh.name implementeert een uiterst eenvoudig te gebruiken script om je links een klein duwtje in de rug te geven tijdens het zweven. Het script maakt gebruik van de sterke animatiemogelijkheden van jQuery geactiveerd bij zweven. Bekijk de links in de zijbalk en in het voetgedeelte om het effect in actie te zien.
Bezoek Site
Als je de CarrotCreative-website bekijkt, merk je echt twee echt unieke jQuery-effecten op. Ten eerste, als u linksboven op sites klikt, ziet u een unieke toepassing van een 'lightbox'-achtig effect met een lijst van hun sites en pictogrammen. Ten tweede, als u op navigatielinks klikt, ziet u dat er geen vernieuwing is, maar dat de nieuwe pagina gewoon van rechts naar rechts schuift. Coole dingen!
Bezoek Site
Een andere "twee voor één" special, Bright Creative maakt gebruik van een uiterst subtiel gloei-effect in hun navigatie dat zeer rustgevend en warm is. Bovendien hebben al hun portfolio-pagina's een tabbing-effect, dus het is niet nodig voor de gebruiker om de pagina elke keer te vernieuwen - dankzij AJAX en jQuery.
Bezoek Site
Nog niet zo lang geleden heeft Connor Zwick ons een leuke tutorial geschreven die precies laat zien hoe je een geweldig drop-down inlogformulier kunt bouwen.
Bezoek Site
Het zou een belediging zijn om dit een soort 'tent' te noemen (rillingen die dat woord uitspreken). In plaats daarvan bedacht Aviary een erg mooi ogende en functionerende 'scroller' om veel tekst in een kleine hoeveelheid ruimte te presenteren. Nog beter is dat de scroller gracieus verslechterd is, is javascript uitgeschakeld.
Bezoek Site
DesignFlavr, bekend om hun geweldige bronnen van ontwerpinspiratie, stelde een eenvoudig fadeIn / fadeOut-script samen om hun aanbevolen illustraties en bijbehorende beschrijvingen te presenteren. Bovendien hebben ze de lavalamp-plug-in behoorlijk goed gebruikt in hun hoofdnavigatie.
Bezoek Site
Op de startpagina van Hv-Designs zult u zien dat het RSS-pictogram begint als een schets / schets van de werkelijke afbeelding. Vervolgens zweven de rss-pictogrammen op hun plaats wanneer ze zweven.
Bezoek Site
Naast het feit dat het een absoluut hilarische website is, heeft Asylum een eigen scrollen script met 'featured articles'. Het is moeilijk om een vingerwijzing te leggen waarom dit zo leuk is, maar dat komt waarschijnlijk omdat het zich iets anders gedraagt dan de meeste scrolleurscripts. Het lijkt bijna op zijn plaats te klikken nadat je het een klik hebt gegeven.
Bezoek Site
Brian Reindel heeft een webpagina gemaakt met 5 aangepaste scripts die u kunt gebruiken zoals u wilt. Het artikel neemt ideeën en vorige javascript-technieken vaak gebruikt en maakt gebruik van jQuery om ze krachtig, compact en gemakkelijk te lezen te maken.
Bezoek Site
Coda staat bekend om zijn geweldige gebruikersinterface en siteontwerp. Het heeft een vuurtje gezet onder de jQuery plugin-community door veel ontwikkelaars te inspireren hun pagina-tabbing-effect opnieuw te maken. Bovendien hebben ze een geweldig zweefeffect op de links in de koptekst.
Bezoek Site
ClarkLab is een bekende en zeer succesvolle auteur op ThemeForest. Als je zijn portfolio hieronder bezoekt, zul je merken dat de grote header-afbeeldingen uiteindelijk vervagen naar de volgende, waarin al zijn nieuwste werk wordt gepresenteerd. Het vervagingseffect is zo goed gedaan en subtiel dat je nauwelijks merkt dat het nieuwe beeld verschijnt.
Bezoek Site
Ontwerper en Art Director Rob Young gebruikte een uniek idee om zijn illustraties op een gesimuleerd Mac-scherm te tonen. Met behulp van scrolleffecten van jQuery wordt elke nieuwe pagina in de paginaweergave geplaatst alsof deze op een computer wordt geladen.
Bezoek Site
Behalve dat het een visueel verbluffende website is, biedt WDW een aantal unieke aangepaste jQuery-scripts om klassen aan bepaalde elementen tijdens een zweeftekst toe te voegen. Bekijk de effecten wanneer de rss en de navigatie-items zijn overgeheveld.
Bezoek Site
Nog een echt cool tab-effect - in plaats van pijlen worden paginering en AJAX echter gebruikt om een slanke en schone gebruikerservaring te creëren. Bovendien heeft de navigatie een heel mooi, maar eenvoudig effect.
Bezoek Site
Ik heb mijn absolute favoriete site voor het laatst bewaard. Kijk eerst naar dat ontwerp, het is heerlijk uniek en geruststellend. Met een van de meest creatieve jQuery-scripts die ik ooit heb gezien, heeft KM een 'loof-o-meter' schuifregelaar waar het schuiven het gebladerte en het ontwerp van het thema vergroot of verkleint, afhankelijk van de richting waarin de schuif wordt verplaatst. Controleer voor een paasei de broncode!
Bezoek Site
Houd er rekening mee dat jQuery eenvoudig een hulpmiddel is en alleen wordt beperkt door uw creativiteit en vaardigheidsniveau. Krijg een uniek karakter met je ontwerpen en ontwikkelingsproces en je zult verbaasd zijn als je ziet dat er geweldige resultaten optreden. Zorg ervoor dat u uw favoriete websites met uniek gebruik van jQuery deelt in de sectie Reacties hieronder! ... En een Digg of Struikelen zou zeer gewaardeerd worden! :)
Accentsconagua