Header Fixed Transparan, Apabila Di Scroll Akan Berubah Warna
Seotechman.com, Bogor 20/11/2019. 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.
Seperti itulah cara membuat header fixed transparan versi Seotechman.
