Share
Det har vært mange innlegg på antall fantastiske jQuery-plugins og hvor du finner dem. Imidlertid er det noen ganger best å ikke stole på tredjeparts plugins og ressurser. Gjør det selv den gammeldags måten! I dag vil vi se på 20 + kreative bruksområder av jQuery i moderne nettsider og applikasjoner; Sørg for å inspirere deg til ditt neste prosjekt.
En av våre sporadiske forfattere, James Padolsey, har en fin funksjon på hans hjemmeside. En "tilpasse" -linjen øverst til høyre på skjermen lar deg endre bakgrunnsfargen på toppteksten.
Besøk nettstedet
Disse gutta er ganske mye gud av webdesign, og deres nettsted virkelig viser det. Bare ta en titt på den egendefinerte jQuery-navigasjonen de brukte på hjemmesiden deres. Har du noen gang sett en så sexy navigasjon i livet ditt?
Besøk nettstedet
FamFamFam trengte en tilpasset lysboks som script for FamSpam (whew, si det tre ganger). De endte opp med å bygge det som nå er kjent som FaceBox, som replikerer effekten av lightbox, men går utover ved å la deg laste inn i statiske HTML-sider, ta kontakt med skjemaer, alt du ønsker egentlig! FaceBox er nå et jQuery-plugin etter all etterspørsel etter deres skript.
Besøk nettstedet
I stedet for å gå med en typisk flashmeny / kontrollmeny, blandet Grooveshark det litt opp og bygget et tilpasset jQuery-skript som lar deg lage dine egne musikk widgets; ganske greit faktisk.
Besøk nettstedet
CSS-Tricks, av Chris Coyier, er neste opp på listen med en fantastisk enkel og kreativ jQuery-navigasjon. Når koblingene er svevet over, i stedet for umiddelbart å bytte farger, brukes jQuery for å hjelpe fargen til å falle sakte til ønsket farge.
Besøk nettstedet
Utvikler David Walsh av DavidWalsh.name implementerer et ekstremt enkelt å bruke skript for å gi koblingene en liten pute på hover. Skriptet benytter de sterke animasjonsegenskapene til jQuery utløst på svinger. Sjekk ut koblingene i sidefeltet og i bunnteksten for å se effekten i handling.
Besøk nettstedet
Hvis du sjekker ut nettstedet CarrotCreative, vil du faktisk merke to virkelig unike jQuery-effekter. For det første, hvis du klikker på nettsteder øverst til venstre, vil du se et unikt program av en "lightbox" som effekt som viser deres nettsteder og ikoner. For det andre, hvis du klikker på noen navigasjonskoblinger, vil du legge merke til at det ikke er noen oppdatering, men at den nye siden bare glir inn fra høyre. Kule ting!
Besøk nettstedet
En annen "to for en" spesiell, Bright Creative bruker en ekstremt subtil glød effekt i deres navigasjon som er veldig beroligende og varm. I tillegg har alle deres porteføljesider en tabbing-effekt, så det er ikke nødvendig for brukeren å oppdatere siden hver gang - takket være AJAX og jQuery.
Besøk nettstedet
Ikke for lenge siden skrev Connor Zwick oss en fin opplæring som demonstrerer nøyaktig hvordan man bygger et fantastisk rullegardinskjema.
Besøk nettstedet
Det ville være en fornærmelse å kalle dette en type "telt" (shivers uttering det ordet). I stedet kom Aviary opp med en veldig fin utseende og fungerende "scroller" for å vise frem mye tekst i en liten mengde plass. Enda bedre er at scroller vil degradere grasiøst, er javascript deaktivert.
Besøk nettstedet
DesignFlavr, kjent for sine gode kilder til designinspirasjon, setter sammen et enkelt fadeIn / fadeOut-skript for å vise frem deres uthevede kunstverk og tilhørende beskrivelser. De har også brukt lavalamp-plugin ganske bra på hovednavigasjonen.
Besøk nettstedet
På Hv-Designs hjemmeside, vil du legge merke til at RSS-ikonet starter som en oversikt / skisse av selve bildet. Da, når hovered, lyser rss-ikonene på plass.
Besøk nettstedet
Foruten å være en absolutt morsom nettside, har Asyl sitt eget søte "populære artikler" rulleskript. Det er vanskelig å stikke på hvorfor denne er så fin, men det er trolig fordi den oppfører sig litt annerledes enn de fleste rulleskript. Det ser nesten ut til å stikke på plass etter at du har gitt det et klikk.
Besøk nettstedet
Brian Reindel opprettet en nettside som viser 5 egendefinerte skript du kan bruke uansett. Artikkelen tar ideer og tidligere javascript-teknikker som ofte brukes og bruker jQuery for å gjøre dem kraftige, kompakte og enkle å lese.
Besøk nettstedet
Coda er kjent for sin fantastiske brukergrensesnitt og nettsteddesign. Det setter en brann under jQuery-plugin-fellesskapet ved å inspirere mange utviklere til å opprette deres tabbing-effekt på siden. I tillegg har de en flott på hover effekt på koblingene som er plassert i overskriften.
Besøk nettstedet
ClarkLab er en velkjent og veldig vellykket forfatter på ThemeForest. Hvis du besøker sin portefølje under, vil du legge merke til at de store toppbildene etter hvert blinker til neste, og viser hele sitt nyeste arbeid. Fade-effekten er så godt utført og subtil, du merker knapt det nye bildet som dukker opp.
Besøk nettstedet
Designer og kunstdirektør Rob Young brukte en unik ide om å vise hans kunst på en simulert Mac-skjerm. Da bruker du jQuery-rullingseffekter, hver ny side glir inn i sidevisningen som om den lastes på en datamaskin.
Besøk nettstedet
Foruten å være et visuelt imponerende nettsted, har WDW noen unike tilpassede jQuery-skript for å legge til klasser til enkelte elementer på svinger. Sjekk ut effektene når rss og navigasjonselementene svinger over.
Besøk nettstedet
En annen veldig kul tabbing-effekt - i stedet for piler er paginering og AJAX brukt til å skape en elegant og ren brukeropplevelse. I tillegg har navigasjonen en veldig fin, men enkel effekt.
Besøk nettstedet
Jeg har lagret mitt absolutte favorittsted for sist. Først, bare se på det designet, det er fantastisk unikt og trøstende. Ved å bruke en av de mest kreative jQuery-skriptene jeg noensinne har sett, har KM en glidebryter-lader hvor glidende det enten øker eller reduserer løvet og utformingen av temaet, avhengig av hvilken retning skyvekontrollen beveges. For et påskeegg må du sjekke kildekoden!
Besøk nettstedet
Husk at jQuery er rett og slett et verktøy og begrenses bare av kreativitet og ferdighetsnivå. Bli unik med design og utviklingsprosess, og du kan bli overrasket over å se gode resultater oppstå. Vær så snill å dele noen av favorittnettene dine med unike bruksområder av jQuery i kommentarfeltet nedenfor! ... Og en Digg eller Stumble ville bli verdsatt! :)
Accentsconagua