[HTML+JS] Một Trang Onepage đơn giản

Yêu cầu đặt ra:

1. Loading Screen mặc định thẩm du tinh thần (nghĩa là loading screen vu vơ, bạn chỉnh đc thời gian nó tồn tại)
2. OnePage, khả năng mở rộng số lượng page con vô hạn.
3. Responsive
4. 3 phương án chuyển page bằng: bấm navigation, xài cuộn chuột và bấm phím lên xuống.
5. Chặn mấy thằng wởn cuộn chuột hay bấm phím liên tục, thời gian này tuỳ biến đc nhé. (Buộc phải chặn nếu bạn muốn web chuyển sang trang mượt mà, chính xác, trên pad của laptop dễ bị cuộn 1 lần sang vài trang)

Khuyến cáo:

1. Dĩ nhiên là mình chỉ care trên PC thôi, hiệu ứng trên smartphone các bạn cần phải viết lại do có nhiều hàm sẽ chạy ko chính xác.
2. Demo nhỏ này chủ yếu giới thiệu cách sử dụng 1 số hàm js cơ bản .
   
3. Code viết chưa đc tối ưu cho dễ nhìn, dễ đọc, chứ tóm gọn lại thì khó nhìn lắm
4. Bạn cần hiểu đc code js và có tư duy lập trình. Mình xin lỗi không thể giúp cho các bạn không biết chút j vào đọc thớt này và hiểu rõ đc

Bước 1: Gắn cái cần thiết vào:

PHP:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Bước 2: Tự vẽ nên 1 khung các thành phần con và sắp xếp chúng


Bước 3: Hiện thực hoá bằng HTML

PHP:

<div id="page-wrap">
        <section id="first">
            <div class="meter">
                <span id="bar" style="width: 100%"></span>
                <span id="num">100</span>
            </div>
        </section>
        <section id="second" style="" class="active"><h1>Slide nội dung 1</h1></section>
        <section id="third" style="" class=""><h1>Slide nội dung 2</h1></section>
        <section id="forth" style="" class=""><h1>Slide nội dung 3</h1></section>
        <section id="fifth" style="" class=""><h1>Slide nội dung 4</h1></section>
        <section id="sixth" style="" class=""><h1>Slide nội dung 5</h1></section>
    </div>
    <ul class="nav">
        <li><a href="javascript:;" title="#second" class="second active">Slide nội dung 1</a></li>
        <li><a href="javascript:;" title="#third"  class="third">Slide nội dung 2</a></li>
        <li><a href="javascript:;" title="#forth"  class="forth">Slide nội dung 3</a></li>
        <li><a href="javascript:;" title="#fifth"  class="fifth">Slide nội dung 4</a></li>
        <li><a href="javascript:;" title="#sixth"  class="sixth">Slide nội dung 5</a></li>
    </ul>

bên trong section "first" mình nhét 1 số đồ chơi nhỏ để làm cái loading thui . Thanh navigator mình chuyển thành ul cho dễ quản lí. Như code bạn thấy có 5 section nội dung từ "second" đến "sixth", vì vậy ta có 5 thẻ <li>.

Bước 4: Making-up CSS cho nó long lanh

Click xem nội dung bên trong: Nội dung CSS

PHP:

