Liên hệ
Đăng nhập Hỗ trợ online

Tạo trang giới thiệu sản phẩm cực đẹp với CSS3

  • 08/07/2014
  • 2309
  • 0
Một trang trình chiếu, giới thiệu sản phẩm bắt mắt và thu hút được sự quan tâm của khách hàng chưa bao giờ là việc đơn giản.

Một trang giới thiệu sản phẩm là nơi mô tả tính năng, đưa ra một số ảnh chụp. Đương nhiên, đây sẽ là nơi mà bạn tập trung để xây dựng sự quan tâm của khách hàng đối với sản phẩm của bạn. Tuy nhiên, càng ngày việc này càng trở nên khó khăn hơn vì sự “chai lì” của khách hàng. May mắn thay, một thư viện Javascrip nhỏ gọn có thể giúp bạn trong việc này.

impress.js là một thư viện độc lập làm cho nó dễ dàng để thiết kế một trang trình chiếu bằng CSS3 tiên tiến với những hiệu ứng đẹp mắt. Và đây là điều chúng ta sẽ làm đối với trang trình bày, giới thiệu sản phẩm bằng một chút phép thuật nho nhỏ từ CSS3.

HTML

Chúng ta sử dụng một mẫu HTML5 đơn giản để làm ví dụ.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<!DOCTYPE html>
<html>
    <head>
        <meta c-harset="utf-8" />
        <title>Impressive CSS3 Product Showcase | Tutorialzine Demo</title>

        <!-- Google Webfonts and our stylesheet -->
        <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans+Narrow|Open+Sans:300" />
        <link rel="stylesheet" href="assets/css/styles.css" />

        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>

    <body>

        <div id="impress" class="impress-not-supported">

            <!-- The Slides Will Go Here -->

        </div>

        <a id="arrowLeft" class="arrow">&lt;</a>
        <a id="arrowRight" class="arrow">&gt;</a>

        <!-- JavaScript includes -->
        <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <script src="assets/js/impress.js"></script>
        <script src="assets/js/script.js"></script>

    </body>
</html>

 

Div #impress giữ slide, điều này được yêu cầu để có thể sử  dụng impress.js. Trên trang, chúng ta cũng có cả mã nguồn JavaScrip, tuy impress.js không cần đến jQuery để làm việc nhưng chúng ta cần nó để xử lý các lần nhấn chuột vào mũi tên trên slide.

Mỗi trang trình bày bao gồm 3 yếu tố: tiêu đề, đoạn văn bản, hình ảnh. Trên hình là những vị trí dành riêng cho chúng. Những hình ảnh trong ví dụ này được lấy trên trang Galaxy Nexus của Google.

Các phần tử của slide được nhóm lại thành từng “step” div bên trong #impress. Chúng ta chuẩn bị tất cả những thứ này là để dành cho impress.js

Sử dụng impress.js

Với thư viện nhỏ này, chúng ta có thể tạo ra quá trình chuyển đổi CSS3 “nuột” giữa những slide trình bày sản phẩm. Để làm được điều này, chúng ta cần khai báo các định hướng slide cho impress.js. Đó là lý do mà chúng tôi nhóm các thuộc tính vào các “step” div khác nhau. Những thuộc tính này chuyển thành các biến đổi CSS3 dựa trên bộ thư viện, tùy thuộc vào trình duyệt được sử dụng mà hiệu ứng của slide cũng bị ảnh hưởng.

Impress.js hỗ trợ một số thuộc tính:

data-x, data-y, data-z sẽ di chuyển slide trong không gian 3 chiều.

data-scale: thay đổi kích thước các slide.

Các bạn có thể xem cách nó được sử dụng ở dưới đây:

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<!-- The first slide retains its default position. We could omit the data attributes -->
<div id="intro" class="step" data-x="0" data-y="0">
    <h2>Introducing Galaxy Nexus</h2>
    <p>Android 4.0<br /> Super Amoled 720p Screen<br />
    <img src="assets/img/nexus_1.jpg" width="232" height="458" alt="Galaxy Nexus" />
</div>

<!-- We are offsetting the second slide, rotating it and making it 1.8 times larger -->
<div id="simplicity" class="step" data-x="1100" data-y="1200" data-scale="1.8" data-rotate="190">
    <h2>Simplicity in Android 4.0</h2>
    <p>Android 4.0, Ice Cream Sandwich brings an entirely new look and feel..</p>
    <img src="assets/img/nexus_2.jpg" width="289" height="535" alt="Galaxy Nexus" />
