Tôi chắc rằng bạn đã thấy Thanh trượt hình ảnh tự động hoặc Hiệu ứng trình chiếu trên nhiều trang web. Trình chiếu là phần trình bày một loạt hình ảnh tĩnh trên màn hình chiếu hoặc thiết bị hiển thị điện tử, thường theo trình tự được sắp xếp trước. Những thay đổi của hình ảnh có thể là tự động và đều đặn hoặc chúng có thể được điều khiển thủ công bởi người thuyết trình hoặc người xem
Hôm nay trong blog này mình sẽ chia sẻ thanh trượt hình ảnh tự động. Trong thanh trượt này có 5 hình ảnh và các hình ảnh này sẽ tự động thay đổi sau một khoảng thời gian nhất định. Tôi đã sử dụng JavaScript để thay đổi hình ảnh sau một khoảng thời gian nhất định. Nếu bạn không biết JavaScript thì bạn có thể xem video này nơi tôi đã tạo Thanh trượt hình ảnh tự động trong HTML & CSS
Video hướng dẫn Thanh trượt hình ảnh tự động trong HTML CSS
Trong video, bạn đã thấy thanh trượt hình ảnh tự động này trông như thế nào và tôi hy vọng bạn đã hiểu các mã cơ bản đằng sau việc tạo thanh trượt hình ảnh này. Như bạn đã biết, tôi đã sử dụng JavaScript để hoàn thành hiệu ứng trình chiếu này. Sử dụng thuộc tính CSS @keyframes, bạn cũng có thể tạo loại hiệu ứng trình chiếu hình ảnh này.
Nếu bạn thích thanh trượt hình ảnh tự động này và muốn lấy mã nguồn. Bạn có thể dễ dàng sao chép mã từ các hộp mã sao chép nhất định cũng như bạn có thể tải xuống các tệp mã nguồn. Bạn có thể sử dụng thanh trượt hình ảnh này trên các trang web và dự án của mình
Thanh trượt hình ảnh tự động trong HTML CSS [Mã nguồn]
Để tạo chương trình Tự động này [Hiệu ứng trình chiếu ảnh]. Đầu tiên bạn cần tạo 2 File một File HTML và một File CSS. Sau khi tạo các tệp này, chỉ cần dán các mã sau vào tệp của bạn. Đầu tiên, tạo một tệp HTML với tên của chỉ mục. html và dán mã đã cho vào tệp HTML của bạn. Hãy nhớ rằng, bạn phải tạo một tệp với. phần mở rộng html
Automatic Image Slider in HTML CSS | CodingNepalvar indexValue = 0; function slideShow[]{ setTimeout[slideShow, 2500]; var x; const img = document.querySelectorAll["img"]; for[x = 0; x < img.length; x++]{ img[x].style.display = "none"; } indexValue++; if[indexValue > img.length]{indexValue = 1} img[indexValue -1].style.display = "block"; } slideShow[];
Thứ hai, tạo một tệp CSS với tên kiểu. css và dán các mã đã cho vào tệp CSS của bạn. Hãy nhớ rằng, bạn phải tạo một tệp với. phần mở rộng css
body{ margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; min-height: 100vh; } .content{ height: 400px; width: 750px; overflow: hidden; box-shadow: 1px 1px 15px rgba[0,0,0,0.4]; } .content .images{ height: 100%; width: 100%; } .images img{ height: 100%; width: 100%; }
Vậy là xong, bây giờ bạn đã tạo thành công Thanh trượt hình ảnh tự động trong HTML CSS & JavaScript. Nếu mã của bạn không hoạt động hoặc bạn gặp phải bất kỳ lỗi/sự cố nào, vui lòng tải xuống các tệp mã nguồn từ nút tải xuống đã cho. Nó miễn phí và một. zip sẽ được tải xuống sau đó bạn giải nén nó
Xin chào các bạn, hôm nay tôi sẽ hướng dẫn các bạn cách tạo thanh trượt hình ảnh tự động trong Html css, trong bài viết này, bạn sẽ tìm hiểu cách tạo một slideshow CSS tuyệt vời với hiệu ứng mờ dần
Trình chiếu hình ảnh là tùy chọn tốt nhất để thể hiện nhiều hình ảnh trên một trang web. Trên trang web, thanh trượt hình ảnh tự động phát có giá trị riêng. trong bài viết này, chúng ta sẽ tạo một thanh trượt hình ảnh tự động đáp ứng đơn giản bằng cách sử dụng html và css
Slideshow trong Html là gì?
Nói tóm lại, trình chiếu là cách trình bày hình ảnh hoặc văn bản trượt liên tục từ trang chiếu này sang trang chiếu khác để hiển thị nội dung của nó
Cách tạo thanh trượt hình ảnh tự động trong Html Css từng bước
Bước 1 — Tạo một dự án mới
Trong bước này, chúng ta cần tạo một thư mục dự án mới và các tệp [chỉ mục. html, phong cách. css] để tạo thanh trượt hình ảnh tự động tuyệt vời trong html css. Trong bước tiếp theo, chúng tôi sẽ bắt đầu tạo cấu trúc của trang web
Bạn cũng có thể thích những điều này
- GSAP Animated Carousel Slider
- Thanh trượt đàn accordion với hoạt ảnh nền
Bước 2 — Thiết lập cấu trúc cơ bản
Trong bước này, chúng tôi sẽ thêm mã HTML để tạo cấu trúc cơ bản của dự án
How to create an awesome awesome CSS slideshow
Đây là cấu trúc cơ sở của hầu hết các trang web sử dụng HTML
Thêm đoạn mã sau vào trong thẻ
Bước 3 - Thêm kiểu cho các lớp
Trong bước này, chúng ta sẽ thêm các kiểu vào lớp phần Kiểu bên trong. tập tin css
* { padding: 0; margin: 0; box-sizing: border-box; } .slowFade { display: flex; align-items: flex-start; background: #fff; height: 100vh; overflow: hidden; position: relative; } .slowFade .slide img { position: absolute; min-width: 100%; min-height: 100%; height: auto; background: #000; -webkit-backface-visibility: hidden; backface-visibility: hidden; opacity: 0; transform: scale[1.5] rotate[15deg]; -webkit-animation: slowFade 32s infinite; animation: slowFade 32s infinite; } .slowFade .slide:nth-child[3] img { -webkit-animation-delay: 8s; animation-delay: 8s; } .slowFade .slide:nth-child[2] img { -webkit-animation-delay: 16s; animation-delay: 16s; } .slowFade .slide:nth-child[1] img { -webkit-animation-delay: 24s; animation-delay: 24s; } @keyframes slowFade { 25% { opacity: 1; transform: scale[1] rotate[0]; } 40% { opacity: 0; } } @-webkit-keyframes slowFade { 25% { opacity: 1; transform: scale[1] rotate[0]; } 40% { opacity: 0; } }
#Kết quả cuối cùng
Nếu bạn muốn mã nguồn, bạn có thể tải xuống từ nút bên dưới
Tải xuống mã
Bộ sưu tập thanh trượt hình ảnh tự động tốt nhất
Trong bộ sưu tập này, tôi đã liệt kê 10 ví dụ trình chiếu hoạt hình hàng đầu. Kiểm tra các hiệu ứng trượt hình ảnh tuyệt vời này như. #1Thanh trượt hình ảnh CSS đáp ứng, #2Thanh trượt hình ảnh CSS thuần túy, #3Thanh trượt hình ảnh CSS mờ dần hoạt hình, và nhiều hơn nữa
#1 Thanh trượt hình ảnh CSS đáp ứng
Thanh trượt hình ảnh CSS đáp ứng, được phát triển bởi Dudley Storey. Hơn nữa, bạn có thể tùy chỉnh nó theo mong muốn và nhu cầu của bạn
Tác giả. Dudley StoreyTạo trên. Tháng Chín 22, 2013Làm bằng. HTML & CSSLiên kết giới thiệu. Mã nguồn / DemoTags. Thanh trượt hình ảnh CSS đáp ứng#2 Thanh trượt hình ảnh CSS thuần túy
Pure CSS Image Slider, được phát triển bởi alphardex. Hơn nữa, bạn có thể tùy chỉnh nó theo mong muốn và nhu cầu của bạn
#3 Thanh trượt hình ảnh mờ dần CSS hoạt hình
Thanh trượt hình ảnh làm mờ CSS hoạt hình, được phát triển bởi Rüdiger Alte. Hơn nữa, bạn có thể tùy chỉnh nó theo mong muốn và nhu cầu của bạn
Tác giả. Rüdiger AlteĐược tạo vào. Ngày 6 tháng 3 năm 2019Làm bằng. HTML & CSSLiên kết giới thiệu. Mã nguồn / DemoTags. Thanh trượt hình ảnh làm mờ CSS hoạt hình#4 Thanh trượt hình ảnh CSS có điều hướng
CSS Image Slider With Nav, được phát triển bởi Oskari Heinonen. Hơn nữa, bạn có thể tùy chỉnh nó theo mong muốn và nhu cầu của bạn
Tác giả. Oskari Heinonen Tạo trên. 9 Tháng Ba, 2016Làm bằng. HTML[Pug] & CSS[SCSS]Liên kết Demo. Mã nguồn / DemoTags. Thanh trượt hình ảnh CSS với Nav#5 Trình chiếu crossfading CSS thuần túy
Trình chiếu crossfading CSS thuần túy do Mark Lee phát triển. Hơn nữa, bạn có thể tùy chỉnh nó theo mong muốn và nhu cầu của bạn
Tác giả. Mark LeeĐược tạo trên. Ngày 9 tháng 10 năm 2013Làm bằng. HTML & CSSLiên kết giới thiệu. Mã nguồn / DemoTags. trình chiếu xen kẽ#6 Hiển thị mờ CSS
CSS Fadeshow do Alexander Erlandsson phát triển. Hơn nữa, bạn có thể tùy chỉnh nó theo mong muốn và nhu cầu của bạn
Tác giả. Alexander ErlandssonĐược tạo trên. May 12, 2016Làm bằng. Liên kết trình diễn HTML & CSS[SCSS]. Mã nguồn / DemoTags. Làm mờ CSS#7 Thư viện trình chiếu với CSS
Thư viện trình chiếu có CSS, được phát triển bởi Roko C. Buljan. Hơn nữa, bạn có thể tùy chỉnh nó theo mong muốn và nhu cầu của bạn
Tác giả. Roko C. BuljanTạo trên. Tháng Giêng 19, 2016Làm bằng. HTML & CSSLiên kết giới thiệu. Mã nguồn / DemoTags. Thư viện trình chiếu#8 Trình chiếu CSS đơn giản nhất
Trình chiếu CSS đơn giản nhất do Ginobi-Wan phát triển. Hơn nữa, bạn có thể tùy chỉnh nó theo mong muốn và nhu cầu của bạn
Tác giả. Ginobi-WanĐược tạo trên. Tháng Tư 4, 2018Làm bằng. Liên kết trình diễn HTML & CSS[SCSS]. Mã nguồn / DemoTags. Trình chiếu CSS đơn giản nhất#9 Trình chiếu động sử dụng HTML & CSS
Trình chiếu động sử dụng HTML & CSS, được phát triển bởi Waterplea. Hơn nữa, bạn có thể tùy chỉnh nó theo mong muốn và nhu cầu của bạn
Tác giả. WaterpleaTạo trên. 24 Tháng mười 2016Làm bằng. HTML & CSS[Ít hơn]Liên kết Demo. Mã nguồn / DemoTags. Trình chiếu động#10 Trình chiếu đàn accordion CSS3
Trình chiếu CSS3 Accordion do George Nemes phát triển. Hơn nữa, bạn có thể tùy chỉnh nó theo mong muốn và nhu cầu của bạn
Làm cách nào để tự động phát thanh trượt trong CSS?
Pure CSS slider
[with Autoplay at the beginning]
.