Hoe OM - Parallax Scrolling
Leer hoe om 'n "parallax" blaai-effek met CSS te skep.
Parallax
Parallax-blaai is 'n webwerf-tendens waar die agtergrondinhoud (dws 'n prent) teen 'n ander spoed as die voorgrondinhoud geskuif word terwyl jy blaai. Klik op die skakels hieronder om die verskil te sien tussen 'n webwerf met en sonder parallaksblaai.
Let wel: Parallax-blaai werk nie altyd op mobiele toestelle/slimfone nie. Jy kan egter medianavrae gebruik om die effek op mobiele toestelle af te skakel (sien laaste voorbeeld op hierdie bladsy).
Hoe om 'n parallax-rol-effek te skep
Gebruik 'n houerelement en voeg 'n agtergrondprent by die houer met 'n spesifieke hoogte. Gebruik dan die background-attachment: fixed
om die werklike parallakseffek te skep. Die ander agtergrondeienskappe word gebruik om die beeld perfek te sentreer en skaal:
Voorbeeld met pixels
<style>
.parallax {
/* The image used */
background-image: url("img_parallax.jpg");
/* Set
a specific height */
min-height: 500px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position:
center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
<!-- Container element
-->
<div class="parallax"></div>
Die voorbeeld hierbo het pixels gebruik om die hoogte van die prent te stel. As jy persent, byvoorbeeld 100%, wil gebruik om die beeld op die hele skerm te laat pas, stel die hoogte van die parallakshouer op 100%. Let wel: Jy moet ook aansoek doen height: 100%
vir beide <html> en <body>:
Voorbeeld met persentasie
body, html {
height: 100%;
}
.parallax {
/* The image used */
background-image: url("img_parallax.jpg");
/* Full height */
height: 100%;
/* Create the parallax
scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat:
no-repeat;
background-size: cover;
}
Sommige mobiele toestelle het 'n probleem met background-attachment: fixed
. U kan egter medianavrae gebruik om die parallakseffek vir mobiele toestelle af te skakel:
Voorbeeld
/* Turn off parallax scrolling for all tablets and phones. Increase/decrease the pixels if
needed */
@media only screen and (max-device-width: 1366px) {
.parallax {
background-attachment: scroll;
}
}