Chodzi o to, aby stworzyć wygląd pokazu slajdów bez karuzeli. Innymi słowy, tworzymy serię obrazów, które są przesuwane od lewej do prawej i powtarzane po osiągnięciu końca obrazów. Sztuczka polega na tym, że używamy pojedynczego obrazu tła z animacjami CSS do (…)
Chodzi o to, aby stworzyć wygląd pokazu slajdów bez karuzeli. Innymi słowy, tworzymy serię obrazów, które są przesuwane od lewej do prawej i powtarzane po osiągnięciu końca obrazów.
Sztuczka polega na tym, że używamy pojedynczego obrazu tła z animacjami CSS, aby przesuwać go po ekranie i powtarzać po zakończeniu. Stwarza to iluzję galerii obrazów, gdy naprawdę używamy jednego obrazu.
Konfigurowanie HTML
Oto plan pokazujący, jak nasz kod HTML musi być zbudowany:
Są dwa elementy, nad którymi pracujemy: jeden, który nazywamy, .containerktóry pasuje do dokładnej szerokości obszaru roboczego, i drugi, który wywołujemy, .sliding-backgroundktóry znajduje się za .containeri przepełnia go. Zasadniczo używamy go .containerjako maski, aby ukryć pełną szerokość .sliding-backgroundprzewijania po ekranie.
Oznacza to, że musimy utworzyć tylko dwa elementy w kodzie HTML:
Pozycjonowanie elementów
Przejdźmy dalej i dodajmy CSS, który będzie poprawnie pozycjonował nasze dwa elementy.
.container ( overflow: hidden; ) .sliding-background ( height: 500px; width: 5076px; )Nasze .containerwykorzystuje overflowwłaściwość, która ukryje niczego, co jest wizualnie zawartej poza nim. Pomyśl o tym jak o plonie na zdjęciu. Na zewnątrz pojemnika mogą znajdować się dodatkowe rzeczy, ale pojemnik uniemożliwia nam ich zobaczenie.
W tym miejscu .sliding-backgrounddo gry wkracza nasz . Jest ustawiony na absurdalną szerokość, która przepełniłaby większość rzutni. I na tym polega sztuczka: powinno to być coś, co przepełni pojemnik. W tym przypadku używamy nieco arbitralnie wybranej 5076pxszerokości, która powinna przekraczać większość rzutni przeglądarki.
Tworzenie obrazu tła
Potrzebujemy obrazu, jeśli tworzymy iluzję galerii pokazu slajdów, prawda? To nasza kolejna sprawa.
Pamiętasz, jak wspomnieliśmy, że nieco arbitralnie wybrana 5076pxszerokość przesuwanego tła? Cóż, jest to arbitralne, ale celowe w tym sensie, że można je ładnie podzielić przez 3, co pasuje do synchronizacji minutowej pętli, która pojawi się nieco później. Oznacza to, że płótno dla naszego obrazu tła to 5076 / 3lub 1692px. W końcu nasze tło powtórzy się w sumie trzy razy w ciągu jednej minuty w nieskończonej pętli. Matematyka na zwycięstwo!
500pxWysokość jest naprawdę dowolna. Może to być cokolwiek chcesz i pod warunkiem, że jest to również rzeczywisty rozmiar pliku obrazu tła.
Plik programu Photoshop użyty do utworzenia obrazu tła dla wersji demonstracyjnej na początku tego rozdziału jest dostępny do pobrania, jeśli szukasz punktu wyjścia.
Gdy obraz zostanie zapisany (i zoptymalizowany!), Użyjemy tego jako obrazu tła w CSS:
.sliding-background ( background: url("… path/to/image") repeat-x; height: 500px; width: 5076px; /* The image width times 3 */ )Świetny! To daje nam gigantyczny obraz, który przepełnia kontener i może być teraz używany do przewijania ekranu w nieskończoność.
Animowanie tła
W porządku, wprawmy to w ruch. Chcemy, aby przesuwał się od lewej do prawej w pętli, która jest powtarzana w kółko, aby stworzyć płynny efekt, że obraz będzie trwał wiecznie.
Najpierw zdefiniujmy animację CSS:
@keyframes .slide ( 0%( transform: translate3d(0, 0, 0); ) 100%( transform: translate3d(-1692px, 0, 0); /* The image width */ ) )Używamy tej transformwłaściwości, aby ustawić lewy obraz przy lewej krawędzi kontenera, gdy rozpocznie się animacja, na przykład:
Zanim animacja się zakończy, zmieni pozycję negatywnie (od lewej do prawej) o wartość odpowiadającą dokładnej szerokości naszego obrazu. A ponieważ .sliding-backgroundszerokość jest trzykrotnie większa od rzeczywistego obrazu, obraz powtarza się trzykrotnie w zakresie od 0% do 100% przed ponownym zapętleniem.
Uwaga: powód, dla którego używamy dodatkowego
background-positionna stronie głównej transformdo wykonania ruchu, który jest dużo bardziej performatywny.
OK, zakończmy sprawę, wywołując naszą slideanimację w .sliding-backgroundklasie:
.sliding-background ( background: url("… path/to/image") repeat-x; height: 560px; width: 5076px; animation: slide 60s linear infinite; )animationNieruchomość nakazuje .sliding-backgroundużywać slideanimacji i uruchomić go na jedną minutę w czasie w sposób liniowy, nieskończonej pętli.
Kładąc wszystko razem
.container ( overflow: hidden; ) .sliding-background ( background: url("… path/to/image") repeat-x; height: 560px; width: 5076px; animation: slide 60s linear infinite; ) @keyframes slide( 0%( transform: translate3d(0, 0, 0); ) 100%( transform: translate3d(-1692px, 0, 0); ) )