Smámyndir eru einn af hreinustu notkunarþáttum stafrænna tímana hefur skapað. Í aðalatriðum er smámyndir forsýning, loforð um hvað þú munt sjá ef þú smellir á tengilinn. Lítill innsýn í minni gögn, hraðar að hlaða og minna gráðugur fyrir skjá fasteign en fullur eign. Þeir eru tilvalin fyrir myndir, en hvað um myndband?
Jæja, með því að útvíkka tækni sem við notum nú þegar fyrir hnappastöðum getum við búið til ótrúlega hreyfimyndir með einfaldri CSS og smá jQuery.
Nú á dögum eru niðurhalshraði ekki slíkt vandamál fyrir vefhönnuði. Auðvitað eru lítil skráarstærðir enn æskilegt, en raunveruleg árangur á flestum stöðum er fjöldi HTTP beiðna. Í hvert skipti sem vefsvæðið þitt er hlaðið inn eigna, gerir vafrinn HTTP beiðni sem er sent, unnið og síðan skilað. Athugaðu hugga þinn, þú munt sjá að mikið af töf á vefsvæðinu þínu er ekkert að gera með myndastærð, það er varið að bíða eftir svari við miðlara.
Lausnin er CSS sprite tækni; sauma margar myndir í eina myndskrá og síðan velja sér mismunandi hlutum þess myndar með því að nota CSS.
Hefð, fyrir hvaða hnapp sem við getum ekki búið til með undirstöðu CSS stílum, myndum við búa til þrjá ríki; burt , yfir og niður :
.button{background:url('off-state.png');}.button:hover{background:url('over-state.png');}.button:active{background:url('down-state.png');}Þetta myndi leiða til þess að þrír myndir séu sóttar af netþjóni og mynda þrjár HTTP beiðnir.
Búðu til þetta sem CSS sprite, við vistum öll þrjú myndir við hliðina á hverri annarri í einum skrá (þannig að í stað þess að hafa þrjú 200 punkta breitt myndir höfum við eina 600px breiða mynd) og breytt stöðu myndarinnar með bakgrunnsstaða CSS :
.button{display:block;width:200px;height:83px;background:url('button-states.jpg');}.button:hover{background-position:-200px;}.button:active{background-position:-400px;}Hugsaðu um þáttinn sem glugga, þar sem þú skoðar myndina. Hægt er að færa myndina í kring, en glugginn heldur áfram í sömu stöðu. Að því tilskildu að þú tryggir að þátturinn sé í sömu stærð og sá hluti myndarinnar sem þú vilt birta þá er áhrifin óaðfinnanlegur: