Ideja ir radīt slaidrādes izskatu bez karuseļa. Citiem vārdiem sakot, mēs izveidojam attēlu sēriju, kas ir slaids no kreisās uz labo un atkārtojas, kad ir sasniegts attēlu gals. Triks ir tāds, ka mēs izmantojam vienu fona attēlu ar CSS animācijām, lai (…)
Ideja ir radīt slaidrādes izskatu bez karuseļa. Citiem vārdiem sakot, mēs izveidojam attēlu sēriju, kas ir slaids no kreisās uz labo un atkārtojas, kad ir sasniegts attēlu gals.
Triks ir tāds, ka mēs izmantojam vienu fona attēlu ar CSS animācijām, lai to pārvietotu pa ekrānu un atkārtotu, kad tas ir izdarīts. Tas rada ilūziju par attēlu galeriju, kad mēs patiešām izmantojam vienu attēlu.
HTML iestatīšana
Lūk, kāda ir mūsu HTML struktūras struktūra:
Ir divi elementi, ar kuriem mēs strādājam: tas, kuru mēs saucam, .containerkas atbilst precīzam skata loga platumam, un vēl viens, kuru mēs saucam, .sliding-backgroundkas atrodas aiz .containerun pārpilda to. Būtībā mēs izmantojam .containerkā masku, lai paslēptu visu .sliding-backgroundekrāna platumu, ritinot to pa ekrānu.
Tas nozīmē, ka HTML marķējumā mums ir jāizveido tikai divi elementi:
Elementu novietošana
Ejam uz priekšu un pievienojam dažus CSS, kas pareizi novietos mūsu abus elementus.
.container ( overflow: hidden; ) .sliding-background ( height: 500px; width: 5076px; )Mēs .containerizmantojam overflowīpašumu, kas slēpj visu, kas vizuāli atrodas ārpus tā. Padomājiet par to kā uz fotoattēla kultūru. Ārpus konteinera var būt papildu lietas, taču konteiners neļauj mums to redzēt.
Tur mēs .sliding-backgroundspēlējamies. Tas ir iestatīts uz kādu smieklīgu platumu, kas pārpildītu lielāko skatu daļu. Un tas ir triks: tam vajadzētu būt kaut kam, kas pārpildītu konteineru. Šajā gadījumā mēs izmantojam nedaudz patvaļīgi izvēlētu 5076pxplatumu, kuram vajadzētu pārpildīt lielāko daļu pārlūkprogrammas skatu portu.
Fona attēla izveide
Mums ir nepieciešams attēls, ja mēs veidojam slaidrādes galerijas ilūziju, vai ne? Tas ir mūsu nākamais darba kārtība.
Atcerieties, kā mēs pieminējām, ka 5076pxbīdāmā fona nedaudz patvaļīgi izvēlētais platums? Nu, tas ir patvaļīgi, bet ar nodomu tādā ziņā, ka tas ir labi dalāms ar 3, kas iekļaujas minūtes garās cilpas grafikā, kas nāks klajā nedaudz vēlāk. Tas nozīmē, ka mūsu fona attēla audekls ir 5076 / 3vai 1692px. Galu galā mūsu fons atkārtosies trīs reizes vienā minūtē bezgalīgā ciklā. Matemātika uzvarai!
500pxAugstums ir patiesi patvaļīgs. Tas var būt neatkarīgi no tā, ko vēlaties, ja vien tas ir arī fona attēla faila faktiskais lielums.
Photoshop fails, kas tika izmantots, lai izveidotu demonstrācijas fona attēlu šīs nodaļas sākumā, ir pieejams lejupielādei, ja meklējat sākuma punktu.
Kad attēls ir saglabāts (un optimizēts!), To mēs izmantosim kā fona attēlu CSS:
.sliding-background ( background: url("… path/to/image") repeat-x; height: 500px; width: 5076px; /* The image width times 3 */ )Lieliski! Tas dod mums milzīgu attēlu, kas pārpilda konteineru, un tagad to var izmantot, lai ritinātu pa ekrānu bezgalīgi.
Animācijas fons
Labi, liksim šai lietai kustēties. Mēs vēlamies, lai tas iet no kreisās uz labo cilpu, kas atkārtojas atkal un atkal, lai radītu vienmērīgu efektu, ka attēls turpinās uz visiem laikiem.
Vispirms definēsim CSS animāciju:
@keyframes .slide ( 0%( transform: translate3d(0, 0, 0); ) 100%( transform: translate3d(-1692px, 0, 0); /* The image width */ ) )Mēs izmantojam transformrekvizītu kreisā attēla novietošanai konteinera kreisajā malā, kad sākas animācija, piemēram:
Līdz animācijas pabeigšanai tā būs negatīvi pārveidojusi pozīciju (no kreisās uz labo) par summu, kas atbilst precīzam mūsu attēla platumam. Tā kā tas .sliding-backgroundir trīs reizes lielāks par faktiskā attēla platumu, attēls tiek atkārtots trīs reizes no 0% līdz 100%, pirms tiek atkārtoti izveidots cikls.
Piezīme: iemesls, kāpēc mēs izmantojam papildu
background-positiongalvenajā transformlai veiktu kustību, kas ir daudz veiktspējīgāka.
Labi, saīsināsim lietas, izsaucot mūsu slideanimāciju .sliding-backgroundklasē:
.sliding-background ( background: url("… path/to/image") repeat-x; height: 560px; width: 5076px; animation: slide 60s linear infinite; )animationĪpašums uzdod .sliding-backgroundizmantot slideanimāciju, un palaist to vienu minūti vienlaicīgi ar lineāro, bezgalīgu cilpu.
Saliekot to visu kopā
.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); ) )