Header Fixed Transparan, Apabila Di Scroll Akan Berubah Warna
Penerbit: ( Seo Techman )

Header Fixed Transparan, Apabila Di Scroll Akan Berubah Warna


Header Fixed Transparan, Apabila Di Scroll Akan Berubah Warna
Waktu lalu kami telah membahas mengenai cara membuat slidenav header menggunakan Materialize Design.

Sama hal nya pada tutorial kali ini, kita akan membahas lagi mengenai header. Namun sedikit berbeda karena disini kita akan coba membuatnya dengan teknik transparansi dan akan berubah warna apabila di scroll.

Untuk cara membuatnya, bisa disimak dibawah ini:

Membuat Header Transparan, Saat Di Scroll Akan Berubah Warna

Pertama-pertama, kita buat Css nya terlebih dahulu.


@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
@import url(http://weloveiconfonts.com/api/?family=fontawesome);
[class*="fontawesome-"]:before {
  font-family: 'FontAwesome', sans-serif;
}

* {
  box-sizing: border-box;
}
*:before, *:after {
  box-sizing: border-box;
}

body {
  background: #222;
  margin: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  color: #FFF;
}

.container {
  max-width: 60em;
  min-width: 45em;
  margin: 0 auto;
  padding: 0 2em;
}

nav {
  position: fixed;
  width: 100%;
  margin: 0 auto;
  top: 0;
  z-index: 3;
}
nav ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
  float: right;
}
nav li {
  display: inline-block;
  padding: 2em;
  text-align: center;
  transition: all .2s;
}
nav li:last-child {
  padding-right: 0;
}
nav a {
  color: #FFF;
  text-decoration: none;
  transition: all .3s;
}
nav a:hover {
  color: #DDD;
}

#icon {
  display: inline-block;
  padding-top: .7em;
  font-size: 2em;
  font-weight: 700;
  text-transform: uppercase;
}

#nav-bg {
  background: #ffc107;
  position: fixed;
  height: 5em;
  width: 100%;
  top: 0;
  z-index: 1;
}

header {
  position: relative;
  background-color: #15c;
  padding: 10em 0 8em;
  z-index: 2;
}
header h1 {
  font-size: 4em;
  text-transform: uppercase;
  text-align: center;
}

#about {
  background: #E7E3DA;
  height: 70em;
  padding: 5em 0;
}
#about p {
  line-height: 2em;
  font-size: 1.4em;
  margin: 0;
  color: #222;
}

Simpan Css diatas Kedalam File Css Sobat, dan untuk warna bisa di sesuaikan masing-masing. Tahap selanjutnya yaitu, kita buat Javascript nya.


var header = $('header');
var range = 200;

$(window).on('scroll', function () {
  
  var scrollTop = $(this).scrollTop(),
      height = header.outerHeight(),
      offset = height / 2,
      calc = 1 - (scrollTop - offset + range) / range;

  header.css({ 'opacity': calc });

  if (calc > '1') {
    header.css({ 'opacity': 1 });
  } else if ( calc < '0' ) {
    header.css({ 'opacity': 0 });
  }
  
});

Jika sudah, kita menuju tahap yang terakhir yaitu, Html Perhatikan kode berikut ini:


<nav>
  <div class='container'>
    <div class='fontawesome-cog' id='icon'></div>
    <ul>
      <li>
        <a href='#'>Item 1</a>
      </li>
      <li>
        <a href='#'>Item 2</a>
      </li>
      <li>
        <a href='#'>Item 3</a>
      </li>
      <li>
        <a href='#'>Item 4</a>
      </li>
      <li>
        <a href='#'>Item 5</a>
      </li>
    </ul>
  </div>
</nav>
<header>
  <div class='container'>
    <h1>Opacity on scroll</h1>
  </div>
</header>
<div id='nav-bg'></div>
<section id='about'>
  <div class='container'>
    <p>Header Fixed Transparan Ala Seo Techman.</p>
  </div>
</section>

Jika langkah-langkah diatas sudah sobat selesaikan semua, kini waktunya untuk melihat hasilnya.

Live Demo

Seperti itulah cara membuat header transparan versi Seo Techman.

Load comments

0 Response to "Header Fixed Transparan, Apabila Di Scroll Akan Berubah Warna"

Post a Comment