Thumbnails zijn een van de puurste stukjes bruikbaarheid die het digitale tijdperk heeft gecreëerd. In wezen is een miniatuur een voorbeeld, een belofte van wat u te zien krijgt als u op de link klikt. Een kleine blik met minder gegevens, sneller te laden en minder hebzuchtig voor schermvastgoed dan het grote goed. Ze zijn ideaal voor afbeeldingen, maar hoe zit het met video?
Welnu, door een techniek uit te breiden die we al gebruiken voor knoptoestanden, kunnen we verbluffende geanimeerde miniaturen maken met basis-CSS en een beetje jQuery.
Tegenwoordig zijn downloadsnelheden niet zo'n probleem voor webontwikkelaars. Natuurlijk zijn kleine bestandsgroottes nog steeds wenselijk, maar de echte prestatieshit op de meeste sites is het aantal HTTP-verzoeken. Telkens wanneer uw site een item laadt, maakt de browser een HTTP-aanvraag die wordt verzonden, verwerkt en vervolgens wordt geretourneerd. Controleer uw console, u zult zien dat een groot deel van de vertraging op uw site niets te maken heeft met de afbeeldingsgrootte, maar wordt doorgebracht met wachten op een serverreactie.
De oplossing is de CSS sprite-techniek; samenvoegen van meerdere afbeeldingen in een enkel afbeeldingsbestand en vervolgens selectief verschillende delen van die afbeelding weergeven met behulp van CSS.
Traditioneel maken we voor elke knop die we niet kunnen maken met standaard CSS-stijlen, drie statussen; een off , een over en een down :
.button{background:url('off-state.png');}.button:hover{background:url('over-state.png');}.button:active{background:url('down-state.png');}Dit zou ertoe leiden dat drie afbeeldingen van de server worden gedownload en drie HTTP-verzoeken genereren.
Als we dit bouwen als een CSS-sprite, slaan we alle drie de afbeeldingen naast elkaar op in een enkel bestand (zodat we in plaats van drie 200 px brede afbeeldingen één breed beeld van 600 pixels hebben) en de positie van de afbeelding wijzigen met behulp van de achtergrondpositie van CSS :
.button{display:block;width:200px;height:83px;background:url('button-states.jpg');}.button:hover{background-position:-200px;}.button:active{background-position:-400px;}Zie het element als een venster, waardoor u het beeld kunt bekijken. U kunt het beeld verplaatsen, maar het venster blijft in dezelfde positie. Op voorwaarde dat je ervoor zorgt dat het element dezelfde grootte heeft als het gedeelte van de afbeelding dat je wilt weergeven, is het effect naadloos: