Phòng thí nghiệm ảnh. Thư viện CSS jQuery với khả năng thay đổi trang trình bày tự động. Thanh trượt CSS3 javascript chuyên nghiệp nhẹ
Trong bài học này chúng ta sẽ xem xét một chương trình tạo tự động trình chiếu bằng công nghệ HTML5.
Ngay cả khi kiến thức về javascript, css và html của bạn không cho phép bạn tự tạo trình chiếu, điều này có thể được thực hiện bằng chương trình Hislider. Bạn có thể tải xuống từ liên kết - Hislider.com. Trang web có sẵn cả phiên bản miễn phí và trả phí. Tôi sẽ hiển thị tất cả các hành động trong phiên bản miễn phí. Nếu bạn thích chương trình, bạn có thể mua nó Phiên bản trả tiền. Tôi đã tạo một slideshow thử nghiệm. Bạn có thể xem nó bằng liên kết:
Tải xuốngCách tạo slideshow đầu tiên bằng HisliderKhi bạn cài đặt và chạy chương trình, một cửa sổ chương trình sẽ xuất hiện trước mặt bạn, yêu cầu bạn bắt đầu tạo trình chiếu. Bấm vào nút “Tạo mới”:
Chỉ định chiều rộng (width) và chiều cao (height) cần thiết của slideshow:
Sau đó, bạn cần thêm hình ảnh. Điều này có thể được thực hiện bằng cách nhấp vào liên kết ở giữa cửa sổ hoặc vào nút trên thanh nút:
Sau khi thêm hình ảnh, bảng Chuyển tiếp sẽ hoạt động. Chuyển đến tab “Truyền”:
Và thêm các hiệu ứng chuyển tiếp mà bạn thích:
Nhấp vào “OK” và bạn sẽ được đưa đến trình chỉnh sửa trình chiếu. Chúng tôi đóng góp sự thay đổi cần thiết. Có ba nút ở trên cùng:
Nút "Làm mới" đầu tiên là cần thiết để làm mới trình chiếu sau khi thực hiện các thay đổi để xem những thay đổi này.
Nút thứ hai “PREVIEW” là cần thiết để xem trước trình chiếu trong trình duyệt.
Và nút cuối cùng “XUẤT BẢN” được sử dụng để tạo trình chiếu.
Đủ chương trình thú vị. Đặc biệt nếu bạn không có thời gian và kỹ năng thì chương trình này của bạn sẽ giảm bớt thời gian cần thiết để phát triển chương trình biểu diễn xe trượt tuyết cho trang web của bạn. Hoặc bạn có thể tạo một menu, sau đó chỉnh sửa mã theo ý muốn và thế là xong, trình chiếu của bạn đã sẵn sàng.
Khi tạo slide show để đăng lên website, tốt nhất nên sử dụng các slide có sẵn giải pháp phần mềm. Theo tôi, lựa chọn tốt nhất và dễ dàng nhất là sử dụng jQuery, một công cụ đặc biệt thư viện miễn phí kịch bản ( chương trình nhỏ bằng JavaScript). Các bài viết trước đã nói về công cụ phát triển web tuyệt vời này. Ví dụ xem bài viết Thư viện ảnh jQuery- đơn giản và đẹp! . Bây giờ, hãy sử dụng jQuery để tạo một trình chiếu trên trang web, được gọi là thanh trượt.
Để làm điều này, chúng tôi sẽ sử dụng plugin Slides, được tạo bởi lập trình viên Nathan Searles, giám đốc kĩ thuật xưởng thiết kế "The Brigade" ở Portland, Oregon, Hoa Kỳ. Một bước phát triển khác của ông đã được mô tả trong bài báo Thư viện ảnh cho một cửa hàng trực tuyến.
Plugin Slides rất dễ cài đặt, có một số tùy chọn để thay đổi hình ảnh trong trình chiếu và thường được sử dụng cho tiêu đề trang web. Một ví dụ về cách thanh trượt này hoạt động với cài đặt mặc định được hiển thị trong hình:
Như mọi khi, trước tiên hãy tạo thư mục script trên trang web. Sau đó, bạn cần tải xuống kho lưu trữ và giải nén nó vào thư mục đã tạo. Nó sẽ chứa hai tập lệnh jquery-1.8.3.min.js và jquery.cycle.all.min.js.
Tiếp theo, trong tiêu đề trang bên trong thẻ... chúng tôi chèn các dòng sau, cho biết đường dẫn đến tập lệnh và một đoạn javascript nhỏ xác định các tham số của trình chiếu:
$(".slideshow").cycle((
fx: "mờ dần"
});
});
.trình chiếu(
chiều rộng: 200px;
chiều cao: 135px;
lề: tự động;
}
Như bạn có thể thấy, cũng có một cách đơn giản quy tắc CSS, trong đó bạn cần chỉ định kích thước của cửa sổ cho hình ảnh của trình chiếu trong tương lai (chiều rộng - chiều cao). Đương nhiên, tất cả các hình ảnh phải có cùng cỡ. Nếu muốn, bạn có thể mở rộng các tùy chọn CSS bằng cách thêm, chẳng hạn như đường viền, hình nền, phần đệm và các thành phần khác cho hình ảnh trình chiếu của mình. Trong trường hợp này, bạn phải cho biết tổng kích thước, tức là hình ảnh cộng với các vết lõm và đường viền dọc theo chiều dài và chiều rộng mà bạn đặt.
Lưu ý quan trọng: nếu trang web của bạn sử dụng một số plugin jQuery thì việc di chuyển tệp jquery.js sẽ thuận tiện hơn (tốt nhất là phiên bản mới nhất) V thư mục gốcđể không phải tải nó xuống nhiều lần. Trong trường hợp này, dòng truy cập nó sẽ giống nhau đối với tất cả các plugin. Cụ thể, trong ví dụ của chúng tôi, nó diễn ra như thế này:
Không nên sử dụng nhiều trên một trang phiên bản khác nhau jQuery để chúng không xung đột với nhau. Đồng thời, hãy nhớ kiểm tra hoạt động của các plugin đã cài đặt phiên bản jQuery, vì không phải tất cả các phiên bản đều có thể hoán đổi cho nhau.
Bươc cuôi- vị trí của hình ảnh trên trang. Mọi thứ ở đây cũng đơn giản. Đặt hình ảnh bên trong một thẻ hoặc thẻ khác cho phép bạn đặt chiều rộng và chiều cao cũng như chỉ định class="slideshow" của nó. Trong ví dụ của chúng tôi, mã HTML cho thanh trượt trông như thế này:
Tại thời điểm này, quá trình tạo trình chiếu gần như hoàn tất và bạn có thể xem nó bằng cách mở trang của mình trong trình duyệt.
Đặt tùy chọn trình chiếu Trang trình bàyTrong trình chiếu đã tạo, bạn có thể đặt các loại khác nhau chuyển đổi giữa các khung bằng cách thay đổi javascript được đặt trong tiêu đề trang. Ngoài ra, bằng cách thay thế dòng sync:false trong tập lệnh bằng sync:true, bạn có thể xóa khoảng trắng khi thay đổi hình ảnh.
Thời lượng hiển thị hình ảnh có thể điều chỉnh tham số thời gian chờ và tốc độ - theo tham số tốc độ. Ví dụ: đây là một số tùy chọn trình chiếu phổ biến và tập lệnh tương ứng cần được chèn vào tiêu đề trang.
| 1. Giải thể (ví dụ của chúng tôi): $(document).ready(function() ( $(".slideshow").cycle(( fx: "fade", // kiểu chuyển tiếp tốc độ: 1000, // tốc độ thay đổi hình ảnh thời gian chờ: 1000 // thời lượng khung hình }); }); |
|
| 2. Xáo trộn: $(document).ready(function() ( $(".slideshow").cycle(( fx: "trộn", đồng bộ hóa: sai, tốc độ: 500 thời gian chờ: 5000 }); }); |
|
| 3. Thu phóng: $(document).ready(function() ( $(".slideshow").cycle(( fx: "thu phóng", đồng bộ hóa: sai }); }); |
|
| 4. Lật theo trục X hoặc Y: $(document).ready(function() ( $(".slideshow").cycle(( fx: "curtainX", // để xoay dọc theo trục Y - windowY đồng bộ hóa: sai }); }); |
|
| 5. Thu gọn theo chiều dọc: $(document).ready(function() ( $(".slideshow").cycle(( fx: "turnDown", // hướng có thể được đặt TurnUp, TurnLeft, TurnRight đồng bộ: đúng }); }); |
|
| 6. Cuộn (bù): $(document).ready(function() ( $(".slideshow").cycle(( fx:"scrollDown", // hướng dịch chuyển có thể được đặt ở dạng cuộn lên, cuộn sang trái, cuộn phải đồng bộ: đúng }); }); |
|
| 7. Làm mờ sang phải: $(document).ready(function() ( $(".slideshow").cycle(( fx: "che }); }); |
|
Đôi khi bạn cần đặt một số tùy chọn trình chiếu trên một trang của trang web, như được thực hiện trong bài viết này. Để làm điều này bạn chỉ cần cho biết các lớp khác nhau cho mỗi tùy chọn trong dòng $(".slideshow").cycle(( (xem mã trong bảng trên) và đừng quên viết vào Kích thước CSS cửa sổ cho mỗi lớp.
Một bản trình chiếu lớn, ngoạn mục sử dụng công nghệ jQuery.
2. plugin jQuery"Băng chuyền quy mô"
Trình chiếu có thể mở rộng bằng jQuery. Bạn có thể đặt kích thước trình chiếu phù hợp với mình nhất.
3. Plugin jQuery “slideJS”
Thanh trượt hình ảnh với mô tả văn bản.
4. Plugin “JSliderNews”
Khi bạn di chuột qua các mũi tên điều hướng, hình thu nhỏ hình tròn của trang chiếu tiếp theo sẽ xuất hiện.
6. Thanh trượt “Chu trình trình bày” jQuery đẹp mắt
Thanh trượt jQuery với chỉ báo tải hình ảnh. Tự động thay đổi slide được cung cấp.
7. Plugin jQuery “Thanh trượt thị sai”
Thanh trượt có hiệu ứng nền thể tích. Điểm nổi bật của thanh trượt này là chuyển động của nền, bao gồm nhiều lớp, mỗi lớp cuộn với ở tốc độ khác nhau. Kết quả là sự bắt chước hiệu ứng thể tích. Nó trông rất đẹp, bạn có thể tự mình nhìn thấy. Hiệu ứng được hiển thị mượt mà hơn trên các trình duyệt như Opera, Google Chrome,I E.
8. Thanh trượt jQuery mới, nhẹ “bxSlider 3.0”
Trên trang demo trong phần “ví dụ”, bạn có thể tìm thấy liên kết tới tất cả những lựa chọn khả thi sử dụng plugin này.
9. Thanh trượt hình ảnh jQuery, plugin “slideJS”
Một thanh trượt jQuery đầy phong cách chắc chắn có thể trang trí cho dự án của bạn.
10. Plugin trình chiếu jQuery “Easy Slides” v1.1
Dễ dàng sử dụng JQuery plugin tạo slideshow.
11. Plugin trượt jQuery
Plugin jQuery nhẹ với nhiều phiên bản khác nhau. Tự động thay đổi slide được cung cấp.
12. jQuery Thư viện CSS Với thay đổi tự động slide
Nếu khách truy cập không nhấp vào mũi tên “Chuyển tiếp” hoặc “Quay lại” trong một khoảng thời gian nhất định, thư viện sẽ bắt đầu cuộn tự động.
13. Thanh trượt jQuery “Nivo Slider”
Plugin rất chuyên nghiệp, chất lượng cao, nhẹ với mã hợp lệ. Có rất nhiều hiệu ứng chuyển tiếp slide khác nhau có sẵn.
14. Thanh trượt jQuery “MollySlider”
Thanh trượt mới. Thanh trượt jQuery với nhiều hiệu ứng thay đổi hình ảnh khác nhau.
15. Plugin jQuery “Slider²”
Thanh trượt nhẹ với bộ thay đổi trượt tự động.
16. Thanh trượt javascript mới
Thanh trượt với sự thay đổi hình ảnh tự động.
Plugin để thực hiện trình chiếu với tính năng thay đổi slide tự động. Có thể điều khiển màn hình bằng hình thu nhỏ của hình ảnh.
jQuery Thanh trượt CSS hình ảnh bằng plugin NivoSlider.
19. Thanh trượt jQuery “jShowOff”
Plugin để xoay nội dung. Ba tùy chọn để sử dụng: không có điều hướng (tự động thay đổi định dạng trình chiếu), điều hướng ở dạng nút, điều hướng ở dạng hình thu nhỏ.
20. Plugin “Danh mục hiệu ứng màn trập”
Plugin jQuery mới để thiết kế danh mục đầu tư của nhiếp ảnh gia. Thực hiện trong thư viện hiệu ứng thú vị thay đổi hình ảnh. Các bức ảnh nối tiếp nhau với hiệu ứng tương tự như hoạt động của màn trập ống kính.
21. Ánh sáng css css thanh trượt "TinySlider 2"
Triển khai thanh trượt hình ảnh với sử dụng javascript và CSS.
22. Thanh trượt tuyệt vời “Tinycircleslider”
Thanh trượt tròn đầy phong cách. Việc chuyển đổi giữa các hình ảnh được thực hiện bằng cách kéo thanh trượt có dạng vòng tròn màu đỏ xung quanh chu vi. Nó sẽ hoàn toàn phù hợp với trang web của bạn nếu bạn sử dụng các yếu tố hình tròn trong thiết kế của mình.
23. Thanh trượt hình ảnh với jQuery
Thanh trượt nhẹ “Bộ trượt”. Thanh trượt có nhiều kiểu dáng khác nhau: dọc và ngang. Cũng được thực hiện các loại khác nhauđiều hướng giữa các hình ảnh: sử dụng các nút “Chuyển tiếp” và “Quay lại”, sử dụng con lăn chuột, sử dụng nhấp chuột trên trang chiếu.
24. Phòng trưng bày tiểu cảnh “Slider Kit”
Phòng trưng bày "Bộ thanh trượt". Việc cuộn hình thu nhỏ được thực hiện theo cả chiều dọc và chiều ngang. Việc chuyển đổi giữa các hình ảnh được thực hiện bằng cách sử dụng: con lăn chuột, nhấp chuột hoặc di con trỏ lên hình thu nhỏ.
25. Thanh trượt nội dung jQuery “Bộ thanh trượt”
Dọc và thanh trượt ngang nội dung jQuery.
26. Trình chiếu jQuery “Bộ thanh trượt”
Trình chiếu với tính năng thay đổi slide tự động.
27. Thanh trượt CSS3 javascript chuyên nghiệp nhẹ
Một thanh trượt jQuery và CSS3 gọn gàng được tạo vào năm 2011.
Trình chiếu jQuery với hình thu nhỏ.
29. Trình chiếu jQuery đơn giản
Trình chiếu với các nút điều hướng.
30. Trình chiếu “Skitter” jQuery tuyệt vời
Plugin jQuery Skitter để tạo trình chiếu tuyệt đẹp. Plugin hỗ trợ 22 (!) loại khác nhau hiệu ứng hoạt hình khi thay đổi hình ảnh. Có thể hoạt động với hai tùy chọn điều hướng slide: sử dụng số slide và sử dụng hình thu nhỏ. Hãy chắc chắn xem bản demo, một phát hiện chất lượng rất cao. Công nghệ sử dụng: CSS, HTML, jQuery, PHP.
31. Trình chiếu “Lúng túng”
Trình chiếu chức năng. Các slide có thể là: hình ảnh đơn giản, hình ảnh có chú thích, hình ảnh có chú giải công cụ, video. Bạn có thể sử dụng mũi tên, liên kết số trang trình bày và phím trái/phải trên bàn phím để điều hướng. Trình chiếu có nhiều phiên bản: có và không có hình thu nhỏ. Để xem tất cả các tùy chọn, hãy nhấp vào liên kết Demo #1 - Demo #6 nằm ở đầu trang demo.
Rất thiết kế ban đầu thanh trượt hình ảnh giống như một cái quạt. Chuyển tiếp slide sinh động. Điều hướng giữa các hình ảnh được thực hiện bằng cách sử dụng mũi tên. Ngoài ra còn có lẫy chuyển số tự động có thể bật tắt bằng nút Play/Pause nằm phía trên.
Thanh trượt jQuery hoạt hình. Hinh nên tự động chia tỷ lệ khi cửa sổ trình duyệt được thay đổi kích thước. Đối với mỗi hình ảnh, một khối có mô tả sẽ xuất hiện.
34. Thanh trượt “Flux Slider” sử dụng jQuery và CSS3
Thanh trượt jQuery mới. Một số hiệu ứng hoạt hình thú vị khi thay đổi slide.
35. Plugin jQuery “jSwitch”
Thư viện jQuery hoạt hình.
Trình chiếu jQuery dễ dàng với khả năng thay đổi trang chiếu tự động.
37. Một phiên bản mới plugin "SlideDeck 1.2.2"
Thanh trượt nội dung chuyên nghiệp. Có các tùy chọn thay đổi trang trình bày tự động cũng như tùy chọn sử dụng con lăn chuột để di chuyển giữa các trang trình bày.
38. Thanh trượt jQuery “Sudo Slider”
Thanh trượt hình ảnh nhẹ sử dụng jQuery. Có rất nhiều lựa chọn thực hiện: thay đổi hình ảnh theo chiều ngang và chiều dọc, có và không có liên kết đến số slide, có và không có chú thích ảnh, nhiều hiệu ứng thay đổi hình ảnh khác nhau. Có chức năng thay đổi slide tự động. Bạn có thể tìm thấy liên kết tới tất cả các ví dụ triển khai trên trang demo.
39. CSS của jQuery 3 trình chiếu
Trình chiếu với hình thu nhỏ hỗ trợ chế độ thay đổi slide tự động.
40. Thanh trượt jQuery “Thanh trượt thông lượng”
Thanh trượt với nhiều hiệu ứng thay đổi hình ảnh.
41. Thanh trượt jQuery đơn giản
Thanh trượt hình ảnh phong cách sử dụng jQuery.
42. Trình chiếu jQuery “Craftyslide”
Trình chiếu jQuery HTML5 trải dài trên toàn bộ chiều rộng của màn hình kèm theo âm thanh.
Một trình chiếu jQuery đơn giản.
- Dịch
- Hướng dẫn
Nhờ CSS3, chúng ta có thể tạo hiệu ứng hoạt hình mà không cần sử dụng JavaScript, điều này sẽ giúp công việc của nhiều nhà phát triển trở nên dễ dàng hơn.
Chúng ta không nên lạm dụng CSS3 vì các trình duyệt cũ hơn không hỗ trợ tất cả các thuộc tính của nó. Dù sao đi nữa, tất cả chúng ta đều thấy tiềm năng của CSS3 và trong bài viết này, chúng ta sẽ thảo luận về cách tạo thanh trượt hình ảnh lặp lại chỉ bằng hoạt ảnh CSS3.
Mô tả các khái niệm cơ bản liên quan đến chuyển tiếp CSS3 và hoạt ảnh khung hình chính.
Tạo đánh dấu HTML cho thanh trượt hình ảnh.
Tạo một style sheet cho thanh trượt hiển thị.
Thêm hình ảnh động vào thanh trượt. Chúng ta sẽ xem xét các quá trình khác nhau diễn ra ở đây.
Thêm thanh tiến trình cho thanh trượt của chúng tôi.
Thêm chú giải công cụ để hiển thị tiêu đề.
Hiển thị chú giải công cụ khi di chuột bằng cách sử dụng chuyển tiếp CSS3
Hãy hiển thị thanh trượt đang hoạt động.
Những suy nghĩ cuối cùng.
Để sử dụng hướng dẫn này, bạn cần có hiểu biết cơ bản về CSS, cụ thể là chuyển tiếp CSS3 và hoạt ảnh khung hình chính.
Hoạt động với những điều này khái niệm đơn giản, chúng ta sẽ xem cách thực hiện thanh trượt chức năng hình ảnh.
Chúng ta có thể sử dụng bốn thuộc tính chuyển tiếp:
Thuộc tính chuyển tiếp
Chỉ định (các) tên Thuộc tính CSS, những chuyển tiếp nào sẽ được áp dụng.
Thời lượng chuyển tiếp
Xác định thời gian trong đó quá trình chuyển đổi sẽ xảy ra.
Chức năng chuyển tiếp thời gian
Xác định cách tính các giá trị chuyển tiếp trung gian.
Độ trễ chuyển tiếp
Xác định thời điểm quá trình chuyển đổi được kích hoạt.
Hiện tại, quá trình chuyển đổi CSS3 được hỗ trợ trong Safari 3.2+, Chrome, Firefox 4+, Opera 10.5+ và IE 10. Vì công nghệ này vẫn còn tương đối mới nên cần có tiền tố trình duyệt. Cú pháp giống nhau cho tất cả các trình duyệt ngoại trừ việc thêm các tiền tố cần thiết. Chúng tôi sẽ bỏ qua chúng trong bài viết này nhưng đừng quên đưa các tiền tố vào mã.
Hãy xem cách áp dụng một chuyển đổi đơn giản cho một liên kết:
a ( color: #000; transition-property: color; transition-duration: 0.7s; transition-timing-function: easy-in; transition-delay: 0.3s; ) a:hover ( color: #fff; )
Khi gán hoạt ảnh cho một phần tử, bạn cũng có thể sử dụng dạng viết tắt:
a ( color: #000; transition: color 0.7s easy-in 0.3s; ) a:hover ( color: #fff; )
Không giống như chuyển tiếp CSS, hoạt ảnh khung hình chính hiện chỉ được hỗ trợ trong trình duyệt WebKit, Firefox và sắp tới là IE 10. Các trình duyệt không được hỗ trợ sẽ đơn giản bỏ qua mã hoạt ảnh.
Thuộc tính animation có 8 thuộc tính phụ:
Độ trễ hoạt ảnh
Xác định thời điểm hoạt ảnh bắt đầu.
Hướng hoạt hình
Xác định xem hoạt ảnh có nên phát trong hướng ngược lại theo các chu kỳ luân phiên.
Thời lượng hoạt ảnh
Xác định khoảng thời gian mà hoạt ảnh cần để hoàn thành một vòng lặp.
Số lần lặp lại hoạt ảnh
Xác định số chu kỳ hoạt ảnh trước khi dừng.
Tên hoạt hình
Xác định tên của quy tắc trong @keyframes.
Trạng thái phát hoạt ảnh
Xác định xem hoạt ảnh đang phát hay tạm dừng.
Chế độ điền hoạt ảnh
Xác định cách hoạt ảnh CSS áp dụng kiểu cho mục tiêu trước và sau khi thực thi.
Hãy xem cách áp dụng hoạt hình đơn giảnđể ngăn chặn:
/* Phần tử mà chúng ta áp dụng hoạt ảnh. */ div (tên hoạt hình: di chuyển; thời lượng hoạt ảnh: 1s; chức năng định thời gian hoạt hình: dễ dàng ra vào; độ trễ hoạt hình: 0,5 giây; hoạt hình-lặp-đếm: 2; hướng hoạt hình: thay thế; - moz-animation-name: di chuyển; -moz-animation-duration: 1s; -moz-animation-timing-function: easy-in-out; -moz-animation-iteration-count : 2; -moz-animation-direction: thay thế; -webkit-animation-name: -webkit-animation-duration: delay: 0,5s; -webkit-animation-iteration-count: 2; -webkit-animation-direction: alternative) /* Mã hoạt hình. */ @keyframes di chuyển ( từ ( Transform: TranslateX(0); ) đến ( Transform: TranslateX(100px); ) ) @-moz-keyframes di chuyển ( từ ( -moz-transform: TranslateX(0); ) sang ( - moz-transform: TranslateX(100px); ) ) @-webkit-keyframes di chuyển ( từ ( -webkit-transform: TranslateX(0); ) sang ( -webkit-transform: TranslateX(100px); ) )
Chúng ta có thể sử dụng một tốc ký để đặt tất cả các thuộc tính hoạt hình cùng một lúc:
div ( hoạt hình: di chuyển 1 giây dễ dàng vào ra 0,5 giây 2 thay thế; -moz-animation: di chuyển 1 giây dễ dàng ra vào 0,5 giây 2 thay thế; -webkit-animation: di chuyển 1 giây dễ dàng vào ra 0,5 giây 2 thay thế; )
/* Hoạt ảnh từ 0% đến 100% */ @keyframes di chuyển ( 0% ( Transform: TranslateX(0); ) 100% ( Transform: TranslateX(100px); ) ) /* Hoạt ảnh với khung trung gian */ @keyframes di chuyển ( 0% ( biến đổi: TranslateX(0); ) 50% ( biến đổi: TranslateX(20px); ) 100% ( biến đổi: TranslateX(100px); ) )
W3C có rất nhiều tính năng hữu ích và thông tin chi tiết về "hoạt hình CSS3"
Cấu trúc cơ bản của thanh trượt của chúng ta Bây giờ chúng ta đã biết cách chuyển tiếp và hoạt ảnh hoạt động, hãy xem cách tạo thanh trượt chỉ bằng CSS3. Bản phác thảo này cho thấy hoạt ảnh sẽ hoạt động như thế nào:
Như bạn có thể thấy, thanh trượt sẽ là nơi hiển thị hình ảnh.
Hoạt ảnh rất đơn giản: hình ảnh đi theo một hướng nhất định, thay đổi các thuộc tính "top", "z-index" và "opacity".
Hãy chuyển thẳng sang phần đánh dấu HTML để tạo thanh trượt.
-
báo sư tử -
sư tử -
Người trượt tuyết -
rú lên -
Tắm nắng
Id chia = "thanh trượt"
Đây là vùng chứa thanh trượt chính. Nó không có chức năng cụ thể nhưng chúng ta cần nó để tạm dừng hoạt ảnh.
Id chia = "mặt nạ"
Chúng tôi sẽ sử dụng khối này để ẩn mọi thứ xảy ra bên ngoài thanh trượt. Ngoài ra, mặt nạ cho phép chúng tôi hiển thị nội dung của thanh trượt.
Li id="first" class="firstanimation"
Mỗi phần tử danh sách có một ID và một lớp. ID hiển thị chú giải công cụ và lớp được gắn với hoạt ảnh sắp diễn ra.
Lớp Div="tooltip"
Khối này hiển thị tiêu đề của hình ảnh. Bạn có thể thay đổi nó tùy theo nhu cầu của mình, chẳng hạn như bằng cách làm cho nó có thể nhấp vào hoặc thêm một mô tả ngắn.
Lớp Div="thanh tiến trình"
Khối này chứa một chức năng hiển thị tiến trình của hoạt ảnh.
Bây giờ là lúc tạo tệp CSS.
3. Kiểu CSS Hãy tạo cấu trúc cơ bản thanh trượt. Nó sẽ có cùng kích thước với hình ảnh. Thuộc tính border sẽ hữu ích cho việc tạo đường viền xung quanh hình ảnh./* Cấu trúc thanh trượt */ #slider ( nền: #000; đường viền: 5px Solid #eaeaea; box-shadow: 1px 1px 5px rgba(0,0,0,0.7); chiều cao: 320px; chiều rộng: 680px; lề: 40px tự động 0; vị trí hiển thị: tương đối)
Lớp "mặt nạ" sẽ ẩn tất cả các phần tử nằm bên ngoài thanh trượt. Chiều cao của nó phải là chiều cao bằng nhau thanh trượt.
/* Ẩn mọi thứ bên ngoài thanh trượt */ #mask ( tràn: ẩn; chiều cao: 320px; )
Cuối cùng, để sắp xếp danh sách hình ảnh, chúng tôi sẽ sử dụng "position: tuyệt đối" và "top: -325px" để tất cả hình ảnh được đặt bên ngoài thanh trượt.
/* Danh sách hình ảnh */ #slider ul ( lề: 0; phần đệm: 0; vị trí: tương đối; ) #slider li ( width: 680px; /* Chiều rộng hình ảnh */ chiều cao: 320px; /* Chiều cao hình ảnh */ vị trí: tuyệt đối ; trên cùng: -325px /* Vị trí ban đầu(bên ngoài thanh trượt) */ list-style: none; )
Với vài dòng mã này, chúng tôi đã tạo được đánh dấu thanh trượt. Bây giờ chúng ta chỉ cần thêm hoạt ảnh.
4. Hoạt hình khung hình chính CSS3
Trước khi bắt đầu với hoạt ảnh, chúng ta cần xác định một số tham số để có được hoạt ảnh phù hợp.
Như chúng ta đã biết, tổng thời lượng của hoạt ảnh sẽ là 25 giây, nhưng chúng ta cần biết sẽ có bao nhiêu khung hình chính trong 1 giây.
Hãy giải một loạt thao tác sẽ cho chúng ta số lượng khung chính xác và tổng thời lượng của hoạt ảnh. Dưới đây là các tính toán:
Chúng tôi xác định tổng số hình ảnh trong thanh trượt: 5;
Chúng tôi xác định thời lượng hoạt ảnh cho mỗi hình ảnh: 5 giây;
Chúng tôi xác định tổng thời lượng của hoạt ảnh bằng cách nhân tổng số hình ảnh với thời lượng của mỗi hình ảnh: 5 hình ảnh × 5 giây = 25 giây;
Chúng tôi tính toán sẽ có bao nhiêu khung hình chính (phần trăm) trong một giây.
Chia tổng số khung hình chính cho toàn bộ thời lượng của hoạt ảnh: 100%/25 = 4%,
Có 4 khung hình chính trong 1 giây, hay 1 giây bằng 4% ảnh động.
Với tất cả phép toán này đã được thực hiện, giờ đây chúng ta có thể áp dụng hoạt ảnh CSS cho thanh trượt. Chúng ta có thể đặt hoạt ảnh vào một vòng lặp vô hạn vì... Đối với mỗi hình ảnh, một hình ảnh động riêng biệt sẽ được đặt, độc lập với các hình ảnh khác.
#slider li.firstanimation ( hoạt hình: chu kỳ 25s tuyến tính vô hạn; ) #slider li.secondanimation ( hoạt hình: Cycletwo 25s tuyến tính vô hạn; ) #slider li.thirdanimation ( hoạt hình: chu kỳ 25s tuyến tính vô hạn; ) #slider li.fourthanimation ( hoạt hình: vô hạn tuyến tính chu kỳ 25s ) #slider li.fifthanimation ( hoạt hình: vô hạn tuyến tính chu kỳ 25s; )
Khi các thuộc tính hoạt ảnh đã được chỉ định, chúng ta phải sử dụng các khung hình chính để đặt hoạt ảnh chuyển động.
Theo nguyên tắc này, chúng ta có thể kết nối tất cả các hoạt ảnh với nhau, ngay cả khi chúng độc lập với nhau. Điều này sẽ cho chúng ta một vòng lặp vô hạn.
Tôi đã thêm thuộc tính "độ mờ" và "chỉ mục z" để làm cho quá trình chuyển đổi từ hình ảnh này sang hình ảnh tiếp theo trở nên hấp dẫn hơn.
Như bạn có thể thấy trong mã, hoạt ảnh đầu tiên có nhiều khung hình chính hơn các hoạt ảnh khác. Lý do là vì khi khởi chạy thanh trượt, hình ảnh đầu tiên sẽ nhường chỗ cho hình ảnh thứ hai, nhưng khi hình ảnh cuối cùng kết thúc hoạt ảnh, hình ảnh đầu tiên phải có thêm khung hình chính để tránh tạo ra sự gián đoạn giữa các vòng hoạt ảnh.
Đây là tất cả mã cho hình ảnh động:
/* Hoạt ảnh */ Chu kỳ @keyframes ( 0% ( top: 0px; ) /* Khi thanh trượt bắt đầu, hình ảnh đầu tiên đã hiển thị */ 4% ( top: 0px; ) /* Vị trí bắt đầu */ 16% ( top : 0px; độ mờ:1; z-index:0; ) /* Từ 4% đến 16% (3 giây) hình ảnh hiển thị */ 20% ( top: 325px; độ mờ: 0; z-index: 0; ) /* từ 16% đến 20% (1 giây) đầu ra hình ảnh */ 21% ( top: -325px; opacity: 0; z-index: -1; ) /* Trở về vị trí ban đầu bên ngoài mặt nạ */ 92 % ( top: -325px; độ mờ: 0; z-index: 0; ) 96% ( top: -325px; độ mờ: 0; ) /* Từ 96% đến 100% (1 giây) – đầu vào */ 100%( top: 0px; độ mờ: 1 ; ) ) @keyframes Cycletwo ( 0% ( top: -325px; độ mờ: 0; ) /* Vị trí bắt đầu bên ngoài mặt nạ */ 16% ( trên cùng: -325px; độ mờ: 0; ) / * Bắt đầu chuyển động ở mức 16% * / 20% ( top: 0px; opacity: 1; ) 24% ( top: 0px; opacity: 1; ) /* Từ 20% đến 24% (trong vòng 1 giây) - input */ 36% ( top: 0px; opacity: 1; z-index: 0; ) /* Từ 24% đến 36% (3 giây) hình ảnh hiển thị */ 40% ( top: 325px; opacity: 0; z-index : 0; ) /* Từ 36% đến 40% (1 giây) - thoát */ 41% ( top: -325px; độ mờ: 0; chỉ số z: -1; ) /* Trở về vị trí ban đầu */ 100%( top: -325px; opacity: 0; z-index: -1; ) ) @keyframes Cycletwo ( 0% ( top: -325px; opacity: 0; ) 36% ( trên cùng: -325px; độ mờ: 0; ) 40% ( trên cùng: 0px; độ mờ: 1; ) 44% ( trên cùng: 0px; độ mờ: 1; ) 56% ( trên cùng: 0px; độ mờ: 1; ) 60% ( trên cùng : 325px; độ mờ: 0; chỉ mục z: 0; ) 61% ( trên cùng: -325px; độ mờ: 0; chỉ mục z: -1; ) 100%( trên cùng: -325px; độ mờ: 0; chỉ mục z: -1; ) ) @keyframes Cyclefour ( 0% ( top: -325px; độ mờ: 0; ) 56% ( top: -325px; độ mờ: 0; ) 60% ( top: 0px; độ mờ: 1; ) 64% ( trên cùng: 0px; độ mờ: 1; ) 76% ( trên cùng: 0px; độ mờ: 1; chỉ mục z: 0; ) 80% ( trên cùng: 325px; độ mờ: 0; chỉ mục z: 0; ) 81% ( trên cùng: -325px; độ mờ: 0; chỉ mục z: -1; ) 100%( trên cùng: -325px; độ mờ: 0; chỉ mục z: -1; ) ) @keyframes Cycleyear ( 0% ( trên cùng: -325px; độ mờ: 0; ) 76% ( trên cùng: -325px; độ mờ: 0; ) 80% ( trên cùng: 0px; độ mờ: 1; ) 84% ( trên cùng: 0px; độ mờ: 1; ) 96% ( trên cùng: 0px; độ mờ: 1 ; chỉ mục z: 0; ) 100%( trên cùng: 325px; độ mờ: 0; chỉ mục z: 0; ) )
Sau khi tạo hoạt ảnh, chúng ta cần thêm thanh tiến trình để hiển thị thời lượng của mỗi hoạt ảnh.
Quá trình hoạt ảnh cho thanh tiến trình cũng giống như đối với thanh trượt. Hãy tự tạo thanh tiến trình:
/* Thanh tiến trình */ .progress-bar ( vị trí: tương đối; top: -5px; chiều rộng: 680px; chiều cao: 5px; nền: #000; hoạt hình: mở rộng đầy đủ và 25 giây dễ dàng vô hạn; )
Đừng sợ cú pháp. Có chức năng tương tự như “từ đến”. Bạn có thể thấy rằng các khung hình chính thiết lập sự xuất hiện và biến mất của từng hình ảnh.
/* Thanh trạng thái hoạt ảnh */ @keyframes fullexpand ( /* Hoạt ảnh đứng yên trong các khung hình chính này */ 0%, 20%, 40%, 60%, 80%, 100% ( width: 0%; opacity: 0; ) / * Trong những cái này - nó trở nên sống động */ 4%, 24%, 44%, 64%, 84% ( chiều rộng: 0%; độ mờ: 0,3; ) /* Trong những cái này - nó lấp đầy trơn tru */ 16%, 36 %, 56%, 76%, 96% ( width: 100%; opacity: 0.7; ) /* Tại các khung hình chính này, thanh tiến trình đã hoàn thành đường dẫn của nó */ 17%, 37%, 57%, 77%, 97% ( width: 100%; opacity : 0.3; ) /* Tại các khung hình chính này, thanh tiến trình sẽ biến mất và sau đó tiếp tục lặp lại */ 18%, 38%, 58%, 78%, 98% ( width: 100%; opacity: 0; ) )
Thanh trượt ít nhiều đã hoàn thiện. Hãy thêm một vài chi tiết để làm cho nó hoạt động hiệu quả hơn. Chúng tôi sẽ chèn chú giải công cụ cho tiêu đề hình ảnh sẽ hiển thị khi di chuột.
Kiểu chú giải công cụ:
#slider .tooltip ( nền: rgba(0,0,0,0.7); chiều rộng: 300px; chiều cao: 60px; vị trí: tương đối; dưới cùng: 75px; trái: -320px; ) #slider .tooltip h1 ( color: #fff ; cỡ chữ: 24px; chiều cao dòng: 60px;
Ở đây, chúng tôi chỉ hiển thị tiêu đề hình ảnh nhưng bạn có thể làm tương tự cho bất kỳ văn bản, liên kết hoặc bất kỳ thứ gì khác mà bạn muốn.
7. Chuyển tiếp CSS3
Chúng ta đã biết cách áp dụng chuyển tiếp CSS3 cho các phần tử, bây giờ hãy tạo chúng cho các chú giải công cụ.
Nếu bạn còn nhớ, chúng tôi đã thêm ID vào mỗi danh sách ("thứ nhất", "thứ hai", v.v.) để khi di chuột, mỗi chú giải công cụ sẽ được liên kết với hình ảnh riêng biệt, nhưng tất cả lời nhắc không xuất hiện cùng một lúc.
#slider .tooltip ( … transition: tất cả 0,3 giây dễ dàng vào ra; ) #slider li#first: di chuột .tooltip, #slider li#second: di chuột .tooltip, #slider li#third: di chuột .tooltip, #slider li#fourth: di chuột .tooltip, #slider li#fifth: di chuột .tooltip ( left: 0px; )
8. Tạm dừng và khởi động lại
Để cho phép người dùng dừng thanh trượt xem nội dung, chúng ta phải dừng hoạt ảnh khi di chuột. Chúng tôi cũng sẽ phải dừng hoạt ảnh của thanh tiến trình.
#slider: di chuột li, #slider: di chuột .progress-bar ( animation-play-state: đã tạm dừng; )
9. Minh họa Cuối cùng chúng ta cũng đã kết thúc bài học. Thanh trượt hiện đã sẵn sàng 100%!(). Nó hoạt động trong Firefox 5+, Safari 4+ và Google Chrome, cũng như iPhone và iPad. Bạn cũng có thể tải xuống kho lưu trữ ().
Cảm ơn Massimo Righi về những hình ảnh của anh ấy.10. Kết luận Hiệu ứng này rất ấn tượng, nhưng phải thừa nhận rằng thanh trượt này không linh hoạt lắm. Ví dụ: để thêm nhiều hình ảnh hơn, bạn cần chỉnh sửa tất cả các khung hình chính. CSS3 có rất nhiều tiềm năng, nhưng nó cũng có những hạn chế và đôi khi JavaScript được ưa chuộng hơn, tùy thuộc vào đối tượng mục tiêu.
Thanh trượt này có một số tính năng thú vị, chẳng hạn như tạm dừng (khi di chuột) và liên kết độc đáo dành cho hình ảnh cho phép người dùng tương tác với thanh trượt. Nếu cần hỗ trợ đầy đủ tất cả các trình duyệt thì không thể sử dụng CSS3, vì vậy nên sử dụng JavaScript. Thật không may, hoạt ảnh CSS3 có nhiều hạn chế. TRÊN khoảnh khắc này, do thiếu linh hoạt nên chúng tôi không thể sử dụng rộng rãi. Tôi hy vọng bài viết này khuyến khích bạn khám phá CSS3 sâu hơn.
Hãy chia sẻ suy nghĩ của bạn trong các ý kiến.
Từ người dịch:
Nếu bạn tìm thấy bất kỳ lỗi dịch thuật nào, vui lòng hủy đăng ký tin nhắn cá nhân. Cảm ơn.
Thẻ: Thêm thẻ
