Widodo

Membuat Efek Header Mengecil Saat di Scroll

Header merupakan komponen penting dalam penyusunan template blog ataupun cms. karena dengan memiliki Header blog atau cms yang unik dan menarik akan memberikan kesan tersendiri oleh pengunjung maupun si pemilik blog stau cms itu sendiri

Header Menu terletak pada bagian paling atas desain website Anda. Anda juga dapat membuat sub menu pada bagian tersebut, dimana sub menu tersebut akan muncul sebagai dropdown menu, pada tutorial ini saya akan memberikan contoh pembuatan header pada blog atau web kalian pada umumnya header ini sama seperti yang lainya yang membedakan header menu ini ada efek on scroll disaat di scroll kebawah maka otomatis ukuran header akan mengecil sendiri mis : header dengan height : 200px dan saya scroll kebawah maka header itu akan mengecil menjasi 100px , lantas bagaimana membuatnya sekarang kita simak bersama.

body {padding:0px; margin:0px;}
.container {width:100%; margin:auto;padding:0px;background:#FFCC33}
.header {width: 100%;height: 150px;overflow: hidden;
position: fixed;
top: 0;
left: 0;
z-index: 999;
background-color: #16A086;
-webkit-transition: height 0.3s;
-moz-transition: height 0.3s;
-ms-transition: height 0.3s;
-o-transition: height 0.3s;
transition: height 0.3s; }
.header-content {width:400px; margin:auto;}
.header-content ul {list-style:none;}
.header-content li a { text-decoration:none;line-height: 120px;float:left;font-family:Arial, Helvetica, sans-serif;
font-size:20px; color:#ffffff; margin:5px;}
.header-content li a:hover {color:#1CBB9B;}
.header.smaller .header-content li a {
line-height:30px; }
.header.smaller {
height: 75px; }
.header.smaller h3 {
width: 150px;
height: 75px;
line-height: 75px;
font-size: 30px; }

2. Sekarang sisipkan script javascript ini diatas kode </head>

Download file classie.js di sini Download

function init() {
window.addEventListener('scroll', function(e){
var distanceY = window.pageYOffset || document.documentElement.scrollTop,
shrinkOn = 300,
header = document.querySelector(".header");
if (distanceY > shrinkOn) {
classie.add(header,"smaller");
} else {
if (classie.has(header,"smaller")) {
classie.remove(header,"smaller");
}
}
});
}
window.onload = init();

3. Sekarang kita tinggal memanggil kode cssnya dengan html

<div class="container">
<div class="header">
<div class="header-content">
<ul>
<li><a href="#">BERANDA</a></li>
<li><a href="#">MENU 1</a></li>
<li><a href="#">MENU 2</a></li>
<li><a href="#">MENU 3</a></li>
</ul>
</div>
</div>
<div style="height:400px; background:#9A59B5; margin-top:0px;">

</div>

<div style="height:400px; background:#34495E; margin-top:200px;">

</div>
</div>

4. Selesai

Jika Belum Berhasil Jangan meyerah gan..



0 Komentar