Đăng nhập

Cách tạo hiệu ứng Scroll-Page với JQuery

  • 06/02/2015 - 10:08 Sáng
  • 3909 Views

Hiệu ứng Scroll-page hiện cũng đang là kiểu thiết kế web thông dụng hiện nay, bằng cách sử dụng thanh menu để cuộn trang đến các mục khác nhau. Bài viết này hướng dẫn các bạn tạo một scroll-page đơn giản bằng jQuery.

cach-tao-hieu-ung-scroll-page-voi-jquery

Cách tạo hiệu ứng Scroll-Page với JQuery

Demo | Download

Code HTML

<div class="header">
     <div class="wrap">
         <ul class="navigation">
             <li><a href="#home" class="on">Home</a></li>
             <li><a href="#portfolio">Portfolio</a></li>
             <li><a href="#service">Service</a></li>
             <li><a href="#about">About</a></li>
             <li><a href="#contact">Contact</a></li>
         </ul><!--thanh điều hướng tới các phần nội dung của trang web->
     </div>
</div><!--end header-->
<div class="main">
     <div class="wrap">
          <div class="page" id="home">
          </div><!--end home-->
          <div class="page" id="portfolio">
          </div><!--end portfolio-->
          <div class="page" id="service">
          </div><!--end service-->
          <div class="page" id="about">
          </div><!--end about-->
          <div class="page" id="contact">
          </div><!--end contact-->
      </div>
</div><!--end main-->

Thẻ “ul.navigation” là thanh điều hướng có tác dụng tạo cuộn đến các phần của trang web, tiếp theo ở bên trong thẻ “div.main” lần lượt là từng phần với class page (Nội dung của từng phần trong trang web để trong thẻ này ). Chú ý thẻ a có thuộc tính href bằng giá trị id của “div.page” và thẻ có class.

Code CSS

Code CSS tạo fixed menu cho phần header.

.wrap{
    width:940px;
    margin:auto;
}
.header{
    position:fixed;
    z-index:99;
    top:0;
    left:0;
    height:50px;
    background-color:rgba(255,255,255,0.9);
    width:100%;
    box-shadow:0 0 5px rgba(0,0,0,0.05);
    border-bottom:1px solid #f6f6f6;
}
.navigation{
    float:right;
}
.navigation li{
    display:inline;
}
.navigation a{
    line-height:50px;
    text-transform:uppercase;
    color:#d3d3d3;
    font-weight:bold;
    margin-left:50px;
    -moz-transition:all 0.4s ease;
    -webkit-transition:all 0.4s ease;
    -o-transition:all 0.4s ease;
    -ms-transition:all 0.4s ease;
}
.navigation a:hover,.navigation .on{
    color:#555;
}

Code jQuery

Đầu tiên nhúng link của jquery và jquery easing vào phần head của trang.

<script src="javascript/jquery.js"></script>
<script src="javascript/jqueryEasing.js"></script>

Để scroll đến các phần của trang web ta sử dụng mã jQuery sau:

var t = $('phantrangweb').position().top; //lấy vị trí của phần trang web gán cho biến t
$('html,body').stop().animate({scrollTop: t },600); //cuộn trang đến phần với biến t
return false;

Bây giờ có mã jQuery tạo scroll-page cho trường hợp của bài hướng dẫn này.

$('.navigation a').click(function(e){
    e.preventDefault(); //ngăn chặn tác dụng mặc định của mã html cho thẻ a
    $('.on').removeClass('on');
    el = $(this);
    name = el.attr('href'); //lấy giá trị bên trong thuộc tính href của thẻ a
    pos = $(name).position().top; //lấy vị trí của phần với biến name
    el.addClass('on');
    $('html,body').stop().animate({scrollTop:pos},600,'easeInQuart');
    return false;
});

Bây giờ khi ta click vào thanh điều hướng, giả sử click vào service thì trang sẽ cuộn đến phần serivce và chữ service sẽ được in đậm do được thẻ a này được thêm class on. Tuy nhiên giờ khi ta cuộn chuột bằng tay đến phần serivce mà không click vào thanh điều hướng thì làm thế nào cho chữ service in đậm được. Để làm được điều đó ta thêm đoạn mã jQuery sau.

$(window).scroll(function(){
    t = $(window).scrollTop(); 
    $('.main').find('.page').each(function(){
        el = $(this);
        p = el.position().top;
        if(p <= t){
            id = el.attr('id');
            $('.on').removeClass('on');
            $("[href='#"+id+"']").addClass('on');
        }
    });
});

Đầu tiên ta sử dụng event .scroll() sẽ thi hành hàm bên trong nó khi ta cuộn chuột. Gán biến t bằng giá trị scrolltop. Sau đó sử dụng method .find().each() để lần lượt tìm class page. Rồi lần lượt xét từng thẻ .page, gán biến p bằng giá trị position top của thẻ .page này rồi so sánh với giá trị t. Nếu “p <= t” thì ta sẽ thêm cho thẻ a có giá trị href bằng # cộng với giá trị id của thẻ .page đó ( hơi loằng ngoằng một tí :( ).