Sử dụng CSS3 tạo slideshow trượt ngang đẹp mắt

[ Tin nhắn mới · Thành viên · Nội quy diễn đàn · Tìm kiếm · RSS ]

Page 1 of 1 1
Forum moderator: Admin, Administrators

Diễn đàn » Trao đổi kiến thức thiết kế web, lập trình code ... » Chia sẻ code web full sạch đẹp cho các member » Sử dụng CSS3 tạo slideshow trượt ngang đẹp mắt (Dùng CSS3 tạo slideshow)

Yasuo

Data: Thứ hai, 2015-09-07, 10:38 PM

Offline

Bài viết: 24

Danh hiệu: 1

Đánh giá: 15

Sử dụng plugin jQuery hay Javascript để tạo slider là điều tuyệt vời, song CSS3 cũng không phải là 1 lựa chọn kém hấp dẫn hơn. Bài viết này mình xin chia sẻ cho các bạn 1 hướng dẫn tạo CSS3 slideshow trượt ngang giống jCarousel đẹp mắt mà không cần sử dụng jQuery hay Javascript.

Chuẩn bị:
- Thẻ #wrapper để chứa cái item chạy slide

Code

Responsive chỉ cần áp dụng cho #wapper là ổn.
Class .container chứa cái phần tử bên trong:

Code

<div class="container">
         <a href="#"><img src="https://lh6.googleusercontent.com/-bVi65DhReuQ/VJeqLSMHLWI/AAAAAAAAASc/KcGswc7CHSw/w500-h400-no/huong-dan-tao-slideshow-bang-css3-dep-mat.jpg" alt=""/></a>
         <div class="caption">
             <h2>Lorem ipsum dolor sit amet !</h2>
             <p>
                 Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
                 nisi ut aliquip ex ea commodo consequat.
             </p>
         </div> 
     </div> 
    - Style CSS cho #wrapper:
div#wrapper{
     width:500px;
     height:400px;
     margin:0 auto;
     padding:0;
     overflow:hidden;
     position:relative;
  transition:all .5s ease 0s;
     -moz-transition:all .5s ease 0s;
     -webkit-transition:all .5s ease 0s;
     -o-transition:all .5s ease 0s;
     -ms-transition:all .5s ease 0s;
}
    -Style CSS cho class .container
div.container{
     width:100%;
     height:100%;
     position:relative;
     overflow:hidden;
     position:absolute;
     top:0;
     left:-100%;
}

Cuối cùng là style Slider cho từng class .container

Code

div.container:nth-child(1) {
  -moz-animation:slider 25s ease-in-out infinite;
  -o-animation:slider 25s ease-in-out infinite;
  -webkit-animation:slider 25s ease-in-out infinite;
  animation:slider 25s ease-in-out infinite;
}
div.container:nth-child(2) {
  -moz-animation:slider01 25s ease-in-out infinite;
  -o-animation:slider01 25s ease-in-out infinite;
  -webkit-animation:slider01 25s ease-in-out infinite;
  animation:slider01 25s ease-in-out infinite;
}
div.container:nth-child(3) {
  -moz-animation:slider02 25s ease-in-out infinite;
  -o-animation:slider02 25s ease-in-out infinite;
  -webkit-animation:slider02 25s ease-in-out infinite;
  animation:slider02 25s ease-in-out infinite;
}
div.container:nth-child(4) {
  -moz-animation:slider03 25s ease-in-out infinite;
  -o-animation:slider03 25s ease-in-out infinite;
  -webkit-animation:slider03 25s ease-in-out infinite;
  animation:slider03 25s ease-in-out infinite;
}
div.container:nth-child(5) {
  -moz-animation:slider04 25s ease-in-out infinite;
  -o-animation:slider04 25s ease-in-out infinite;
  -webkit-animation:slider04 25s ease-in-out infinite;
  animation:slider04 25s ease-in-out infinite;
}

Lưu ý:
- Giá trị bên trong "nth-child" quyết định slide chạy đúng hoặc ngược lại, ở đây mình giới hạn 05 slide nên code sẽ như trên, còn nếu các bạn muốn tăng hoặc giảm thì thay đỗi giá trị nhé.
- Mỗi "nth-child" sẽ có 1 animation với tên riêng biệt, ví dụ như trên "Slider, slider01, slider02..."
- Keyframe cho từng slide class .container

Code

@keyframes slider04 {
  0%  { left:-100%; }
  76% { left:-100%; }
  80% { left:0px; }
  84% { left:0px; }
  96% { left:0px; z-index:0; }
  100%{ left:100%; z-index:0; }
}

Đây là keyframe dành cho animation có tên là Slider và chưa hỗ trợ hoàn toàn trên tất cả các trình duyệt, nếu muốn slideshow hoạt động tốt trên các trình duyệt khác thì chúng ta thêm các đầu ngữ trước keyframe như sau:
+ "-moz-" dành cho Firefox.
+ "-o-" dành cho Firefox.
+ "-webkit-" dành cho Firefox.
Ví dụ: Nếu muốn keyframe hoạt động tốt trên Chrome/Safari thì chúng ta nên để đoạn code tương tự:

Code

@-webkit-keyframes slider { /*code bên trong*/}

Sau khi hoàn thành, các bạn sẽ có demo tương tự dưới đây:
Link Demo: http://nvt.ucoz.net/Trang-Demo/CSS3_Slider_Demo.html#

Chúc các bạn thành công,

Nguồn: http://www.fecoder.net/

Page 1 of 1
1

Thông Tin

Ad rất cám ơn các bạn đã và đang bắt đầu quan tâm đến Star8x, các bạn có thể gửi phản hồi, ý kiến, thắc mắc hoặc những gì bạn cảm thấy khó chịu, bất tiện trong quá trình sử dụng website. ad thật sự cảm ơn và vui vẻ nhận đón nhận những ý kiến phản hồi từ bạn.
Lưu ý: Những bài viết đăng trên trang ad các bạn hãy tham khảo thật kỹ trước khi đọc hoặc tải về những ứng dụng, có những baì viết được đăng bởi các member của trang. ad không chắc chắn được bài viết đó có thật sự tốt hoặc có chứa các mã độc hay không, nếu các bạn tải về thì ad khuyến cáo các bạn nên diệt virut trước khi cài đặt...!

Nguyễn Văn Thanh

+84 01658 588-008

nvt.star8x@gmail.com

Được tài trợ bởi uCoz.com

Internet

Chuyển nick facebook...

BOX ADMIN