Trình chiếu bằng phần tử canvas HTML5. Giải pháp CSS3 hiệu quả cho thiết kế trang sơ khai. Hiệu ứng làm mờ CSS3 jQuery
1. Trình chiếu jQuery tuyệt vời “Trình chiếu đàn hồi”Trình chiếu với hình thu nhỏ và mô tả slide. Nhiều hiệu ứng thay đổi hình ảnh. Có hai lựa chọn: với thay đổi tự động trượt hoặc không có.
2. Thanh trượt CSS3 thuần túy
Thanh trượt hình ảnh đẹp mắt với mô tả và trình thay đổi slide tự động. Khi bạn di chuột qua hình ảnh, quá trình quay sẽ dừng lại. Điểm dừng đi kèm với hiệu ứng CSS3.
3. plugin jQuery"Photorama"
Thanh trượt thư viện đẹp.
4. Hiệu ứng văn bản “Hiệu ứng kiểu chữ”
Các hiệu ứng thú vị khi làm việc với kiểu chữ bằng CSS3 và jQuery. 7 hiệu ứng thú vị khác nhau.
5. Plugin hộp tối
Một plugin nhẹ, nhỏ để hiển thị hình ảnh trong khối bật lên.
6. Hiệu ứng di chuột với jQuery
Hiệu ứng vòng tròn khi di chuột.
7. Các nút CSS3 jQuery hoạt hình
Rất nhiều hiệu ứng CSS3 hoạt hình khác nhau để tạo các nút tuyệt vời cho trang web của bạn. Chỉ có hiệu ứng di chuột thực sự thú vị.
8. HTML5 jQuery thay đổi hình nền
Khi bạn nhấp vào hình thu nhỏ hinh nên thay thế nhau bằng hiệu ứng mờ ảo. Khi bạn thay đổi kích thước cửa sổ trình duyệt, hình nền sẽ thay đổi kích thước.
8. Hiệu ứng kiểu chữ tương tác
Hấp dẫn hiệu ứng văn bản sử dụng HTML5 và jQuery (4 hiệu ứng khác nhau). Di chuột qua văn bản để xem hiệu ứng.
9. Chú thích hình ảnh bật lên
Nhiều hiệu ứng di chuột động khác nhau để triển khai chú thích cho hình ảnh bật lên.
10. Plugin “Portamento”
Khối nổi trong jQuery. Luôn hiển thị khi cuộn xuống trang.
11. Trình cuộn nội dung
Plugin jQuery để hiển thị cuộn theo khối có kích thước cố định. Một số phong cách.
Việc triển khai jQuery theo chiều ngang và cuộn dọc nội dung trong một khối có kích thước cố định.
13. Plugin Thanh cuộn nhỏ
Plugin jQuery để triển khai theo chiều dọc và cuộn ngang nội dung.
14. Plugin “jScrollPane”
Cuộn nội dung trên nhiều trình duyệt trong một khối.
15. Khối nổi “Cuộn theo dõi”
Plugin để tạo khối sẽ cuộn khi cuộn trang. Có thể sửa một khối bằng cách nhấp vào một liên kết.
16. Thanh bên bật lên
Các bảng có thể thu vào trên tất cả các mặt của trang web.
17. Giải pháp CSS3 hiệu quả cho thiết kế trang sơ khai
Ba tùy chọn để triển khai các hiệu ứng hoạt hình để tạo sơ khai “Trang web đang được phát triển”.
17. Hiệu ứng khi cuộn trang
Một hiệu ứng đáng kinh ngạc khi cuộn trang: các phần tử di chuyển ra khỏi khu vực phía sau màn hình hoặc ngược lại, ẩn phía sau khu vực màn hình. Giải pháp này hoàn hảo để sử dụng trên các trang web danh mục đầu tư, để trình bày hiệu quả về các dự án đã hoàn thành kèm theo mô tả ngắn gọn.
19. Plugin “fancyBox 2”
Một phiên bản mới, được viết lại hoàn toàn của plugin Fancybox nổi tiếng để hiển thị hình ảnh và nội dung khác trong cửa sổ phương thức.
20. Thư viện tối thiểu
Plugin chức năng với bộ lớn các tính năng: thư viện, băng chuyền, thanh trượt, menu, trình mở rộng, các nút hoạt hình.
21. Mã tin tức jQueryCông cụ quay vòng tin tức trên trang web. Các tin nhắn nối tiếp nhau và xuất hiện bằng cách sử dụng hiệu ứng thú vị máy đánh chữ. Bạn có thể ngừng thay đổi tin tức bằng cách nhấp vào nút “Tạm dừng”. Bạn có thể sử dụng các mũi tên để di chuyển từ tin nhắn này sang tin nhắn khác.
22. Hình ảnh thích ứng
Hình ảnh có thể mở rộng để hiển thị trên thiêt bị di động. Kích thước hình ảnh phụ thuộc vào kích thước cửa sổ. Công nghệ được sử dụng: javascript và PHP5.
23. vScroller
Thanh cuộn jQuery, CSS3 dọc. Có thể điều chỉnh tốc độ cuộn và thời gian trễ.
24. Menu thả xuống đa cấp “jQSimpleMenu”
Một plugin jQuery mới để tạo menu thả xuống ngang nhiều cấp độ trên trang web.
25. "jsCarousel 2.0"
Plugin jQuery để triển khai băng chuyền dọc và ngang.
26. Công cụ quay vòng “Tin tức động”
Plugin jQuery để hiển thị đẹp tin mới nhất từ nguồn cấp dữ liệu RSS.
27. Menu hoạt hình
Hiệu ứng hoạt hình khi di chuột qua một mục menu.
28. Hiệu ứng văn bản động
Ba ví dụ ngoạn mục khi làm việc với thuộc tính CSS “background-clip: text”. Hiệu ứng CSS3 không hoạt động trong các trình duyệt cũ hơn.
29.CSS3 hiệu ứng jQuery mơ hồ
Khi bạn di chuột qua một khối, khối đó sẽ phóng to và các khối văn bản còn lại sẽ mờ trong nền.
Thực hiện các khối tương tự như ghi chú bằng văn bản.
34. Hộp đèn
Hiển thị nội dung đa phương tiện theo khối pop-up: hình ảnh, video, Flash.
35. Bộ rung jQuery
Mở rộng diện tích hình vuông.
36. Mô tả hình ảnh CSS3 jQuery
Plugin “Thư viện nội dung cửa trượt dựa trên” để triển khai mô tả hình ảnh bật lên. Khi bạn di con trỏ lên bất kỳ hình ảnh nào được trình bày, một Mô tả ngắn có sự tham khảo bài viết đầy đủ. Khi di chuột: hiệu ứng nâng cửa gara.
37. Hiệu ứng “Trước và Sau” Plugin jQuery “uCompare”
Bằng cách kéo rèm, bạn có thể so sánh hai hình ảnh xếp chồng lên nhau. Lý tưởng cho những trường hợp khi bạn cần hiển thị hai phiên bản của một nội dung nào đó trên trang: trước và sau.
- 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, 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ẻ
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.
Hôm nay chúng tôi sẽ hướng dẫn bạn cách tạo trình chiếu toàn màn hình có nền chỉ bằng mã CSS. Chúng tôi sẽ sử dụng nhiều hiệu ứng khác nhau để chuyển tiếp giữa các hình ảnh và chúng tôi cũng sẽ làm cho tiêu đề xuất hiện thông qua hoạt ảnh được triển khai trong CSS.
Những hình ảnh này được Mark Sebastian () vui lòng gửi và được chia sẻ dưới thỏa thuận cấp phép Creative Commons Ghi công-Chia sẻ tương tự 2.0 Generic.
Xin lưu ý rằng hiệu ứng này sẽ chỉ hoạt động trong các trình duyệt được trang bị .
Cách trình bày
Ở đây, chúng tôi sẽ sử dụng danh sách không có thứ tự cho bản trình chiếu và cũng sẽ thêm một khoảng thời gian cho mỗi hình ảnh và một phần có tiêu đề:
Span sẽ là các phần tử có hình nền được đặt trong slideshow.
Mã CSS
Hãy bắt đầu với một danh sách không có thứ tự. Nó sẽ được sửa và chúng tôi sẽ kéo dài nó trên toàn bộ khung nhìn. Chúng tôi cũng sử dụng phần tử giả :after để đặt họa tiết ở đầu hình ảnh:
Cb-trình chiếu,
.cb-slideshow:sau (
vị trí: cố định;
chiều rộng: 100%;
chiều cao: 100%;
trên cùng: 0px;
trái: 0px;
chỉ số z: 0;
}
.cb-slideshow:sau (
nội dung: "";
nền: lặp lại url trong suốt (../images/pattern.png) trên cùng bên trái;
}
Chúng ta sẽ sử dụng kết cấu chấm lặp lại, nhưng bạn cũng có thể sử dụng thứ gì đó giống như sự chuyển màu hơi trong suốt được triển khai bằng CSS.
Một Span chứa hình ảnh từ bản trình chiếu sẽ có định vị tuyệt đối và các tham số chiều rộng và chiều cao của nó sẽ được đặt thành 100%. Vì chúng tôi có một số bên trong Văn bản bổ sung, chúng ta sẽ làm cho màu của nó trong suốt một chút vì chúng ta không cần chú ý đến nó. Tham số kích thước nền sẽ được đặt thành che - điều này sẽ cho phép chúng tôi chắc chắn rằng hình nền bao phủ toàn bộ khu vực của phần tử và do đó, cả khung nhìn. Mức mật độ được đặt thành 0. Tiếp theo chúng ta sẽ thay đổi thông số này thông qua hoạt hình:
Cb-trình chiếu li nhịp (
chiều rộng: 100%;
chiều cao: 100%;
vị trí: tuyệt đối;
trên cùng: 0px;
trái: 0px;
màu sắc: trong suốt;
kích thước nền: bìa;
vị trí nền: 50% 50%;
lặp lại nền: không có;
độ mờ: 0;
chỉ số z: 0;
hoạt hình: imageAnimation 36s tuyến tính vô hạn 0s;
}
Hoạt ảnh cho mỗi nhịp sẽ kéo dài 36 giây và chạy số lượng vô hạn một lần. Nhưng chúng ta hãy xem xét chi tiết sau, nhưng bây giờ chúng ta hãy thiết kế phần có tiêu đề:
Cb-trình chiếu li div (
chỉ số z: 1000;
vị trí: tuyệt đối;
dưới cùng: 30px;
trái: 0px;
chiều rộng: 100%;
căn chỉnh văn bản: giữa;
độ mờ: 0;
màu sắc: #fff;
hoạt hình: titleAnimation 36s tuyến tính vô hạn 0s;
}
.cb-trình chiếu li div h3 (
họ phông chữ: "BebasNeueRegular", "Arial Narrow", Arial, sans-serif;
cỡ chữ: 240px;
phần đệm: 0;
chiều cao dòng: 200px;
}
Hoạt ảnh cho phần tiêu đề cũng sẽ kéo dài 36 giây.
Bây giờ chúng ta sẽ xác định hình nền cho tất cả các khoảng thời gian, cũng như độ trễ trong hoạt ảnh để mỗi hình ảnh và tiêu đề trong bản trình chiếu xuất hiện sau điểm trước đó 6 giây:
Cb-trình chiếu li:nth-child(1) span (
hình nền: url(../images/1.jpg)
}
.cb-slideshow li:nth-child(2) span (
hình nền: url(../images/2.jpg);
độ trễ hoạt hình: 6s;
}
.cb-slideshow li:nth-child(3) span (
hình nền: url(../images/3.jpg);
độ trễ hoạt hình: 12 giây;
}
.cb-slideshow li:nth-child(4) span (
hình nền: url(../images/4.jpg);
độ trễ hoạt hình: 18 giây;
}
.cb-slideshow li:nth-child(5) span (
hình nền: url(../images/5.jpg);
độ trễ hoạt hình: 24 giây;
}
.cb-slideshow li:nth-child(6) span (
hình nền: url(../images/6.jpg);
độ trễ hoạt hình: 30 giây;
}
Cb-trình chiếu li:nth-child(2) div (
độ trễ hoạt hình: 6s;
}
.cb-trình chiếu li:nth-child(3) div (
độ trễ hoạt hình: 12 giây;
}
.cb-trình chiếu li:nth-child(4) div (
độ trễ hoạt hình: 18 giây;
}
.cb-trình chiếu li:nth-child(5) div (
độ trễ hoạt hình: 24 giây;
}
.cb-trình chiếu li:nth-child(6) div (
độ trễ hoạt hình: 30 giây;
}
Bây giờ chúng ta chuyển sang phần hoạt ảnh trong slideshow. Mỗi nhịp sẽ có một hình ảnh động kéo dài 36 giây. Trong 36 giây này, chúng tôi sẽ thay đổi mức mật độ từ 0 thành 1 (điều này sẽ xảy ra ở khoảng 8% tiến trình hoạt ảnh). Và khi đó giá trị của mức mật độ này sẽ kéo dài tới 17% tiến độ. Khi đạt tiến độ 25%, mức mật độ sẽ lại giảm xuống 0 và duy trì như vậy cho đến cuối cùng.
Tại sao chính xác những giá trị này? Chúng tôi chỉ muốn mỗi hình ảnh hiển thị trong 6 giây và chúng tôi biết rằng ở cuối vòng lặp, chúng tôi muốn hình ảnh đầu tiên được hiển thị lại. Chúng tôi chỉ có 6 hình ảnh, đó là lý do tại sao chúng tôi sẽ cần 36 giây cho toàn bộ vòng lặp. Bây giờ chúng ta cần phân phối mức mật độ phù hợp. Biết rằng hình ảnh thứ hai của chúng ta sẽ bắt đầu thay đổi sau 6 giây, chúng ta cần biết tỷ lệ phần trăm mà hoạt ảnh này sẽ thực hiện trong trường hợp của hình ảnh đầu tiên. Chia 6 cho 36 chúng ta được 0,166... nghĩa là ngưỡng khung hình của chúng ta sẽ là 16%. Bây giờ, vì chúng tôi không muốn hình ảnh luôn biến mất, nên chúng tôi xác định ngưỡng tiếp theo - ở giữa, sẽ bằng một nửa so với những gì chúng tôi đã tính toán, tức là 8%. Đây là khoảng thời gian chúng ta cần hiển thị hình ảnh đầy đủ và nó sẽ bắt đầu mờ dần ở mức 17% và biến mất hoàn toàn ở mức 25%.
@keyframes imageAnimation (
0% ( độ mờ: 0; chức năng định thời gian hoạt hình: dễ dàng; )
8% (độ mờ: 1; chức năng định giờ hoạt hình: dễ dàng;)
17% (độ mờ: 1)
25% (độ mờ: 0)
100% (độ mờ: 0)
}
Điều tương tự cũng phải được thực hiện với tiêu đề, chỉ có điều bạn cần làm cho nó biến mất nhanh hơn một chút. Do đó, mức mật độ sẽ về 0 ở mức 19% tiến độ:
@keyframes titleAnimation (
0% (độ mờ: 0)
8% (độ mờ: 1)
17% (độ mờ: 1)
19% (độ mờ: 0)
100% (độ mờ: 0)
}
Đối với các trình duyệt không hỗ trợ hoạt ảnh, trong Trường hợp như vậy chúng tôi chỉ hiển thị hình ảnh cuối cùng từ trình chiếu bằng cách đặt mức mật độ của khoảng thành 1:
Không có cssanimations .cb-slideshow li span(
độ mờ: 1;
}
Lớp không có cssanimations được thêm bằng Modernizr.
Bây giờ chúng ta cũng hãy quan tâm đến kích thước phông chữ cho các tiêu đề khi kích thước khung nhìn sẽ nhỏ hơn. Chúng tôi sử dụng truy vấn phương tiện để làm cho phông chữ nhỏ hơn ở một độ rộng nhất định:
Màn hình @media và (độ rộng tối đa: 1140px) (
.cb-trình chiếu li div h3 (cỡ chữ: 140px)
}
Màn hình @media và (độ rộng tối đa: 600px) (
.cb-trình chiếu li div h3 (cỡ chữ: 80px)
}
Và thế là xong với việc phát triển một phiên bản trình chiếu đơn giản hóa! Bây giờ hãy xem cách chúng ta có thể cải thiện quá trình chuyển đổi.
Ví dụ về hoạt ảnh thay thế
Bây giờ chúng ta có thể thử nghiệm một số hoạt ảnh để hiển thị hình ảnh và tiêu đề.
Hoạt ảnh sau đây liên quan đến việc phóng to hình ảnh và sau đó xoay nó một chút:
@keyframes imageAnimation (
0% {
độ mờ: 0;
chức năng định thời gian hoạt hình: dễ dàng;
}
8% {
độ mờ: 1;
biến đổi: tỷ lệ (1,05);
chức năng hoạt hình-thời gian: dễ dàng;
}
17% {
độ mờ: 1;
}
25% {
độ mờ: 0;
biến đổi: tỷ lệ (1.1) xoay (3deg);
}
100% (độ mờ: 0)
}
Tiêu đề sẽ đi cùng với bên phải(chúng ta sẽ cần thay đổi căn chỉnh văn bản của tiêu đề sang phải) và sau đó làm mờ nó đi, di chuyển sang trái:
@keyframes titleAnimation (
0% {
độ mờ: 0;
biến đổi: dịchX(200px);
}
8% {
độ mờ: 1;
biến đổi: dịchX(0px);
}
17% {
độ mờ: 1;
biến đổi: dịchX(0px);
}
19% {
độ mờ: 0;
biến đổi: dịchX(-400px);
}
25% (độ mờ: 0)
100% (độ mờ: 0)
}
Đừng quên rằng có thể có nhiều lựa chọn, điều chính yếu là đừng ngại thử nghiệm!
Thử nghiệm
Tại đây bạn có thể thấy một số tùy chọn để sử dụng hoạt ảnh.
Bằng cách cấm sử dụng JavaScript Bạn sẽ không thể nhìn thấy ví dụ thú vị trình chiếu!
Trình chiếu cho trang webMọi quản trị viên web đều phải có khả năng tạo và thêm trình chiếu vào trang web. Việc sử dụng thanh trượt cực kỳ phổ biến và chúng có thể được tìm thấy trên hầu hết mọi tài nguyên hiện đại.
Và đây không phải là sự trùng hợp ngẫu nhiên!
**Ghi chú. Không giống như các trang khác trong phần jQuery, tôi đã viết các tập lệnh cần thiết trực tiếp vào mã HTML của chính trang này.
Ngoài ra, điều rất quan trọng (!), chúng hoạt động với tôi từ một phiên bản jQuery khác, muộn hơn phiên bản tôi sử dụng ở đây.
Nếu tôi sử dụng phiên bản jquery v.1.10.1.min ở đó thì v.1.8.3.min ở đây
Tuy nhiên, hãy tìm hiểu thêm về điều này và mọi thứ khác theo thứ tự.
Chuẩn bị trình chiếuCông việc tạo và cài đặt slide show trên website thường bao gồm 4 công đoạn chính.
Chuẩn bị hình ảnh cho thanh trượt1. Ảnh được chọn. Điều quan trọng là họ phải Một cỡ. Bạn cần phải đo lường chúng một cách cẩn thận.
TRONG trong trường hợp này, chụp ảnh làm sẵn từ các tài liệu bổ sung kèm theo khóa đào tạo. Cái nào? Về điều này ở đây: "Liên kết" (mở trong một cửa sổ mới).
2. Vẽ nó bằng Photoshop hình ảnh đồ họa phong cách trượt "TRUYỀN HÌNH". Nó có thể không phải là nguyên bản, nhưng nó rất thuận tiện.
Điều chính là kích thước của khu vực xem bạn cần Nhiều thêm một chút về chiều rộng và chiều cao so với bản vẽ đã chuẩn bị.
Hình ảnh được viết bằng mã HTML chính xác đến nơi đó, nơi chúng sẽ được hiển thị trong tương lai. Các tập lệnh sau đó có thể được viết ở bất kỳ nơi nào thuận tiện. Tôi thường để lại một khoảng trống cho chúng ngay bên dưới các bức ảnh. Cấu trúc hợp lý hơn.
Tôi đã đặt các hình ảnh bên trong thẻ p, thẻ này tôi đặt chiều rộng và chiều cao theo kiểu CSS và chỉ định class="slideshow" của nó. Và đoạn văn có chúng được đặt bên trong một thẻ div chung, trên nền đó tôi treo một hình ảnh đồ họa đã chuẩn bị sẵn của thanh trượt ( TRUYỀN HÌNH*). Anh ấy đã được cấp class="slider_fon" .
Hơn thế nữa, Chỉ dành cho anh, để dỡ trang, tôi đã kết nối một biểu định kiểu bên ngoài và làm mọi thứ cho ảnh bên trong mã HTML
.
Tái bút** Hành động cuối cùng KHÔNG cần thiết chút nào. Nó chỉ thuận tiện hơn cho tôi. Cấu trúc trang bằng cách nào đó trông hợp lý hơn.
TRONG Quy tắc CSSđã chỉ định kích thước cửa sổ cho hình ảnh sẽ xuất hiện trong thanh trượt (chiều rộng - chiều cao). Đương nhiên, tất cả các hình ảnh phải có cùng kích thước.
Nếu muốn, tôi có thể mở rộng các tham số CSS bằng cách thêm khung, nền, phần đệm và các phần tử khác. Tuy nhiên, tôi nghĩ điều này sẽ không cần thiết.
Tuy nhiên, nếu bạn muốn thực hiện việc này, hãy chỉ ra các kích thước CHUNG, đó là: hình ảnh + TẤT CẢ các điểm thụt lề và đường viền đã đặt.
Kết nối tập lệnhTôi khuyên bạn nên truy cập trang trợ giúp do tôi tự tạo khi tìm hiểu công nghệ jQuery. Nó thực sự sẽ giúp bạn tìm ra nó.
Đã mở cửa cho cô ấy truy cập chung: "CHỌN trong jQuery" (mở trong một cửa sổ mới) .
Như mọi khi, lần đầu tiên tôi tạo thư mục js trên trang web. Sau đó, tôi tải xuống các tập lệnh cần thiết cho trình chiếu (kho lưu trữ) và giải nén nó vào thư mục này. Nó chứa hai tệp tập lệnh: lõi jquery-1.8.3.min.js và plugin jquery.cycle.all.min.js.
Để đề phòng, tôi cũng đã thêm tệp điều khiển myscripts11.js của mình vào đó. Tuy nhiên, ở đây nó không hữu ích với tôi khi khởi chạy và trình chiếu một trình chiếu. Trừ khi tôi kiểm tra với họ kết nối chính xác thư mục đã tạo.
Nhưng... ...cứ để vậy đi. Bạn không bao giờ biết tôi sẽ muốn làm gì trong tương lai với các thanh trượt được đặt ở đây. Nói ngắn gọn, "... đoàn tàu bọc thép của chúng tôi luôn ở bên lề".
Hơn nữa. Bên trong thẻ... Tôi đã chèn những dòng nơi tôi viết ra đường dẫn đến tập lệnh. Tôi có chúng: , và plugin: .
Tôi đã nhận xét tệp kiểm soát (“dự phòng”) của riêng mình.
Và điều cuối cùng -
Tất nhiên, những người truy cập trang web của tôi với trình thông dịch JavaScript bị tắt trong trình duyệt của họ sẽ không thể xem trình chiếu.
Họ sẽ nhìn thấy những bức ảnh khi chúng được viết bằng mã HTML, tức là. trong một cột, cái khác.
Tôi đã tạo một dòng cảnh báo cho họ và chèn nó vào thẻ… .
Đây rồi! Trình chiếu đã được tạo. Tất cả những gì còn lại là cấu hình các thông số của nó: tốc độ thay đổi hình ảnh, cách hiển thị chúng, v.v.
Đặt tùy chọn trình chiếuNhư tôi đã viết ở trên (trong ghi chú**), tôi đã viết trực tiếp các tập lệnh cần thiết vào mã HTML của chính trang này.
Trong trình chiếu được tạo trên trang web của tôi, tôi đã áp dụng các cài đặt "mặc định".
Nói chung, có thể dễ dàng thiết lập các kiểu chuyển tiếp thú vị, khác nhau giữa các hình ảnh bằng cách thay đổi javascript được đặt trong nội dung trang.
Ví dụ: bằng cách thay đổi dòng sync: false thành sync: true trong tập lệnh, bạn có thể xóa khoảng trắng khi thay đổi hình ảnh.
Lưu ý quan trọng!
Các phiên bản jQuery khác nhau có thể xung đột với nhau nếu chúng nằm trên cùng một trang.
Hãy chắc chắn (!) kiểm tra hoạt động của các plugin bằng phiên bản đã cài đặt jQuery vì không phải phiên bản nào cũng tương thích!
Ví dụ**
Trên các trang khác trong phần jQuery sử dụng thư viện, phiên bản jquery v.1.10.1.min . Vì vậy, nó hiện đại hơn v.1.8.3.min, từ đó đúng cách(!) công việc thanh trượt trình chiếuĐây.
Plugin jquery.cycle.all.min.js với nó KHÔNG HOẠT ĐỘNG!!!
(đã xác minh)
Tuy nhiên, đừng buồn. Tất cả nằm trong tay bạn!
Trong phần "Hữu ích" trên trang web của tôi (mở trong cửa sổ mới), bạn sẽ tìm thấy thử nghiệm(!) một bộ đầy đủ các tập lệnh cần thiết để tạo một trình chiếu như vậy trên trang web của bạn. (Tất nhiên là MIỄN PHÍ!)
Trong tiểu mục này tôi sẽ không mô tả chi tiết tất cả các bước để tạo một trình chiếu. Về cơ bản, chúng hoàn toàn giống nhau.
Thậm chí còn đơn giản hơn. Không cần phải vẽ Hình nền thanh trượt trong photoshop. Thậm chí chia bàn Kiểu CSS không cần.
Nếu bạn muốn đăng Các tùy chọn khác nhau trình chiếu trên một trang của trang web, như tôi đã làm ở đây ( xem bên dưới), chỉ định các lớp khác nhau cho từng tùy chọn trong dòng tập lệnh $(" .trình chiếu").xe đạp((
P.S.* Đừng quên đưa nó vào CSS kích thước cửa sổ cho mỗi lớp, tuy nhiên, nếu bạn sử dụng biểu định kiểu. Tôi không cần nó.
Trước tiên, hãy xem các bức vẽ tĩnh, tương tự như vậy, tôi đã lấy từ khóa đào tạo (Cái nào? Tôi sẽ nhắc lại liên kết: “Liên kết”) và đăng chúng ở đây để so sánh.
Họ đây rồi. Những người tham gia tương lai của slide show thứ 7!
Xem màn trình diễn của họ dưới đây.
Tôi sẽ chỉ cho bạn một số loại thanh trượt phổ biến. Mình chèn chúng vào bảng tổng hợp cho dễ xem.
Bên trái là tên của hiệu ứng và giải thích ngắn gọn, nếu cần. Bên phải là một ví dụ.
| 1. Hòa tan (“phai”): Tương tự như ví dụ trên với xe máy. |
|
| 2. Trộn bài: |
|
| 3. Thu phóng: |
|
| 4. Lật dọc theo các trục ("rèmX" hoặc Y): Đã cài đặt "rèmX" tại đây. |
|
| 5. Thu gọn theo chiều dọc (“turnDown”): Ở đây nó thu gọn lại nhưng bạn có thể đặt các kiểu chuyển tiếp khác: TurnUP, Left, Right. |
|
| 6. Cuộn (“scrollDown”): Thiên kiến. Ở đây tôi đã cài đặt nó, nhưng ngoài ra bạn có thể đặt: cuộn lên, trái, phải. |
