Mecha versi 2.6.3 sudah dirilis!

Mini WayPoints

Tabel Konten
  1. HTML 
  2. CSS 
  3. jQuery 
Mini WayPoints

Kode ini dibuat berdasarkan efek plugin jQuery WayPoints, meskipun Saya tidak tahu apakah plugin WayPoints berisi seperti ini atau tidak. Di sini Saya cuma mengambil ciri khasnya yang menarik: Setiap item navigasi terkait akan berubah warna saat seksi yang menjadi tujuannya mencapai tempat yang tepat.

Markupnya cuma terdiri dari sebuah elemen <nav> dan beberapa elemen <section> dengan ID yang ditentukan berdasarkan hash pada masing-masing tautan:

HTML 

<nav>
    <li><a href='#home'>Home</a></li>
    <li><a href='#about'>About</a></li>
    <li><a href='#portfolio'>Portfolio</a></li>
    <li><a href='#contact'>Contact</a></li>
</nav>
<section id='home'> ... </section>
<section id='about'> ... </section>
<section id='portfolio'> ... </section>
<section id='contact'> ... </section>

CSS 

nav {
  position:fixed !important;
  position:absolute;
  top:0;
  right:0;
  left:0;
  z-index:77;
}

nav ul {
  margin:0 0;
  padding:0 0;
  background-color:black;
  height:30px;
  overflow:hidden;
}

nav li {
  list-style:none;
  margin:0 0;
  padding:0 0;
  float:left;
  display:inline;
}

nav a {
  font:bold 11px/30px Arial,Sans-Serif;
  color:white;
  display:block;
  padding:0 15px;
  text-decoration:none;
}

nav a:hover {color:#ccc;}
nav a.active {background-color:darkblue;}

section {
  padding:30px;
  border-top:2px solid darkred;
  height:1000px;
}

#home {margin-top:30px;background-color:green;}
#about {background-color:skyblue;}
#portfolio {background-color:gray;}
#contact {background-color:orange;}

jQuery 

$(function() {
    var navHeight = $('nav').outerHeight();
    $('nav a').on("click", function() {
        var hash = this.hash,
            target = $(hash).offset().top - navHeight;
        // Smooth scrolling...
        $('html,body').stop().animate({
            scrollTop: target
        }, 1500, function() {
            window.location.hash = hash;
            $(window).scrollTop($(hash).offset().top - navHeight);
        });
        return false;
    });
    $(window).on("scroll resize", function() {
        $('nav a').each(function() {
            var section = this.hash,
                sectionTop = $(section).offset().top,
                windowTop = $(window).scrollTop() + navHeight,
                sectionEnd = sectionTop + $(section).outerHeight() - navHeight;
            // Add or remove active class based on the section relating to the navigation
            if ((windowTop >= sectionTop) && (windowTop <= sectionEnd)) {
                $(this).closest('nav').find('.active').removeClass('active');
                $(this).addClass('active');
            } else {
                $(this).removeClass('active');
            }
        });
    }).trigger("scroll");

 // Scroll to section ID based on window.location.hash
    // The 'navHeight' was only used to add the jump spacing.
    if (window.location.hash) {
        var hash = window.location.hash;
        $(window).scrollTop($(hash).offset().top - navHeight);
    }

});

Lihat Demo

9 Komentar

Fahmi Athailla

Wah hampir sama kaya postingan yang mas taufic post dulu, cuma kan kalau yang dulu ngeSlidenya bisa kemana aja, wah keren nih...di coba dulu dehh :D

Taufik Nurrohman

Sebenarnya fokusnya bukan pada efek animasinya tapi pada efek perpindahan warna menu navigasinya. Keunikannya di situ. Kalau halaman demo di atas digulung secara manual, maka warna menu akan berpindah-pindah sesuai dengan posisi seksi yang terkait dengan menu tersebut. Di sini Saya menggunakan perbandingan jarak gulungan layar dengan posisi atas panel dan posisi bawah panel:

$(window).on("scroll resize", function() {
$('nav a').each(function() {
var section = this.hash,
sectionTop = $(section).offset().top,
windowTop = $(window).scrollTop() + navHeight,
sectionEnd = sectionTop + $(section).outerHeight() - navHeight;
// Add or remove active class based on the section relating to the navigation
if ((windowTop >= sectionTop) && (windowTop <= sectionEnd)) {
$(this).closest('nav').find('.active').removeClass('active');
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
});

Unknown

Coba utak atik dlu akh.... (y) :-bd

Unknown

asik.. bisa berubah warna.. hampir sama dengan tutorial sebelumnya ya om.. tentang perpindahan halaman website..

Unknown

kok di saya,
backgroundnya tdk fullscreen ?

Taufik Nurrohman

Soalnya terbawa sama margin & padding elemen-elemen pembungkusnya. Supaya jadi full screen, semua kerenggangan harus dinetralkan, misalnya seperti ini:

html,
body,
#outer-wrapper,
#content-wrapper,
#main-wrapper,
#main,
.post-outer,
.post,
.post-body {
margin:0 0 !important;
padding:0 0 !important;
width:auto !important;
}

Tapi ini tidak mutlak, tergantung ID dan kelas masing-masing elemen.

Komentar telah ditutup.