Layered Website Background Tutorial

sinar-soft.com

Layer dalam bahasa Indonesia diartikan sebagai lapisan. Kita sering mendengar kata ini pada software Adobe Photoshop (PS). Lalu apa itu “Layered Website”?

Layered Website adalah website yang memiliki bagian/ komponen yang berlapis atau ber-layer, misalnya: pada background. Lapisan ini terlihat pada saat kita menggulir (scroll) ke arah bawah ataupun sebaliknya. Contohnya pada website PT. Kereta Api Indonesia (http://www.kereta-api.co.id/).

Saat digulir ke bawah, maka akan terlihat background seperti pada 2 gambar di bawah ini

sinar-soft.comsinar-soft.com

Kedua gambar tsb menjadi background dengan posisi fixed (tetap), maksudnya adalah ketika website tersebut discroll ke bawah atau ke atas, posisinya tetap dan tidak berubah. Gambar kedua menggantikan gambar pertama saat di scroll ke bawah begitu juga sebaliknya, gambar pertama menggantikan gambar kedua saat di scroll ke atas.

Bagaimana cara membuatnya?? Mari kita coba.

1. HTML

<div id="aboutme" class="content">
  <h2><span>Welcome to my website</span></h2>
  <h2><span>My name is Yoseph Hurit Hadjon</span></h2>
  <h2><span>Freelance Programmer from Indonesia</span></h2>
  </div>
<div id="skill" class="content">
  <h2><span>I have good skills in several fields:</span></h2>
  <h2><span>Web design, icons, print,</span></h2>
  <h2><span>illustration and photography</span></h2>
</div>
<div id="portfolio" class="content">
  <h2><span>Please visit:</span></h2>
  <h2><span><a href="http://flight.sinar-soft.com">Flight search engine</a></span></h2>
  <h2><span><a href="http://train.sinar-soft.com">Train search engine</a></span></h2>
</div>
<div id="contact" class="content">
  <h2><span>Get in touch:</span></h2>
  <h2><span>twitter: @yoseph9969</span></h2>
  <h2><span>email: [email protected]</span></h2>
</div>

2. CSS

* {
  margin: 0;
  padding: 0;
}
body {
  font-family: 'Lato', sans-serif;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
#aboutme {
  background-image: url('http://flight.sinar-soft.com/images/awhCbhLqRceCdjcPQUnn_IMG_0249.jpg');
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
}
#skill {
  background-image: url('http://flight.sinar-soft.com/images/wdXqHcTwSTmLuKOGz92L_Landscape.jpg');
  position: relative;
  z-index: 2;
  margin-top: 700px;
}
#portfolio {
  background-image: url('http://flight.sinar-soft.com/images/xIsiRLngSRWN02yA2BbK_submission-photo-7.jpg');
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
#contact {
  background-image: url('http://flight.sinar-soft.com/images/lIZrwvbeRuuzqOoWJUEn_Photoaday.jpg');
  position: relative;
  z-index: 2;
  margin-top: 700px;
}
.content {
  background-origin: border-box;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 300px;
  padding-bottom: 300px;
}
#aboutme h2,
#portfolio h2 {
  text-align: left;
  margin-left: 10%;
}
#skill h2,
#contact h2 {
  text-align: right;
  margin-right: 10%;
}
.content h2 {
  color: #ffffff;
  font-size: 49px;
  font-weight: normal !important;
  position: relative;
  top: 35%;
  margin-bottom: 5px;
}

h2 span {
  background: rgba(0,0,0,.3);
  padding-bottom: 5px;
  margin-bottom: 5px;
}
a {
  color: #ffffff;
  text-decoration: underline;
}
a:hover {
  text-decoration: underline;
}
.hide {
  display: none;
}

3. Javascript

Tambahkan jQuery pada tag <head>

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

javascript:

$(document).ready(function(){
  var top = $('#skill').offset().top;
  var aheight = $(window).height();
  $('#skill, #contact').css({marginTop:aheight+'px'});
  $(window).scroll(function(){
    var y = $(window).scrollTop();
    if(y >= top) {
      $('#aboutme').addClass('hide');
      } else {
      $('#aboutme').removeClass('hide');
    }
  });
});

Source code: http://jsbin.com/hiruva/1

Leave a Reply

Your email address will not be published. Required fields are marked *