Membuat Backgroud Paralax ~ Setiyono's Blog

Assalamualaikum Wr.Wb

Pada postingan kali saya akan berbagi tutorial membuat Backgroud Parallax,yaitu sebuah background yang posisinya akan fixed atau berhenti saat kita scrol halaman web ke bawah.Parallax background di biasanya banyak di gunakan untuk sebuah website one page yaitu website yang hanya memiliki satu halaman saja.Di sini saya membuat 2 file yang satu untuk file style.css dan yang satunya paralax.html,baiklah mari kita mulai.

Style.css

tuliskan scipt di bawah untuk stylenya simpan dengan nama style.css.

.container {
max-width: 960px;
margin: 0 auto;
}
section.section:last-child {
margin-bottom: 0;
}
section.section h2 {
margin-bottom: 40px;
font-family: "Roboto Slab", serif;
font-size: 30px;
}
section.section p {
margin-bottom: 40px;
font-size: 16px;
font-weight: 300;
}
section.section p:last-child {
margin-bottom: 0;
}
section.section.content {
padding: 40px 0;
}
section.section.parallax {
height: 600px;
background-position: 50% 50%;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
section.section.parallax h1 {
color: rgba(255, 255, 255, 0.8);
font-size: 48px;
margin: 0 auto;
line-height: 600px;
font-weight: 700;
text-align: center;
text-transform: uppercase;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
section.section.parallax-1 {
background-image: url("1.jpeg");
}
section.section.parallax-2 {
background-image: url("2.jpeg");
}
section.section.parallax-3 {
background-image: url("3.jpeg");
}

@media all and (min-width: 600px) {
section.section h2 {
    font-size: 42px;
}
section.section p {
    font-size: 20px;
}
section.section.parallax h1 {
    font-size: 96px;
}
}
@media all and (min-width: 960px) {
section.section.parallax h1 {
    font-size: 160px;
}
}

Paralax

Untuk menampilkan paralax saya gunakan html,tuliskan script di bawah lalu simpan dengan paralax.html

<!DOCTYPE html>
<html>
<head>
<title>Tutorial Parallax Scrolling</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body style="margin:0 auto;">
<section class="section parallax parallax-1">
<div class="container">
</div>
</section>

<section class="section content">
<div class="container">
    <h2>lorem1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</section>

<section class="section parallax parallax-2">
<div class="container">
</div>
</section>

<section class="section content">
<div class="container">
    <h2>lorem 2</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</section>

<section class="section parallax parallax-3">
<div class="container">
</div>
</section>

<section class="section content">
<div class="container">
    <h2>lorem 3</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</section>
</body>
</html>