48 besökare, 1 medlem och 3 Studenter är online nu
Loopia

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;
}
}