Lập trình web

Hướng dẫn trình bầy trang giới thiệu sản phẩm tuyệt vời bằng CSS3 & JQuery

Chia sẻ nhanh

Hôm nay tôi sẽ giới thiệu cho bạn một phương pháp trình bầy trang giới thiệu sản phẩm cực đẹp bằng CSS3 & Jquery.
Đối với các sản phẩm tương tự giống nhau thì đây là một ý tưởng cực tốt để so sánh và đánh giá sản phẩm.


DEMO DOWNLOAD

Trong bài viết này, tôi sử dụng thuộc tính background-image để có thể làm thay đổi ảnh nền khi tương tác bằng click chuột hoặc sử dụng scroll bar.
Chính vì vậy bạn cần phải có những lớp block ở cùng một vị trí tương đồng. Có thể hiểu đơn giản như hình dưới đây.



và đoạn mã HTML hiển thị như sau


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Product Page with jQuery and CSS Background Attachments</title>
        <link type="text/css" rel="stylesheet" href="/css/rhinoslider-1.05.css" />
        <script src="/jquery-latest.js" ></script>
        <script src="/jquery.scrollTo-1.4.3-min.js" ></script>

        <style type="text/css">
            body { background-color:#fff; margin:0;}
            *{margin:0;
            }

            #slider {
                /*IE bugfix*/
                padding:0;
                margin:0;
            }

            #slider li { list-style:none; }

            #page {
                margin:0 auto;
            }

            .imghide{
                background-attachment: fixed;
                background-color: white;
                background-position: center 10px;
                background-repeat: no-repeat;
                background-size:460px 400px;
                color: #5C5C5C;
                display: block;
                font-family: helvetica;
                font-size: 35px;
                font-weight: bold;
                height:700px;
            }

            .imghide span{
                display:none;
            }
            p{
                margin:1px;
            }
        </style>
    </head>
    <body>
        <div id="page">
            <ul id="slider">
                <li>
                    <p style="background-image: url('/images/shirt-1.png');" class='imghide' ></p>
                    <p style="background-image: url('/images/shirt-2.png');" class='imghide' ></p>
                    <p style="background-image: url('/images/shirt-3.png');" class='imghide' ></p>
                    <p style="background-image: url('/images/shirt-4.png');" class='imghide' ></p>
                </li>
            </ul>
        </div>
    </body>
</html>

Cố định từng lớp block sẽ khiến cho việc khi bạn scroll, lớp dưới sẽ đè lên lớp trên.
Quá trình hiển thị khá bắt mắt, giúp cho khách hàng có một cái nhìn tổng quát để so sánh sản phẩm.



Mọi thứ đã tạm ổn. Tiếp theo bạn sẽ tạo thêm thanh điều khiển bên dưới và tích hợp thêm JQUERY để giúp tương tác.

Đoạn HTML cho thanh điều khiển

<div id="floating-footer">
            <div id="brand_icon"></div>
            <span id="item_num">ITEM <span id="active_num" data-active="1">1</span> / <span id="slide_count">4</span></span>
            <div id="down-arrow"><img src="/images/down-arrow.png" /></div>
            <div id="up-arrow"><img src="/images/up-arrow.png" /></div>
</div>


Xác định mầu sắc, độ cao, vị trí, số lượng sản phẩm v.v...

       <script type="text/javascript">

           var windowHeight;
           var positions = [0];
           var slideCount;
           var colors = ["#fbdd56","#01492c","#f5272d","#565fcc"];

</script>


Đoạn mã Jquery sẽ như sau

$(document).ready(function() {
                $("#brand_icon").html("<img src='images/logo-1.png' />");

                slideCount = $(".imghide").length;
                windowHeight = $(window).height();

                var bottomMargin = windowHeight-420;
                positions.push(bottomMargin);

                for(i=1;i<(slideCount-1);i++){
                    positions.push(parseInt(bottomMargin)+(parseInt(windowHeight)*parseInt(i)));
                }

                $(".imghide").css("height",windowHeight+"px");

                $("#floating-footer").css("top",(windowHeight-50)+"px");
                $("#floating-sidebar").css("height",(windowHeight-50)+"px");

                $("#slide_count").html(slideCount);

});


Tương tác cho nút BACK

$("#down-arrow").click(function(){
                    var activeNumber = $("#active_num").attr("data-active");

                    if(activeNumber == slideCount){
                        $("html, body").animate({
                            scrollTop: "0px"
                        }, {
                            duration: 2000
                        });
                        return;
                    }

                    var scrollPosition = 0;
                    if(parseInt(activeNumber)+1 == slideCount){
                        scrollPosition = (positions[parseInt(activeNumber)]+windowHeight) + "px";
                    }else{
                        scrollPosition = (positions[parseInt(activeNumber)+1]) + "px";
                    }

                    $("html, body").animate({
                        scrollTop: scrollPosition
                    }, {
                        duration: 2000
                    });
});

Tương tác cho slidebar bên trái

var htmlRings = '';
for(y=0;y<slideCount;y++){
    if(y==0){
        htmlRings += "<div id='pag-"+(y+1)+"' class='pagination-common pagination-active' data-active='"+(y)+"'></div>";
    }else{
        htmlRings += "<div id='pag-"+(y+1)+"' class='pagination-common pagination' data-active='"+(y)+"'></div>";
    }

}

$("#pagination-bar").html(htmlRings);

 

$(".pagination-common").on("click",function(){

                    var activeNumber = $(this).attr("data-active");

                    if(activeNumber == slideCount){
                        $("html, body").animate({
                            scrollTop: "0px"
                        }, {
                            duration: 2000
                        });
                        return;
                    }

                    var scrollPosition = 0;
                    if(parseInt(activeNumber)+1 == slideCount){
                        scrollPosition = (positions[parseInt(activeNumber)]+windowHeight) + "px";
                    }else{
                        scrollPosition = (positions[parseInt(activeNumber)+1]) + "px";
                    }

                    $("html, body").animate({
                        scrollTop: scrollPosition
                    }, {
                        duration: 2000
                    });
});


Tương tác khi scroll

$(window).scroll(function () {

                    var scrolltop = $(window).scrollTop();

                    for(x=(slideCount-1);x>=0;x--){
                        if(scrolltop > positions[x]){
                            $("#active_num").html(x+1);
                            $("#active_num").attr("data-active",x+1);
                            $(".pagination-common").removeClass("pagination-active");
                            $("#pag-"+(x+1)).addClass("pagination-active");
                            $("#floating-footer").css("background",colors[x]);

                            if(x==0){
                                $("#brand_icon").html("<img src='images/logo-1.png' />");
                            }
                            if(x==1){
                                $("#brand_icon").html("<img src='images/logo-2.png' />");
                            }
                            if(x==2){
                                $("#brand_icon").html("<img src='images/logo-3.png' />");
                            }
                            if(x==3){
                                $("#brand_icon").html("<img src='images/logo-4.png' />");
                            }

                            return;
                        }
                    }

 });

Như vậy là chúng ta đã hoàn thiện một page giới thiệu sản phẩm rất bắt mắt.
Hi vọng các bạn có thêm một ý tưởng cho việc trình bầy website giới thiệu sản phẩm.


Bình luận

TOP

Bạn đã sẵn sàng chuyển ý tưởng tuyệt vời
của bạn thành hiện thực?