Koduleht » UI / UX » Manustage animeeritud GIF-failid nagu Facebook jqGifPreviewiga

    Manustage animeeritud GIF-failid nagu Facebook jqGifPreviewiga

    Twitteris ja Facebookis on palju inimesi GIF-ide jagamine iga päev. Kui need kõik on automaatselt mängitud, võivad need sööda puhul olla halvad.

    Mõlemad võrgud saavad sellest a kliki eelvaate funktsioon kõigi GIFide puhul. See võimaldab kasutajal valida milliseid animatsioone nad soovivad näha valides, millal animatsiooni käivitada / peatada.

    Koos jqGifPreview plugin, saate sama veebisaidi funktsioone tuua.

    See tasuta jQuery plugin töötab kõikidel GIF-idel lehel või saab sihtida mis tahes soovitud lehele. See on fantastiline ressurss, kuid selle loomiseks kulub natuke aega.

    Peatatud GIF on tõesti lihtsalt animatsiooni üks raam, kuvatakse lehel.

    Kahjuks see plugin ei ole tõmbab automaatselt staatilise pildi GIF-ist sinu jaoks. Kuid saate seda teha PHP või mõne muu taustaprogrammi keele abil, nii et veidi koodi abil saab seda automatiseerida.

    See plugin kasutab atribuuti * andmeside * salvestage GIF-pildi asukoht. Kui kasutaja klõpsab pildile, laaditakse see automaatselt src pildi atribuut ja kuvatakse ekraanil.

    Lihtne, tõhus ja kindlasti puhas efekt! Kõik, mida vajame, on selle plugina CSS / JS-failid, mida saate tõmmake otse GitHubist. Ja muidugi vajate jQuery koopiat, ka.

    Sealt seadistate oma pildi niimoodi:

      

    Peamine src atribuut peaks olema sisaldama staatilist pilti. Selle loomiseks saate luua skripti või saate iga GIF-i jaoks käsitsi redigeerida ja üles laadida.

    The data-gif atribuut omab reaalset animeeritud GIF-i ja nad vahetavad klõpsu, kui te suunata põhikuvaklassi (sel juhul on see .myImg). Nüüd on vaja ainult üks rida jQuery'it, et see kõik toimiks:

     $ (". myImg") jqGifPreview (); 

    Kindlasti on üks kõige lahedamaid jQuery pluginaid, mida ma olen näinud ja mis on üsna lihtne seadistada.

    Lisateavet saate aadressil GitHubi leht ja seal on ka a live demo eelvaade arendaja veebisaidil.