Het idee hier is om het uiterlijk van een diavoorstelling te creëren zonder de carrousel. Met andere woorden, we maken een reeks afbeeldingen van links naar rechts en herhalen deze zodra het einde van de afbeeldingen is bereikt. De truc is dat we een enkele achtergrondafbeelding met CSS-animaties gebruiken om (...)
Het idee hier is om het uiterlijk van een diavoorstelling te creëren zonder de carrousel. Met andere woorden, we maken een reeks afbeeldingen van links naar rechts en herhalen deze zodra het einde van de afbeeldingen is bereikt.
De truc is dat we een enkele achtergrondafbeelding met CSS-animaties gebruiken om deze over het scherm te verplaatsen en te herhalen wanneer het klaar is. Dit creëert de illusie van een afbeeldingengalerij wanneer we echt één afbeelding gebruiken.
HTML instellen
Hier is een blauwdruk voor hoe onze HTML moet worden gestructureerd:
Er zijn twee elementen waarmee we werken: het element dat we aanroepen en .containerdat precies past in de breedte van de viewport en een ander element dat we .sliding-backgroundachter de viewport plaatsen en eroverheen lopen .container. In wezen gebruiken we de .containerals een masker om de volledige breedte van de te verbergen .sliding-backgroundterwijl deze over het scherm scrolt.
Dat betekent dat we slechts twee elementen in de HTML-opmaak hoeven te maken:
Positionering van de elementen
Laten we doorgaan en wat CSS toevoegen die onze twee elementen correct positioneert.
.container ( overflow: hidden; ) .sliding-background ( height: 500px; width: 5076px; )Onze .containergebruiken de overfloweigenschap die alles wat er visueel buiten staat, zal verbergen. Zie het als een uitsnede op een foto. Er kunnen extra dingen buiten de container zijn, maar de container zorgt ervoor dat we het niet kunnen zien.
Dat is waar onze .sliding-backgroundin het spel komt. Het is ingesteld op een belachelijke breedte die de meeste viewports zou overstromen. En dat is de truc: het zou iets moeten zijn dat de container zou overlopen. In dit geval gebruiken we een enigszins willekeurig gekozen 5076pxbreedte die de meeste browserviewports zou moeten overstromen.
De achtergrondafbeelding maken
We hebben een afbeelding nodig als we de illusie van een diavoorstellingsgalerij creëren, toch? Dat is onze volgende opdracht.
Weet je nog hoe we dat de ietwat willekeurig gekozen 5076pxbreedte voor de schuivende achtergrond noemden ? Nou, het is willekeurig, maar opzettelijk in de zin dat het mooi deelbaar is door 3, wat past in de timing voor een minuutlange lus, die iets later zal verschijnen. Dat betekent dat het canvas voor onze achtergrondafbeelding 5076 / 3of is 1692px. Uiteindelijk zal onze achtergrond zich in totaal drie keer in één minuut herhalen in een oneindige lus. Wiskunde voor de overwinning!
De 500pxhoogte is werkelijk willekeurig. Dat kan zijn wat u maar wilt en zolang het maar ook de werkelijke grootte is van het achtergrondafbeeldingsbestand.
Het Photoshop-bestand dat aan het begin van dit hoofdstuk is gebruikt om de achtergrondafbeelding voor de demo te maken, kan worden gedownload als u op zoek bent naar een startpunt.
Zodra de afbeelding is opgeslagen (en geoptimaliseerd!), Is dit wat we zullen gebruiken als achtergrondafbeelding in de CSS:
.sliding-background ( background: url("… path/to/image") repeat-x; height: 500px; width: 5076px; /* The image width times 3 */ )Super goed! Dat geeft ons het gigantische beeld dat over de container loopt en nu kan worden gebruikt om oneindig over het scherm te scrollen.
Animeren van de achtergrond
Oké, laten we dit ding laten bewegen. We willen dat het van links naar rechts gaat in een lus die zich keer op keer herhaalt om een naadloos effect te creëren dat het beeld voor altijd doorgaat.
Laten we eerst de CSS-animatie definiëren:
@keyframes .slide ( 0%( transform: translate3d(0, 0, 0); ) 100%( transform: translate3d(-1692px, 0, 0); /* The image width */ ) )We gebruiken de transformeigenschap om de linkerafbeelding aan de linkerrand van de container te plaatsen wanneer de animatie begint, zoals:
Tegen de tijd dat de animatie is voltooid, heeft deze de positie negatief (van links naar rechts) getransformeerd met een hoeveelheid die overeenkomt met de exacte breedte van onze afbeelding. En aangezien het .sliding-backgrounddriemaal de breedte van het werkelijke beeld is, wordt het beeld driemaal herhaald tussen 0% en 100% voordat het opnieuw wordt herhaald.
Opmerking: de reden waarom we een extra
background-positionop de hoofdpagina transformbeweging kunnen gebruiken , die veel performanter is.
Oké, laten we de zaken afronden door onze slideanimatie voor de .sliding-backgroundklas aan te roepen :
.sliding-background ( background: url("… path/to/image") repeat-x; height: 560px; width: 5076px; animation: slide 60s linear infinite; )De animationeigenschap instrueert de .sliding-backgroundom de slideanimatie te gebruiken en deze één minuut per keer in een lineaire, oneindige lus uit te voeren.
Alles samenvoegen
.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); ) )