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

  • Surga Kenari

    oh ini ternyata code nya..

  • 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

  • Beben Koben

    keren sekaliii ^_^

  • Unknown

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

  • Bayu Handono

    buat blogazine cocok kayaknya :D

  • 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.