Tạo Slideshow ảnh Chỉ Dùng CSS - Viblo
Có thể bạn quan tâm
Thiết kế một slideshow sẽ khiến website của bạn trông đẹp mắt hơn và dễ dàng chuyển tại nội dung đến người xem, tuy nhiên việc sử dụng các slideshow bằng javacritp hay flash sẽ làm cho trang của bạn trở nên nặng nề và load chậm hơn. Chỉ bằng việc sử dụng CSS, chúng ta hoàn toàn có thể tạo ra 1 slideshow cực kỳ chuyên nghiệp mà cách làm lại rất đơn giản.
Markup
<div class="slider-container"> <div class="menu"> <label for="slide-dot-1"></label> <label for="slide-dot-2"></label> <label for="slide-dot-3"></label> </div> <input id="slide-dot-1" type="radio" name="slides" checked> <div class="slide slide-1"></div> <input id="slide-dot-2" type="radio" name="slides"> <div class="slide slide-2"></div> <input id="slide-dot-3" type="radio" name="slides"> <div class="slide slide-3"></div> </div>
-
Dùng khối menu để hiển thị ra phần navigation của slider, bao gồm các chấm tròn nhỏ, mỗi chấm tròn được markup bằng 1 thẻ label. Khi click vào các label này thì các thẻ input tương ứng với nó sẽ được checked. Một lưu ý là các thẻ input này phải để cùng name.
-
Phần hình ảnh được markup bằng
và dùng background-image để đưa ảnh làm nền. Các div này sẽ được đặt dưới các thẻ input radio để có thể sử dụng được sự kiện input:checked -
Tóm lại: click vào label -> input được checked -> thẻ div (chứa ảnh) ngay bên dưới input thực hiện animation
CSS
html, body { width: 100%; height: 100%; margin: 0; padding: 0; } .slider-container{ height: 100%; width: 100%; position: relative; overflow: hidden; text-align: center; } .menu { position: absolute; left: 0; z-index: 900; width: 100%; bottom: 0; } .menu label { cursor: pointer; display: inline-block; width: 16px; height: 16px; background: #fff; border-radius: 50px; margin: 0 .2em 1em; transition: all .3s ease; &:hover { background: red; } } .slide { width: 100%; height: 100%; position: absolute; top: 0; left: 100%; z-index: 10; padding: 8em 1em 0; background-size: cover; background-position: 50% 50%; transition: left 0s .75s; } [id^="slide"]:checked + .slide { left: 0; z-index: 100; transition: left .65s ease-out; } .slide-1 { background-image: url("https://source.unsplash.com/t7YycgAoVSw/1600x900"); } .slide-2 { background-image: url("https://source.unsplash.com/11H1SSVcIxc/1600x900"); } .slide-3 { background-image: url("https://source.unsplash.com/OlZ1nWLEEgM/1600x900"); }Demo
Từ khóa » Hiệu ứng Chuyển ảnh Trong Html
-
Tạo Hiệu Ứng Chuyển Động Reveal Bằng HTML CSS
-
Cách Tạo Slideshow Chuyển ảnh - Cần Xem
-
Hiệu ứng Chuyển ảnh Bằng Javascript - YouTube
-
10 Thư Viện CSS Cung Cấp Những Hiệu ứng Chuyển động Hình ảnh ...
-
Bài 10: Hiệu ứng Slide - Phần Html Và Css - Góc Làm Web
-
Cách Tạo Hiệu ứng Chuyển động Cho Phần Tử HTML - Web Cơ Bản
-
[CSS] Bài 15 - Cách Tạo Các Hiệu Ứng Chuyển Tiếp - Viblo
-
Hướng Dẫn Tạo Slideshow Với HTML, CSS Và Javascript - Freetuts
-
Viết Hiệu ứng Chuyển Slide Kết Hợp Chuyển động Animation
-
Hiệu ứng Chuyển đổi Transition Trong CSS3
-
Hiệu ứng Chuyển động Trong CSS3
-
35 Hiệu ứng Hình ảnh CSS Thực Sự Thú Vị - Creativos Online
-
Tạo Hiệu Ứng Chuyển Động Reveal Bằng HTML CSS - Blog ...
-
Hướng Dẫn Làm Slide ảnh Chuyển động - Devmaster