20+ demoja, jotka näyttävät edistyneitä JQuery-tehosteita
Vähän aikaa sitten Flash oli yksi ensisijaisista tekniikoista, joita web-suunnittelijat käyttävät lisäämällä vuorovaikutteisuutta verkkosivustoon.
IPadin käyttöönoton jälkeen Flash-soittimen puuttuessa verkkokehitysmaailmassa kiihtyy vaihtoehtoisten Flash-tekniikoiden, kuten jQueryn, Ajaxin ja muiden, käyttöä.
Vaikka Flash on edelleen erittäin tehokas ja hyödyllinen työkalu, joka toimii hyvin monissa tapauksissa, monet vaikutukset, joita web-suunnittelijat ovat tottuneet luomaan Flashissa, voidaan yhtä helposti toteuttaa jQuery-sovelluksella.
Tässä on 21 online-demosta, jotka osoittavat jQueryn voiman luoda kehittyneitä tehosteita ja vuorovaikutteisuutta, jotka voivat kilpailla Flashissa.
1. Käännä! JQuery-plugin
Tämä demo jäljittelee suosittua kortin kääntömenetelmää, joka voi kiertää elementtiä 360 astetta omalla x- tai y-akselillaan.
2. jQuery Quicksand plugin
Tämä on loistava lisäosaa lajitteluun elementtien / kuvakkeiden sivulle, jossa on hienoja fade-in / fade-out- ja animaatioefektejä.
3. ImageFlow
Tämä kuvankatseluohjelma on samanlainen kuin Applen CoverFlow-käyttöliittymä, joka on tullut niin tutuksi eri tuotteissaan ja sovelluksissaan.
4. Luo interaktiivinen kartta jQueryilla Flashin sijaan
Tämä demo yhdistää jQueryn voiman Ajaxin kanssa todella luoda kiehtova käyttöliittymä.
5. Slideout-vinkit jQuery & CSS3: lla
Klikkaamalla "+" -symbolia paljastuu lisätietoja, joilla on hieno sileä animaatioefekti.
6. Zoomer-galleria
Tässä demossa näyttää olevan säännöllinen staattinen kuvagalleria antaa jonkin verran ylimääräistä interaktiivisuutta käyttämällä monikerroksista zoomauskykyä liikkumalla kuvan yli.
7. jQuery Circulate
Tämä demo näyttää paljon käytetyn Flash-vaikutuksen, joka kiertää kuvaa sivun ympärillä - kaikki tehdään jQueryn avulla.
8. Photo Zoom -toiminto
Tämä demo näyttää petolliselta yksinkertaiselta, mutta lisätutkimuksen jälkeen on olemassa useita kerroksia zoom-out-efektin monimutkaisuuteen.
9. Liukuvat laatikot ja kuvatekstit jQueryn kanssa
Tässä näemme kuinka tehokkaita siirtymiä voidaan luoda jQuery-tekniikalla, joka on varattu vain Flash-kehittäjille.
10. CSS3-valokuvagalleria
Tämä plugin näyttää olevan kirjoitettu nimenomaan sosiaalisen median puolesta. Valokuvan vetäminen ja pudottaminen "jakaa laatikon" päälle avautuu modaalinen ikkuna, joka voi olla käyttöliittymä API: n kautta AJAX: n kautta, jonka avulla käyttäjä voi jakaa valokuvan Flickrissä, Twitterissä, Facebookissa ja muissa sivustoissa.
11. Photoshoot-efektin tekeminen jQuery & CSS: n avulla
Vaikka tämä demo voi näyttää silmänräpäykseltä ensi silmäyksellä, se voi olla erittäin tehokas työkalu suurien kuvien käsittelyyn yhdistettynä AJAX- tai HTML5-paikalliseen tallennustilaan.
12. Mahtava Bubble Navigation
Tässä kehittäjä käyttää hyväkseen värien siirtymiä ja animaatiota tuottaakseen erittäin houkuttelevan ja interaktiivisen valikon.
13. Kaunis taustakuva navigointi
Tässä demossa jokainen käyttäjätoiminto laukaisee useita siirtymiä, jotka toimivat täysin käyttäjän upottamiseksi käyttöliittymään.
14. AviaSlider
AviaSlider käyttää klassisia Flash-tyyppisiä siirtymätehosteita parantaakseen sitä, mikä näyttää olevan tavallinen liukusäädintä.
15. Taustakuvan diaesitys
Animoitut taustat ovat yksi niistä alueista, joissa Flash käytti hallitsevansa web-suunnittelua. Tässä on esimerkki jQueryn käytöstä.
16. Diaesityksen katselu
Toinen ainutlaatuinen kuvaus tyypillisestä kuvaesityssovelluksesta. Tässä kirjoittaja lisää diagonaalisen navigoinnin, joka houkuttelee käyttöliittymän ja tekee siitä erottuvan.
17. jqFancyTransitions
Tämän plugin avulla voit näyttää valokuvasi diaesityksenä hienoina Flash-kaltaisina siirtymäefekteinä.
18. iCarousel - vaakakuvien liukusäädin
Toinen diaesitys, joka lisää vain helpotuksen siirtymistä, jotta siirtymät todella näkyvät. Ei ole ihme, että he valitsivat esittelevät seksikkäitä Mac-tuotteita tässä demossa.
19. Interaktiivisen kuvan tekeminen jQueryn kanssa
Tätä demoa voidaan hyödyntää verkkosivustoilla, joissa on paljon näytön tilaa. Verkkosivun osioon klikkaamalla näkyy modaalinen ruutu, joka näyttää lisää tietoja napsautetusta osasta.
20. Cloud Zoom
Näyttävä plugin on suunniteltu sähköisen kaupankäynnin mielessä. Cloud Zoom on helppo toteuttaa ja voi todella parantaa käyttäjän kokemuksia.
21. Applen kaltainen Retina Effect
Jokainen, joka on käyttänyt iPhonea, iPod touchia tai iPadia, tuntee "Retina View", joka suurentaa pienen alueen näytöllä, kun kosketat aluetta pitkään aikaan. Tämä demo toteuttaa tämän vaikutelman työpöydälle.
Koostuu yksinomaan WDD: lle Kalim Fleet . Hän on ammattimainen web-suunnittelija ja bloggaaja, jolla on yli 6 vuoden kokemus. Verkko on hänen intohimonsa, kun hän jakaa ajastaan blogin kirjoittamisen, ohjelmistokehityksen ja sosiaalisen median välillä. Hän rakastaa uusien sovellusten käyttöä ja kehittämistä webistä, mobiililaitteista ja työpöydästä.
Tiedätkö muista hyvistä esimerkkeistä jQuery-tehosteista, jotka voivat kilpailla Flashin voimalla? Oletteko koskaan ehdottanut jQuery-vaikutuksia Flashin yli, kun asiakkaasi pyytävät niitä? Jaa näkemyksesi ja esimerkkisi alla!