Bạn đang cần một hiệu ứng giới thiệu sản phẩm ấn tượng với khách hàng ? Hay đơn giản là bạn cần chỉnh sửa lại giao diện web nhằm thu hút người dùng và tăng doanh số bán hàng của mình. Nếu các bạn vẫn chưa tìm ra giải pháp cho riêng mình, thì thử dùng hiệu ứng trình diễn sản phẩm mà mình giới thiệu cho các bạn trong bài viết này xem sao.
Để tạo hiệu ứng, chúng ta sẽ sử dụng một thư viện javascript nhỏ gọn là impress.js. Đây là một framework giúp chúng ta tạo những hiệu ứngCSS3 transforms và transitions trên các trình duyệt mới nhất hiện nay.
Download
HTML
Để dễ hình dung, các bạn sử dụng khung chuẩn html cho hiệu ứng như sau :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Trình diễn sản phẩm ấn tượng với CSS3 và Impress.js</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">
<!-- Cac ban copy html markup cho slide san pham o day -->
</div>
<a id="arrowLeft" class="arrow"><</a>
<a id="arrowRight" class="arrow">></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>
Như các bạn thấy, đoạn html bên trên không có gì là khác lạ, thẻ div với id là #impress sẽ là nơi chứa toàn bộ các slides. Mỗi một slide sẽ chứa 3 thành phần — tiêu đề (title), đoạn văn ngắn mô tả sản phẩm và hình của sản phẩm đó. Các bạn copy đoạn html bên dưới để tạo mẫu slide :
<!-- 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 & 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>
Lúc này, các bạn sẽ thấy có những thuộc tính lạ xuất hiện bên trong các thẻ html. Đừng quá lo lắng, vì đây là các thuộc tính được hỗ trợ bởi impress.js và mình xin giải thích ngắn gọn cho các thuộc tính đó như sau :
– data-x, data-y, data-z dùng để khai báo giá trị mà slide sẽ di chuyển trên màn hình trong không gian 3D;
– data-rotate, data-rotate-x, data-rotate-y rotate là giá trị (tính theo độ) mà slide sẽ quay vòng.
– data-scale – đây là giá trị dùng để co giãn hình ảnh lớn nhỏ tùy ý.
CSS
Để trình diễn có thể hoạt động tốt, chúng ta cũng cần phải định dạng vài đoạn css. Đầu tiên là định dạng cho khung chứa và cho mỗi slide.
/*----------------------------
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;
}
thẻ div với class .impress-not-supported được dùng như là phương án thay thế cho những trình duyệt không hỗ trợ impress.js. Bây giờ chúng ta sẽ định dạng css cho từng slide riêng biệt.
/*----------------------------
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
Mặc dù impress.js không phụ thuộc vào jQuery , tuy nhiên chúng ta cũng cần phải viết vài dòng code cho sự kiện click chuột để điều hướng slide.
$(function(){
var imp = impress();
$('#arrowLeft').click(function(e){
imp.prev();
e.preventDefault();
});
$('#arrowRight').click(function(e){
imp.next();
e.preventDefault();
});
});
Thế là xong, mình mong là hiệu ứng này sẽ đủ sức để các bạn tạo ấn tượng tốt cho khách hàng của mình.