* { margin: 0; padding: 0; }
    body { font: 14px Georgia, serif;ftext-align: center; color:#000000;overflow:hidden;}
    #page-wrap { width: 100%; margin: auto; display: block;}
    section { width: 100%; margin: auto; display: block;height : 750px;color:white}
    h1 {padding-top: 20px; text-align: center;}
    #first{
        background-color: blue;
    }
    #second{
        background-color: red;
    }
    #third{
        background-color: green;
    }
    #forth{
        background-color: grey;
    }
    #fifth {
        background-color: brown;
    }
    #sixth {
        background-color: pink;
    }
    .meter {
        height: 20px;
        position: relative;
        margin: auto;
        background: #555;
        -moz-border-radius: 25px;
        -webkit-border-radius: 25px;
        border-radius: 25px;
        padding: 10px;
        -webkit-box-shadow: inset 0 -1px 1px rgba(255,255,255,0.3);
        -moz-box-shadow   : inset 0 -1px 1px rgba(255,255,255,0.3);
        box-shadow        : inset 0 -1px 1px rgba(255,255,255,0.3);
        width: 80%;
    }
    .meter > span {
        display: block;
    }
    .meter > span#bar {
        display: block;
        height: 100%;
        -webkit-border-top-right-radius: 8px;
        -webkit-border-bottom-right-radius: 8px;
        -moz-border-radius-topright: 8px;
        -moz-border-radius-bottomright: 8px;
        border-top-right-radius: 8px;
        border-bottom-right-radius: 8px;
        -webkit-border-top-left-radius: 20px;
        -webkit-border-bottom-left-radius: 20px;
        -moz-border-radius-topleft: 20px;
        -moz-border-radius-bottomleft: 20px;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
        background-color: yellow;position: relative;
        overflow: hidden;
        /*width: 100% !important;*/
    }
    .meter > span#num {
        margin: 24px auto auto;
        text-align: center;
        width: 50%;
    }
    .meter > span#num:before {
        content: "Loading... ";
    }
    .meter > span#num:after {
        content: " %";
    }
    .nav {
        display: none;
        color: #FFF;
        list-style-type: circle;
        position: fixed;
        right: 40px;
        top: 0;
    }
    .nav a {
        color: #B3B3B3;
        opacity: 0.3;
        line-height: 25px;
        text-decoration: none;
        text-transform: none;
    }
    .nav a.active {
        opacity: 1;
        font-weight: bold;
        color: #FFF;
    }

bạn có thể tuỳ biến CSS , nhưng nhớ các điểm sau:

1. <section> (các trang con) luôn luôn display block, float left, width 100%.
2. Thanh nav chạy theo từng trang con, nên position fixed.
3. <body> là cái nền, nên position relative, overflow:hidden.
4. <div id="page-wrap"> là nền bao bên ngoài các trang con nên overflow:hidden, width 100%, margin auto, display block.

Bước 5: Responsive nhẹ.
Để mỗi <section> nó bung ra toàn màn hình và responsive theo kích thước trình duyệt, bạn cần dùng JS.

PHP:

function  _height() {
            var a = $(window).height()+1;
            $("section").height(a);
            $(window).resize(function () {
                var b = $(window).height()+1;
                $("section").height(b);
            });
        }

Hàm dùng để responsive <section>, kỹ thuât:

1. Bạn get chiều cao màn hình trình duyệt bằng $(window).height()
2. Bạn set chiều cao đó vào <section>
3. Khi màn hình trình duyệt resize thì bạn làm lại bước 1 thông wa $(window).resize(function () { });

Tiếp theo, do thanh nav cũng ở sát lề phải nhưng nằm giữa màn hình, nên bạn cũng cần responsive

PHP:

function _heightNav() {
            var $nav = $(".nav");
            var a = $(window).height()+1;
            var b = $nav.height();
            $nav.css("top", (a-b)/2);
            $(window).resize(function () {
                var a = $(window).height()+1;
                var b = $nav.height();
                $nav.css("top", (a-b)/2);
            });
        }

Kỹ thuật:

1. Bạn get chiều cao màn hình trình duyệt bằng $(window).height()
2. Bạn get chiều cao của cả cái menu navigator $nav.height()
3. Bạn tính toán thông số để set css top cho cái menu
4. Khi màn hình trình duyệt resize thì bạn làm lại bước 1 thông wa $(window).resize(function () { });

Bước 6: làm phần loading Screen mở đầu
Ở đây mình chỉ làm 1 dạng đơn giản là thanh loading bar, thêm số % chạy từ 0->100.

Xem lại HTML

PHP:

<section id="first">
            <div class="meter">
                <span id="bar" style="width: 100%"></span>
                <span id="num">100</span>
            </div>
        </section>

JS tương ứng

PHP:

//hàm gọi trang loading, biến a là trang loading, b là tốc độ load, càng cao càng lâu
        function loadingScreen(a, b) {
            var $meter = $(a).find(".meter");
            var $bar = $meter.find("span#bar");
            var $num = $meter.find("span#num");
            var $queue = $({});

            //hàm xử lí thanh progress bar
            function loadDaBars(a) {
                $bar.each(function() {
                    var $el = $(this);
                    var origWidth = $el.width();
                    $el.width(0);
                    $queue.queue(function(next) {
                        $el.animate({width: origWidth}, a, next);
                    });
                });
            }
            //hàm xử lí số %
            function loadNum(a) {
                function count($this){
                    var current = parseInt($this.html(), 10);
                    $this.html(++current);
                    if(current !== $this.data("cNum")){
                        setTimeout(function(){count($this)}, a);
                    }
                }
                $num.each(function() {
                    $(this).data("cNum", parseInt($(this).html(), 10));
                    $(this).html('0');
                    count($(this));
                });
            }
            //hàm tổng hợp thực thi trang load và làm biến mất trang loading
            function _loadingScreen(a, b) {
                var liz = b * 2 / 3
                loadDaBars(liz);
                loadNum(liz/120);
                $(a).delay(b).fadeOut("slow");
                $(".nav").delay(b+25).fadeIn("slow");
            }

            _loadingScreen(a, b);
        }

Kỹ thuật:

1. Xử lí thanh loading: Ban đầu, bạn set thanh bar <span id="bar"> có width = 0 (bằng js), sau đó kết hợp .each(function() { }); và $queue.queue(function(next) { }); để dùng animation kéo dài width của <span id="bar"> ra 100%.
2. Xử lí số loading 100%: bạn dùng hàm count() và setTimeout thôi , cái khó khăn ở đây là bạn phải canh thời gian để thanh bar vừa đầy thì số chạy tới 100 luôn
3. Sau khi load 100%, màn hình loading screen sẽ tự động biến mất: $(a).delay(b).fadeOut("slow");
4. Sau đó, thanh menu mới xuất hiện! $(".nav").delay(b+25).fadeIn("slow");

Bước 7: bấm navigation thì đổi trang con
Xem lại html của menu

PHP:

<ul class="nav">
        <li><a href="javascript:;" title="#second" class="second active">Slide nội dung 1</a></li>
        <li><a href="javascript:;" title="#third"  class="third">Slide nội dung 2</a></li>
        <li><a href="javascript:;" title="#forth"  class="forth">Slide nội dung 3</a></li>
        <li><a href="javascript:;" title="#fifth"  class="fifth">Slide nội dung 4</a></li>
        <li><a href="javascript:;" title="#sixth"  class="sixth">Slide nội dung 5</a></li>
    </ul>

mình đã set trước title của từng cái li trùng với id của trang con <section> tương ứng

PHP:

$(".nav li a").click(function() {
            var $a = $(this);
            $(".nav li a").removeClass("active");
            $a.addClass("active");
            $('html,body').animate({scrollTop: $($a.attr("title")).offset().top}, 'slow');
        });

Bởi vậy, kỹ thuật khá đơn giản:

1. Khi bấm, bạn get cái thẻ <a> được click, var $a = $(this);
2. Bạn xoá lớp css "active" của toàn bộ thẻ a, rồi gán css "active" cho thẻ <a> vừa click.
3. bạn xài hàm .offset().top để lấy vị trí top của trang con, rồi dùng hàm animate scrollTop để nó chạy (như dòng kế cuối của code)

Bước 8: Scrolling
Do mình đã xài overflow hidden nên bạn không thể scroll đc!!! Bởi vậy, buộc lòng ta fải xài thư viện để bắt sự kiện scroll (nhét vô trong <head>). Bạn có thể down plugin đó từ đây: link

PHP:

<script src="js/jquery.mousewheel.min.js"></script>

JS sẽ có dạng sau:

PHP:

var a = $("section").length;
$(document).mousewheel( function(e, delta){   
            function _a(){
                    //scroll lên
                    if(delta>0) {
                        if($b.index()==1) {} else {
                            $('html,body').animate({scrollTop: $b.prev().offset().top}, 'slow');        
                            ad($b.prev().attr("id"));
                            $b = $b.prev();
                        }
                    }
                    //scroll xuống
                    if(delta<0){
                        if($b.index()==(a-1)) {} else {
                            $('html,body').animate({scrollTop: $b.next().offset().top}, 'slow');
                            ad($b.next().attr("id"));
                            $b = $b.next();
                        }
                    }       
                }
                _a();
            }
            //Hàm thực thi scroll chuột, nếu loading screen đang chạy thì chặn ko cho scroll
            if($("#first").css("display")=="none") {
                _a();
            }
        });        

Kỹ thuật:

1. Bạn quan tâm đến delta, khi delta>0 thì nghĩa là đang scroll lên, delta<0 thì ngược lại nghĩa là scroll xuống
2. Phải xác định đc cái trang con đang hiển thị (ban đầu mình đã set trang #second 1 lớp active làm cờ chứng tỏ nó đang hiển thị)
3. Khi scroll lên, bạn lại dùng .offset().top để lấy vị trí top của trang con, rồi dùng hàm animate scrollTop y chang như Bước 7 vậy, nhưng bạn lấy anh em đứng trước của nó bằng $b.prev() . Nhưng bạn cần nhớ: nếu bạn đang ở #second thì bạn không thể scroll lên đc (!) do ở trên không còn trang con nào cả , bởi vậy bạn phải check .index () của trang con đó, nếu index >1 thì mới thực thi.
4. Khi scroll xuống, bạn làm gần giống 3. ở trên, chỉ thay $b.next(). Nhưng bạn cần nhớ: nếu bạn đang ở trang con cuối cùng thì bạn không thể scroll xuống đc, bởi vậy bạn phải check .index () của trang con đó, nếu index < giá trị tổng số trang con thì mới thực thi (giá trị này tính bằng var a = $("section").length;).
5. Sau đó bạn set lại cái menu
   
   PHP:

   function ad(a) {
        $(".nav li a").removeClass("active");
            $(".nav li a."+a).addClass("active");
    }    
6. Bạn fải xác định loading screen biến mất thì hàm mới chạy đã nhé

Bước 9: Tối ưu hoá bước 8
Code ở bước 8 rất kinh hoàng nếu gặp bọn phá phách: cuộn chuột liên tục khiến trang bay nhảy hoài thì sao? Để giải quyết vấn đề này bạn cần thêm thắt khá nhìu (Mình lược bỏ bớt phần bên trong thực thi scroll cho dễ nhìn)

PHP:

$(document).ready(function() {
  var timeStamp = new Date().getTime();

  //scrolling
  $(document).mousewheel( function(e, delta){
   function _a(){
    var timeNow = new Date().getTime();

    //chặn scroll liên tục
    if (timeNow - timeStamp < 500) {
     timeStamp = timeNow;
     return;
    } else {
     timeStamp = timeNow;
     //scroll lên
     if(delta>0) {

     }
     //scroll xuống
     if(delta<0){

     }
    }
    _a();
   }
   //Hàm thực thi scroll chuột, nếu loading screen đang chạy thì chặn ko cho scroll
   if($("#first").css("display")=="none") {
    _a();
   }
  });  

Ngay timeNow - timeStamp < 500, bạn có thể chỉnh sửa con số theo ý muốn. Ở đây mình set 500 nghĩa là sau 500ms thì mới đc scroll 1 lần

Bước 10: Chuyển trang con khi bấm phím up và down

PHP:

//bàn phím up và down
        $(document).keydown(function(e){       
            function _b() {
                e.preventDefault();
                var timeNow = new Date().getTime();
                //chặn bấm phím liên tục
                if (timeNow - timeStamp < 500) {
                    timeStamp = timeNow;
                    return;
                } else {
                    timeStamp = timeNow;
                    //lên
                    if (e.keyCode == 38) {                   
                        if($b.index()==1) {} else {
                            $('html,body').animate({scrollTop: $b.prev().offset().top}, 'slow');            
                            ad($b.prev().attr("id"));
                            $b = $b.prev();
                        }
                    }
                    //xuống
                    if (e.keyCode == 40) {                    
                        if($b.index()==(a-1)) {} else {
                            $('html,body').animate({scrollTop: $b.next().offset().top}, 'slow');
                            ad($b.next().attr("id"));
                            $b = $b.next();
                        }
                    }
                }
            }
            //Hàm thực thi bấm phím, nếu loading screen đang chạy thì chặn ko cho bấm
            if($("#first").css("display")=="none") {
                _b();
            }else { e.preventDefault(); }
        });
        $('html, body').on('touchstart touchmove', function(e){
        
             e.preventDefault();
        });
    });    

Kỹ thuật:

1. Mình kết hợp luôn cái chặn 500ms như bước 9 nhé
2. Bạn xài $(document).keydown(function(e){ }); để bắt sự kiện bấm phím nhé e.keyCode == 38 là bấm phím up đi lên và e.keyCode == 40 là bấm phím down đi xuống
   
3. Bạn xài hàm xử lí gần tương đương với scroll lên và scroll xuống nhé

Kết quả:
Bạn sẽ có đc 1 trang OnePage đơn giản như link
(Cảm ơn Đoilơ ViệtDesigner đã tài trợ hosting )