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.
Frisk ressurs for webutviklere - januar 2018
Det nye året 2018 er her. Hvis vi ser på fremdriften i webutvikling for fem år siden, er det helt annerledes enn det vi har i dag. I dag er det nye metoder, verktøy og til og med et helt nytt paradigme som forandrer måten vi bygger nettsteder i dag på - og VirtualDOM er en av dem.DOM (Document Object Model) er en tremodell som definerer hvordan et nettsted er strukturert . Velg
(Tekniske og design tips)
6 plakater som vil endre måten du ser på mennesker
Ord er interessante ting. Hvis du hører bestemte ord ofte nok, vil du faktisk begynne å tro på dem, uansett om de er sanne eller falske. Katarzyna Babis, en illustratør, forstår dette. Hennes svar er 6 smart konstruerte plakater med sikte på å øke bevisstheten om stereotypene som folk står overfor.Probleme
(Tekniske og design tips)
no.hideout-lastation.com
Helside