Miniatury są jednym z najczystszych elementów użyteczności, jakie stworzyła epoka cyfrowa. W istocie miniatura to podgląd, obietnica tego, co zobaczysz po kliknięciu linku. Niewielki przebłysk z mniejszą ilością danych, szybszy do załadowania i mniej chciwy dla ekranu nieruchomości niż pełnowymiarowy zasób. Są idealne do obrazów, ale co z wideo?
Cóż, rozszerzając technikę używaną już na stany przycisków, możemy stworzyć niesamowite animowane miniatury z podstawowym CSS i małym jQuery.
W dzisiejszych czasach prędkości pobierania nie stanowią problemu dla twórców stron internetowych. Oczywiście małe rozmiary plików są nadal pożądane, ale prawdziwym osiągnięciem w większości witryn jest liczba żądań HTTP. Za każdym razem, gdy witryna ładuje zasób, przeglądarka wysyła żądanie HTTP, które jest wysyłane, przetwarzane, a następnie zwracane. Sprawdź swoją konsolę, zobaczysz, że znaczna część opóźnienia w Twojej witrynie nie ma nic wspólnego z rozmiarem obrazu, czas oczekiwania na odpowiedź serwera.
Rozwiązaniem jest technika sprite CSS; łączenie wielu obrazów w jeden plik obrazu, a następnie selektywne wyświetlanie różnych części tego obrazu za pomocą CSS.
Tradycyjnie dla każdego przycisku, którego nie możemy utworzyć przy użyciu podstawowych stylów CSS, stworzyliśmy trzy stany; off , over and down :
.button{background:url('off-state.png');}.button:hover{background:url('over-state.png');}.button:active{background:url('down-state.png');}Doprowadziłoby to do pobrania trzech obrazów z serwera i wygenerowania trzech żądań HTTP.
Budując to jako sprite CSS, zapisujemy wszystkie trzy obrazy obok siebie w jednym pliku (tak, że zamiast mieć trzy obrazy o szerokości 200 pikseli mamy jeden obraz o szerokości 600 pikseli) i zmieniamy położenie obrazu za pomocą właściwości tła CSS-position :
.button{display:block;width:200px;height:83px;background:url('button-states.jpg');}.button:hover{background-position:-200px;}.button:active{background-position:-400px;}Pomyśl o elemencie jako o oknie, przez które oglądasz obraz. Możesz przesunąć obraz, ale okno pozostaje w tej samej pozycji. Pod warunkiem, że element ma taki sam rozmiar, jak część obrazu, który chcesz wyświetlić, efekt jest płynny: