Hôm nay, chúng ta sẽ cùng chinh phục thách thức trong việc tạo một banner hình ảnh tự động cuộn lặp vòng theo chiều ngang. Và chúng tôi dự định sẽ thực hiện điều đó mà không dùng đến bất kỳ một dòng JavaScript nào.
Để banner này thật sự hữu ích, mục tiêu của chúng tôi là sử dụng những hình ảnh riêng biệt cho vào HTML, không đơn giản chỉ là background CSS lặp đi lặp lại. Có một chút khó khăn ở đây nhưng chúng tôi sẽ hướng dẫn bạn làm một cách chính xác. Hãy cùng bắt đầu nhé!
Ý tưởng
Concept ở đây thật sự đơn giản. Chỉ là bạn có một website về hình ảnh hoặc thiết kế portfolio và bạn muốn một banner đơn giản chạy dọc trang web và tự động cuộn theo chiều ngang thông qua một số hình ảnh như sau:
Như bạn đã thấy, về cơ bản, chúng ta chỉ có một dãy các hình ảnh di chuyển từ trái sang phải. Đây là một kỹ thuật khá phổ biến và trên thực tế, bạn có thể thấy nó hoạt động trên website của Gina Meola.
Bạn có thể dễ dàng thực hiện hiệu ứng này với JavaScript hoặc Flash nhưng thách thức ở đây là điều gì sẽ xảy ra nếu chúng ta sử dụng CSS. Với các công cụ mới trong CSS3, bất cứ ai đều có thể thực hiện CSS animation một cách dễ dàng.
Một số rào cản
Như tôi đã nói, dường như đây là dự án khá dễ dàng nhưng đó là do tôi đã giải quyết hầu hết vấn đề cho bạn. Sự thật là tôi đã mất một chút thời gian để tìm được giải pháp mong muốn. Lý do là luôn có một con đường dễ dàng và một con đường khó khăn để thực hiện.
Cách làm dễ dàng
Cách dễ dàng để có được những hình ảnh mà bạn muốn hiển thị là import chúng vào Photoshop và sau đó kết hợp chúng thành một hình ảnh dài. Sau đó, bạn có thể thiết lập hình ảnh này cho background của bạn trong CSS, hiển thị lặp lại trên x-axis và cho vào CSS animation.
Nó hoạt động khá tốt và tôi đã thử để nó lặp lại trong vài phút, nhưng cách làm này không phải là giải pháp thật sự linh hoạt. Ví dụ, tôi sẽ không thể link một hình ảnh riêng biệt đến một nơi nào đó bởi tất cả những hình ảnh đã được kết hợp thành một. Điều này có nghĩa rằng tôi không thể thêm hoặc có bất kỳ hiệu ứng chuyển động đặc biệt nào trên mỗi hình ảnh. Ngoài ra nếu bạn muốn thêm hoặc đổi hình ảnh, bạn cần vào lại Photoshop để update tập tin và tôi chắc chắn rằng đây không phải là cách làm lý tưởng.
Cách làm khó hơn
Hãy bỏ đi cách làm dễ dàng ở trên bởi đó không phải là thách thức nhưng cũng không phải là phương pháp tốt nhất để đạt được mục tiêu của chúng ta. Có một cách làm khó hơn để insert cùng một lúc các hình ảnh vào HTML mà vẫn thực hiện được các chức năng của banner.
Lý do khiến cách làm này khó khăn hơn bởi chúng ta muốn animation là vô hạn. Trong CSS, bạn có thể dễ dàng lặp lại hình ảnh background nhưng không có một phương pháp nhằm lặp lại một cái gì đó trong HTML. Thậm chí nếu có, chúng ta chỉ có một hình ảnh lặp đi lặp lại sau khi tất cả những hình ảnh khác được hiển thị. Như bạn đã thấy, đó là câu hỏi khá hóc búa.
Đây là lúc các keyframe animation phát huy hiệu quả. Điều thú vị về kiểu animation này là nó sẽ thực sự thực hiện sự lặp lại vô hạn cho chúng ta. Nó thật sự là các vòng animation, không phải là hình ảnh nhưng chúng ta có thể sử dụng để tạo cảm giác hình ảnh lặp đi lặp lại vô hạn.
Để xem nó hoạt động như thế nào, bạn hãy tưởng tượng nếu chúng ta thiết lập dãy các hình ảnh và sau đó sử dụng keyframe để animate chúng. Chúng ta sẽ có starting point (0%) và stopping point (100%) như sau:
Như bạn có thể thấy, nó khá rắc rối bởi luôn có những không gian không mong muốn, Ngoài ra, khi animation bắt đầu, sẽ có flash sáng lên khi trở lại lúc bắt đầu. Chúng ta thật sự có một hình ảnh động vô hạn nhưng sẽ trông rất khủng khiếp.
Nếu bạn đã quen thuộc với các vấn đề trong animation, giải pháp có thể đã rõ ràng. Cái chúng ta cần là làm cho frame đầu tiên hoàn toàn phù hợp với frame cuối cùng, sau đó sẽ lặp lại animation, hình ảnh sẽ liền mạch và tạo cảm giác như dãy hình ảnh vô tận.
Nhưng để làm được điều này, chúng ta sẽ cần lặp lại một số hình ảnh trong HTML. Sẽ có một số rắc rối nhưng chúng ta chỉ cần lặp lại đủ hình ảnh cho frame.
Hãy cùng chúng tôi thực hiện
Bây giờ, chúng ta đã nắm được concept và cần một bản demo. Hãy bắt đầu với HTML cơ bản cho trang của chúng ta.
HTML
Để xây dựng trang demo thật đẹp, chúng ta sẽ bao gồm một header (sử dụng html5shiv cho IE) và một số văn bản, sau đó có một div containing hình ảnh của chúng ta. Lưu ý rằng đầu tiên chúng ta có 6 hình ảnh độc đáo, sau đó là lặp lại 4 hình ảnh đầu tiên. Ban đầu hãy dùng 4 hình ảnh này.
Animated Photo Banner
Lorem ipsum dolor...
“First” class có ý nghĩa như thế nào? Về cơ bản, để animation hoạt động, chúng ta cần nhắm mục tiêu cho hình ảnh đầu tiên và chuyển nó sang trái (những hình ảnh tiếp theo sẽ nối tiếp). Việc thực hiện sẽ khá dễ dàng đối với hình đầu tiên nhưng cần một chút hỗ trợ khi thực hiện các class cho animation. Tôi không thể thực hiện trong các trình duyệt vì vậy tôi lặp lại class cũ. Bạn có thể sử dụng một cách khác nếu bạn không đồng tình với phương pháp này.
Bắt đầu với CSS
Để bắt đầu với CSS, thiết lập lại margin, padding để đảm bảo hình ảnh sẽ luôn theo hàng lối. Thêm texture background tối hoặc màu sắc cho nội dung và style cho container, width 1000px và overflow là hidden.
* {margin: 0; padding: 0;}
body {
background: url('dark_geometric.png');
}
#container {
width: 1000px;
overflow: hidden;
margin: 50px auto;
background: white;
}
Tiếp theo chúng ta sẽ định dạng header và photobanner. Đối với header, width 800px vì nó không sẽ không kéo dài container. Canh giữa với margin tự động và sử dụng một số style cơ bản cho văn bản.
Đối với photo banner, height là 233 px và width là 3550px. Trông có vẻ điên rồ nhưng nó cho phép hình ảnh được đặt từ đầu đến cuối và các container sẽ đảm bảo sẽ không tạo bất kỳ di chuyển lạ nào.
/*header*/
header {
width: 800px;
margin: 40px auto;
}
header h1 {
text-align: center;
font: 100 60px/1.5 Helvetica, Verdana, sans-serif;
}
header p {
font: 100 15px/1.5 Helvetica, Verdana, sans-serif;
text-align: justify;
}
/*photobanner*/
.photobanner {
height: 233px;
width: 3550px;
margin-bottom: 80px;
}
Với đoạn code này, trang demo sẽ trông rất tuyệt. Chúng tôi đã có một container nội dung theo cách chúng ta muốn. Hình ảnh tỉnh nhưng bước tiếp theo chúng ta sẽ xây dựng animation.
Xây dựng Animation
Quá trình xây dựng keyframe animation khá đơn giản. Để bắt đầu, chúng ta sẽ đặt mục tiêu cho “first” class mà chúng ta sẽ tạo và hiển thị hình ảnh animation. Chúng ta đặt tên cho animation, sau đó thiết lập thời gian và lặp lại vô hạn.
Di chuyển xuống dòng, sau đó chúng ta xác định khung hình bằng cách sử dụng cú pháp @keyframe. Chúng ta chỉ thật sự cần 2 frame ở đây, 1 cho lúc bắt đầu và 1 cho kết thúc. Chỉ đơn giản là thiết lập margin cho giá trị âm để đi chuyển dòng hình ảnh sang trái và hình ảnh tiếp theo sẽ thay thế vị trí ban đầu.
/*keyframe animations*/
.first {
-webkit-animation: bannermove 30s linear infinite;
-moz-animation: bannermove 30s linear infinite;
-ms-animation: bannermove 30s linear infinite;
-o-animation: bannermove 30s linear infinite;
animation: bannermove 30s linear infinite;
}
@keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
@-moz-keyframes bannermove {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
@-webkit-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
@-ms-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
@-o-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}
}
Đó là tất cả những gì bạn phải làm. Với đoạn code này, banner hình ảnh của bạn sẽ bắt đầu dòng lặp lại vô hạn thông qua các bức ảnh mà chúng ta có.
Hiệu ứng nâng cao
Để giới thiệu lợi ích thật sự của phương pháp này, tôi quyết định một bước xa hơn và thêm những hiệu ứng di chuột cho mỗi hình ảnh. Chúng ta không thể thực hiện điều này với kỹ thuật background trong CSS. Thực hiện di chuột, chúng ta sẽ mở rộng 20% hình ảnh và thêm shadow.
.photobanner {
height: 233px;
width: 3550px;
margin-bottom: 80px;
}
.photobanner img {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.photobanner img:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
cursor: pointer;
-webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
}
Demo
Chúng tôi đã hoàn thành nhiệm vụ này và bạn có thể Click vào đây hoặc trên bức ảnh để thấy phiên bản online.
Kết luận
Chúng ta đã có mục tiêu khá khó khăn ở đầu bài viết. Chúng ta muốn tạo banner các hình ảnh bằng cách chỉ sử dụng CSS. Thách thức lớn nhất ở đây là làm thế nào để có một loại hình ảnh lặp lại với HTML. Một phương pháp tôi sử dụng ở đây chính là keyframe animation, đảm bảo frame đầu và frame cuối cùng sẽ hoàn toàn khớp với nhau. Điều này sẽ cho phép chúng ta có một dãy hình ảnh chuyển động liền mạch.
Hãy cho chúng tôi biết suy nghĩ của bạn về hiệu ứng này và bạn đã làm thế nào để thay đổi hoặc cải thiện hơn?