</div>

<!-- Same for the rest.. -->
<div id="connect" class="step" data-x="-300" data-y="600" data-scale="0.2" data-rotate="270">
    <h2>Connect &amp; Share</h2>
    <p>Real-life sharing is nuanced and rich. Galaxy Nexus makes sharing.. </p>
    <img src="assets/img/nexus_3.jpg" width="558" height="329" alt="Galaxy Nexus" />
</div>

<div id="upload" class="step" data-x="-200" data-y="1500" data-rotate="180">
    <h2>Instant Upload</h2>
    <p>Your photos upload themselves with Instant Upload, which makes ..</p>
    <img src="assets/img/nexus_4.jpg" width="248" height="510" alt="Galaxy Nexus" />
</div>

<div id="music" class="step" data-x="-1200" data-y="1000" data-scale="0.8" data-rotate="270">
    <h2>Jam on with Google Music</h2>
    <p>Google Music makes discovery, purchase, and listening effortless and..</p>
    <img src="assets/img/nexus_5.jpg" width="570" height="389" alt="Galaxy Nexus" />
</div>

 

Khi bắt đầu trình chiếu, impress.js sẽ bù đắp vào những chuyển đổi cũng như sử dụng các luật đối với #impress div khiến hiệu ứng biến đổi bằng CSS3 được mượt mà. Tất nhiên là điều này còn phụ thuộc bạn tinh chỉnh các thuộc tính của mỗi slide như thế nào để đạt được kết quả tốt nhất.

CSS

Để thực hiện việc trình chiếu, chúng ta cần áp dụng một số luật trong CSS. Bước đầu tiên là tạo phong cách trình chiếu cho container cũng như thiết lập phong cách mặc định cho các phần tử slide.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

/*----------------------------
    Styling the presentation
-----------------------------*/

#impress:not(.impress-not-supported) .step{
    opacity:0.4;
}

#impress .step{
    width:700px;
    height: 600px;
    position:relative;
    margin:0 auto;

    -moz-transition:1s opacity;
    -webkit-transition:1s opacity;
    transition:1s opacity;
}

#impress .step.active{
    opacity:1;
}

#impress h2{
    font: normal 44px/1.5 'PT Sans Narrow', sans-serif;
    color:#444648;
    position:absolute;
    z-index:10;
}

#impress p{
    font: normal 18px/1.3 'Open Sans', sans-serif;
    color:#27333f;
    position:absolute;
    z-index:10;
}

#impress img{
    position:absolute;
    z-index:1;
}

Như bạn có thể thấy trong các quy tắc trên, và trong đoạn mã HTML ban đầu. Phần tử #impress chỉ là một lớp hỗ trợ. Lớp này chỉ được loại bỏ khi trình duyệt hỗ trợ các thư viện này và có thể chạy thành công.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

/*----------------------------
    Slide 1 - Intro
-----------------------------*/

#impress #intro{
    width: 500px;
}

#intro h2{
    text-align: center;
    width: 100%;
}

#intro p{
    font-size: 22px;
    left: 290px;
    line-height: 1.6;
    top: 220px;
    white-space: nowrap;
}

#intro img{
    top: 120px;
}

jQuery

Để khởi tạo một thư viện của impress.js, chúng ta cần phải gọi các phương thức cùng tên. Điều này tất nhiên là sẽ trả về một đối tượng mới là các phương thức để hiển thị các trang slide trước/sau.

1
2
3
4
5
6
7
8
9
10
11
12
13

$(function(){

    var imp = impress();

    $('#arrowLeft').click(function(e){
        imp.prev();
        e.preventDefault();
    });

    $('#arrowRight').click(function(e){
        imp.next();
        e.preventDefault();
    });

});

 

Bạn có thể sử dụng ví dụ này để sử dụng cho các trang giới thiệu sản phẩm, tính năng và thậm chí là một thư viện hình ảnh.

Bạn nên xem qua bài viết Thay đổi hình ảnh của checkbox thật đơn giản với CSS3 để biết thêm một số thủ thuật trong việc sử dụng CSS3. Đảm bảo website của bạn trông sẽ thật tuyệt vời nếu có thể áp dụng những thủ thuật này.

  Ý kiến bạn đọc

Bạn cần trở thành thành viên của nhóm để có thể bình luận bài viết này. Nhấn vào đây để đăng ký làm thành viên nhóm!

Bài viết liên quan

Hỗ trợ online
Mr Việt Mr Việt
0902.168.001
hoangvietdhcn@gmail.com
Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây