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.
10 Windows 10 tips for å øke produktiviteten
Windows 10 er et raskt og effektivt operativsystem som er utviklet for å forbedre brukerproduktiviteten . Det mest brukte stasjonære operativsystemet tilbyr en rekke funksjoner som hjelper brukerne til å jonglere mellom applikasjoner sømløst og multi-oppgave med minimal innsats.Disse funksjonene er imidlertid ikke åpenbare og dermed ukjente av mange mennesker. Det
(Tekniske og design tips)
Design Vs Art - Forskjellen og hvorfor det gjelder
Design mot kunst. Hva er forskjellen, og hvordan påvirker det karrieren din som designer? Vi vet alle at det er forskjell, og de utenfor vår bransje kan kanskje ikke se det . Foreldrene dine, for eksempel, kan referere til deg som en "artist" selv om du er profesjonell designer.Hvordan forteller du dem, eller noen andre som spør, at det er stor forskjell mellom kunst og design ? E
(Tekniske og design tips)
no.hideout-lastation.com
Helside