Cara Membuat Parallax Background Dengan CSS3 dan Bootstrap
Software Engineering Enthusiast | Blogger | Creator of RubyPedia.com
21 Oktober 2017

CSS adalah kependekan dari Cascading Style Sheet. CSS merupakan salah satu kode pemrograman yang bertujuan untuk menghias dan mengatur gaya tampilan/layout halaman web supaya lebih elegan dan menarik.

Pada tutorial kali ini kita bersama-sama akan belajar bagaimana cara membuat parallax background dengan css, langsung saja apa saja yang akan kita perlukan ? yuk kita mulai.

Buatlah sebuah folder baru di dalam folder htdocs (jika menggunakan xampp) dan beri nama folder tersebut dengan parallax-background, dan buatlah 2 (dua) buah file didalam folder tersebut, yaitu:

  • index.html
  • style.css

Setelah itu, buka file index.html masukkan dan simpan kode berikut ini:

<!DOCTYPE html>
<!--
    @author  : Fika Ridaul Maulayya
    @package : Parallax Background
    @license : https://www.rubypedia.com
--> 
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="">
    <title>Ruby Pedia - Parallax Background CSS</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="style.css">
  </head>
  <body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Ruby Pedia - Parallax</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <form class="navbar-form navbar-right">
            <div class="form-group">
              <input type="text" placeholder="Email" class="form-control">
            </div>
            <div class="form-group">
              <input type="password" placeholder="Password" class="form-control">
            </div>
            <button type="submit" class="btn btn-success">Sign in</button>
          </form>
        </div>
      </div>
    </nav>
    <div class="rubypedia-parallax">
      <div class="container" style="text-align: center;padding-top: 160px">
        <div class="row">
          <img src="https://www.rubypedia.com/resources/images/logo-jumbroton.png" class="img-responsive" style="display: initial;" style="padding-top: 100px"><br><br><br>
          <span class="border" style="background-color: #111;color: #fff;padding: 18px;font-size: 25px;letter-spacing: 10px;">SCROLL KEBAWAH</span>
        </div>
      </div>
    </div>
    <div class="container" style="margin-top: 20px">
      <div class="row">
      <div class="col-md-3">
          <div class="thumbnail">
            <img src="https://semantic-ui.com/images/wireframe/image.png" alt="...">
            <div class="caption">
              <h3>Tutorial Parallax Background CSS</h3>
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo.</p>
              <p><a href="#" class="btn btn-primary" role="button">Selengkapn</a> </p>
            </div>
          </div>
        </div>
              <div class="col-md-3">
          <div class="thumbnail">
            <img src="https://semantic-ui.com/images/wireframe/image.png" alt="...">
            <div class="caption">
              <h3>Tutorial Parallax Background CSS</h3>
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo.</p>
              <p><a href="#" class="btn btn-primary" role="button">Selengkapn</a> </p>
            </div>
          </div>
        </div>
              <div class="col-md-3">
          <div class="thumbnail">
            <img src="https://semantic-ui.com/images/wireframe/image.png" alt="...">
            <div class="caption">
              <h3>Tutorial Parallax Background CSS</h3>
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo.</p>
              <p><a href="#" class="btn btn-primary" role="button">Selengkapn</a> </p>
            </div>
          </div>
        </div>
              <div class="col-md-3">
          <div class="thumbnail">
            <img src="https://semantic-ui.com/images/wireframe/image.png" alt="...">
            <div class="caption">
              <h3>Tutorial Parallax Background CSS</h3>
              <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo.</p>
              <p><a href="#" class="btn btn-primary" role="button">Selengkapn</a> </p>
            </div>
          </div>
        </div>
      </div>
      <hr>
      <footer>
        <p>© 2016 Company, Inc.</p>
      </footer>
    </div> 
  </body>
</html>

Selanjutnya, buka file style.css masukkan dan simpan kode berikut ini:

/*
    @author  : Fika Ridaul Maulayya
    @package : Parallax Background CSS
    @license : https://www.rubypedia.com
*/
.rubypedia-parallax { 
    background-image: url("https://i.imgur.com/k1kzqQC.jpg");
    height: 500px; 
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

Cobalah jalankan aplikasinya dengan mengetikan di address bar browser http://localhost/parallax-background, maka kalian akan melihat tampilanya kurang lebih seperti berikut ini:

Blog ini telah dibaca sebanyak 3092 kali
CSS Parallax Bootstrap Parallax Background

Sekilas Tentang Penulis

Fika Ridaul Maulayya
Software Engineering Enthusiast | Blogger | Creator of RubyPedia.com

KOMENTAR

blog comments powered by Disqus