fungerer også.
I min demo er det et flaggermusbilde som vises inne i bunnteksten for en ikke så spøkende effekt, men du kan velge hvilket som helst annet bilde du liker.
Fortsett å bla til du ser bunnteksten Lorem ipsum dolor sit amet ...
2. Skjul fotfoten Bruk z-index:-1 regelen til bunnteksten for å plassere den bak alle andre elementer på siden.
Farge begge dekke bunnteksten .
kropp, html {bakgrunnsfarge: #fff; } bunntekst {bredde: 100%; høyde: 200px; posisjon: fast; bunn: 0; bakgrunnsfarge: # DD5632; z-indeks: -1; } 3. Juster bunnmarginen Angi margin-bottom av som er høyde for bunnteksten (i mitt eksempel 200px).
På denne måten vil det være nok plass på bunnen for at bunnteksten skal være synlig når brukeren ruller nedover siden.
kropp {høyde: 1000px; margin: 0; margin-bunn: 200px; } Det er det. Foten avslører effekten for en hel nettside er ferdig. Ta en titt på Codepen-demoen nedenfor.
Individuelle sideelementer Denne teknikken kan brukes til et enkelt HTML-element (med en bunntekst) som er lang nok til en skikkelig sideskroll-effekt. Metoden er litt hacky, som det for øyeblikket ikke fungerer i Chrome og IE, men det har en anstendig nedgang.
1. Lag en lang artikkel La oss først lage en lang artikkel med en bunntekst. For å fremme semantisk kode valgte jeg og
Artikkel 1 Lorem ipsum dolor sit amet ...
Nedenfor kan du se grunnleggende styling av artikkelen og bunnteksten.
artikkel {bredde: 500px; background-color: # FEF9F3; polstring: 20px 40px; } artikkel> bunntekst {høyde: 100px; bakgrunnsfarge: # FE0178; } kropp {font-family: aormorant garamond; } Min artikkel ser for øyeblikket ut som dette. Selvfølgelig kan du også bruke andre grunnleggende stilregler.
2. Gjør foten klistret
Den forrige bunnteksten ble løst, denne kommer til å være klebrig . Påfør position:sticky regel til bunnteksten, så den beveger seg innenfor grensen til artikkelen, men beholder fortsatt sin posisjon på skjermen mens brukeren ruller opp og ned.
artikkel> bunntekst {høyde: 100px; bakgrunnsfarge: # FE0178; posisjon: -webkit-klebrig; stilling: klebrig bunn: 80px; } bottom:80px regelen løser posisjonen til bunnteksten 80px over bunnen av artikkelen .
Du kan justere verdien til din smak, siden den bestemmer punktet der fotfeltet begynner å vises eller forsvinne mens brukeren ruller ned eller oppover.
Gi samme verdi for bunnlinjen til artikkelen , slik at det er nok plass på bunnen for å avsløre den fulle bunnteksten.
artikkel {bredde: 500px; background-color: # FEF9F3; polstring: 20px 40px; margin-bunn: 80px; } 3. Legg til en delvis gjennomsiktig bakgrunn Nå trenger vi en åpning neste bunnen av artikkelen der vi kan se den klissete bunnteksten som ruller ned og ned.
For å oppnå dette, må du erstatte background-color til artikkelen med et linjært gradientbakgrunnsbilde , som fra toppen av artikkelen til toppen av bunnteksten er farget med bakgrunnsfargen til artikkelen, og den gjenværende delen til bunnen er gjort gjennomsiktig .
artikkel {bredde: 500px; polstring: 20px 40px; bakgrunnsbilde: lineær gradient (til bunn, # FEF9F3 kalk (100% - 120px), gjennomsiktig 0); margin-bunn: 80px; } Beregningen calc(100%-120px) CSS-funksjonen beregner hele høyden av artikkelen minus bunnteksten . I mitt eksempel er det 120px (100px for høyde og pluss 20px for polstring).
4. Sett fotfot tilbake
Til slutt, la oss plassere bunnteksten bak artikkelen ved hjelp av z-index: -1 CSS-regelen.
artikkel> bunntekst {høyde: 100px; bakgrunnsfarge: # FE0178; posisjon: -webkit-klebrig; stilling: klebrig bunn: 80px; z-indeks: -1; } Og det er det, det enkelte sideelementet med på-scroll-avslørende effekten er gjort. Sjekk ut kodepennen nedenfor. Du kan også finne begge brukstilfeller på vår Github-side.
Slik overvåker du nedlastingstelling i Dropbox
Dropbox har gjort det enkelt for oss å dele filer offentlig. Vi kan legge ut en fil der ute for å bli offentlig nedlastet via en offentlig lenke . Brukere kan laste ned eller lagre filer i sin egen Dropbox-konto. Som eieren av den filen får vi imidlertid ikke se hvor mange ganger vår delte fil er lastet ned av massene.Dro
(Tekniske og design tips)
150+ Windows 10 Tastaturgenveier til Rocket Din Produktivitet
Ønsker du å øke produktiviteten din og begynne å gjøre mer på kort tid? Et av triksene oppe på ermene til strømbrukere benytter seg av den omfattende listen over tastatursnarveier som tilbys av Windows 10.Faktum er at bytte til musen, igjen og igjen, for å gjøre små oppgaver forstyrrer arbeidstilstanden din og dermed forringer produktiviteten. Dessuten
(Tekniske og design tips)
no.hideout-lastation.com
Helside