CSS (Cascading Style Sheets)
Parallax scrolling
Parallax scrolling är en teknik som i datorgrafik, i tex spel, använts för att skapa en illusion av djup i en tvådimensionell bild. Genom att låta bakgrundsbilder röra sig i annan hastighet än förgrunden skapas en illusion av djup.
Det här exemplet är förenklat och använder inte jQuery eller Javascript. Bakgrundsbilderna rör sig inte som i en "äkta" parallax men det ger en liknande effekt då innehållet scrollas men bakgrundbilderna är fixerade.
Exempel 1
Klicka
här för att se exemplet (Välj att visa sidkällan/källkoden för att se all HTML- och CSS-kod)
CSS-koden:
För att allt innehåll ska sträcka sig över hela bildskärmsytan används HEIGHT: 100vh; i elementet HTML (som är överordnat elementen BODY). Enheten VH betyder Viewport Height och anges i procent av bildskärmens yta.
Alla bakgrundsbilder använder background-attachment: fixed; för att inte scollas med övrigt innehåll.
Vissa mobila enheter kan ha problem med att visa background-attachment: fixed; och då kan du ange att bilderna ska scrollas i @media only screen and (max-device-width: 1024px).
body, html {
height: 100vh;
margin: 0;
font-family: 'Montserrat', sans-serif;
color: rgba(0,0,0,0.90);
font-size: 16px;
}
.bakgrundsbild1, .bakgrundsbild2, .bakgrundsbild3 {
position: relative;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.
bakgrundsbild1 {
background-image: url("bilder/baloonfield.jpg");
min-height: 500px;
opacity: 0.80;
}
.
bakgrundsbild2 {
background-image: url("bilder/model-face.jpg");
min-height: 400px;
opacity: 0.80;
}
.
bakgrundsbild3 {
background-image: url("bilder/relaxing.jpg");
min-height: 400px;
opacity: 0.70;
}
.
headerbox {
width: 100%;
text-align: center;
font-size: 50px;
padding: 10px 0;
background-color: rgba(255,255,255,1);
}
.
infobox {
position: absolute;
left: 0;
top: 30%;
width: 100%;
text-align: center;
font-size: 30px;
color: rgba(0,0,0,1.00);
}
.
textbox1 {
padding: 30px 200px;
text-align: justify;
background-color:rgba(255,255,255,1.00);
border-top: 1px solid rgba(0,0,0,0.20);
border-bottom: 1px solid rgba(0,0,0,0.20);
}
.
textbox2 {
text-align: center;
color: rgba(255,255,255,0.90);
padding: 30px 30px;
text-align: justify;
background-color: rgba(0,0,0,1.00);
}
.
textbox3 {
text-align: center;
color: rgba(255,255,255,0.90);
padding: 30px 30px;
text-align: justify;
background-color: rgba(0,0,0,1.00);
}
/* Stänger av effekten på smartphones och surfplattor */
@media only screen and (max-device-width: 1024px) {
.bakgrundsbild1, .bakgrundsbild2, .bakgrundsbild3 {
background-attachment: scroll;
}
}
HTML-koden:
<body>
<div class="
headerbox">
Parallax scrolling
</div>
<div class="
bakgrundsbild1">
<div class="infobox">
<p>Det här är bild nr 1</p>
<p>Scrolla ner för att se effekten! </p>
</div>
</div><div class="
textbox1">
<h2 style="text-align:center;">Parallax scrolling</h2>
<p>Parallax scrolling är en teknik...</p>
</div>
<div class="
bakgrundsbild2">
<div class="infobox">
<p>Det här är bild nr 2 </p>
</div>
</div>
<div class="
textbox2">
<h2 style="text-align: center;">Lorem ipsum </h2>
<p>Lorem ipsum...</p>
</div>
<div class="
bakgrundsbild3">
<div class="infobox">
<p>Det här är bild nr 3</p>
</div>
</div>
<div class="
textbox3">
<h2 style="text-align: center;">Lorem ipsum </h2>
<p>Lorem ipsum... </p>
</div>
<div class="
bakgrundsbild1">
<div class="infobox">
<p>Det här är bild nr 1 som visas en gång till</p>
</div>
</div>
</body>
Exempel 2
Klicka
här för att se exemplet (Välj att visa sidkällan/källkoden för att se all HTML- och CSS-kod)
CSS-koden:
body, html {
height: 100vh;
margin: 0;
font-family: 'Montserrat', sans-serif;
color: rgba(0,0,0,0.90);
font-size: 16px;
}
.bakgrundsbild1, .bakgrundsbild2, .bakgrundsbild3 {
position: relative;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bakgrundsbild1 {
background-image: url("bilder/desert.jpg");
min-height: 500px;
opacity: 0.80;
}
.bakgrundsbild2 {
background-image: url("bilder/maldives.jpg");
min-height: 400px;
opacity: 0.80;
}
.bakgrundsbild3 {
background-image: url("bilder/sea-shells.jpg");
min-height: 400px;
opacity: 0.70;
}
.headerbox {
width: 100%;
text-align: center;
font-size: 50px;
padding: 10px 0;
background-color: rgba(255,255,255,1);
}
.infobox {
position: absolute;
left: 0;
top: 30%;
width: 100%;
text-align: center;
font-size: 30px;
color: rgba(0,0,0,1.00);
}
.textbox1 {
padding: 30px 200px;
text-align: justify;
background-color:rgba(255,255,255,1.00);
}
.textbox2 {
text-align: center;
color: rgba(255,255,255,0.90);
padding: 30px 30px;
text-align: justify;
background-color: rgba(156,117,52,1.00);
}
.textbox3 {
text-align: center;
color: rgba(255,255,255,0.90);
padding: 30px 30px;
text-align: justify;
background-color: rgba(156,117,52,1.00);
}
/* Stänger av effekten på smartphones och surfplattor */
@media only screen and (max-device-width: 1024px) {
.bakgrundsbild1, .bakgrundsbild2, .bakgrundsbild3 {
background-attachment: scroll;
}
}
Exempel 3
Klicka
här för att se exemplet (Välj att visa sidkällan/källkoden för att se all HTML- och CSS-kod)
CSS-koden:
body, html {
height: 100vh;
margin: 0;
font-family: 'Montserrat', sans-serif;
color: rgba(0,0,0,0.90);
font-size: 16px;
}
.bakgrundsbild1, .bakgrundsbild2, .bakgrundsbild3 {
position: relative;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bakgrundsbild1 {
background-image: url("bilder/ballerina.jpg");
min-height: 500px;
opacity: 0.80;
}
.bakgrundsbild2 {
background-image: url("bilder/man-woman.jpg");
min-height: 50%;
opacity: 0.80;
}
.bakgrundsbild3 {
background-image: url("bilder/man-woman.jpg");
min-height: 50%;
opacity: 0.70;
}
.headerbox {
width: 100%;
text-align: center;
font-size: 50px;
padding: 10px 0;
background-color: rgba(255,255,255,1);
}
.infobox {
position: absolute;
left: 0;
top: 30%;
width: 100%;
text-align: center;
font-size: 30px;
color: rgba(0,0,0,1.00);
}
.textbox1 {
padding: 30px 200px;
text-align: justify;
background-color:rgba(255,255,255,1.00);
}
.textbox2 {
text-align: center;
padding: 30px 30px;
text-align: justify;
background-color:rgba(255,255,255,1.00);
}
.textbox3 {
text-align: center;
padding: 30px 30px;
text-align: justify;
background-color:rgba(255,255,255,1.00);
}
/* Stänger av effekten på smartphones och surfplattor */
@media only screen and (max-device-width: 1024px) {
.bakgrundsbild1, .bakgrundsbild2, .bakgrundsbild3 {
background-attachment: scroll;
}
}
Exempel 4
Klicka
här för att se exemplet (Välj att visa sidkällan/källkoden för att se all HTML- och CSS-kod)
CSS-koden:
body, html {
height: 100vh;
margin: 0;
font-family: 'Montserrat', sans-serif;
color: rgba(0,0,0,0.90);
font-size: 16px;
}
.bakgrundsbild1, .bakgrundsbild2, .bakgrundsbild3 {
position: relative;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.bakgrundsbild1 {
background-image: url("bilder/hong-kong.jpg");
min-height: 500px;
opacity: 0.80;
}
.bakgrundsbild2 {
background-image: url("bilder/mechanic.jpg");
min-height: 50%;
opacity: 0.80;
}
.bakgrundsbild3 {
background-image: url("bilder/ferrari.jpg");
min-height: 50%;
opacity: 0.70;
}
.headerbox {
width: 100%;
text-align: center;
font-size: 50px;
padding: 10px 0;
background-color: rgba(0,0,0,1.00);
color: rgba(255,255,255,0.8);
}
.infobox {
position: absolute;
left: 0;
top: 30%;
width: 100%;
text-align: center;
font-size: 30px;
color: rgba(0,0,0,1.00);
}
.textbox1 {
padding: 30px 200px;
text-align: justify;
background-color:rgba(70,126,203,1.00);
}
.textbox2 {
text-align: center;
padding: 30px 30px;
text-align: justify;
background-color:rgba(70,126,203,1.00);
}
.textbox3 {
text-align: center;
padding: 30px 30px;
text-align: justify;
background-color:rgba(70,126,203,1.00);
}
/* Stänger av effekten på smartphones och surfplattor */
@media only screen and (max-device-width: 1024px) {
.bakgrundsbild1, .bakgrundsbild2, .bakgrundsbild3 {
background-attachment: scroll;
}
}
Logga in
skriv ut »