176 lines
6.1 KiB
HTML
176 lines
6.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Logo Carousel</title>
|
|
<style>
|
|
/* Wrapper cho carousel */
|
|
.carousel-wrapper {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
height: 180px;
|
|
margin: 50px 0;
|
|
}
|
|
|
|
.carousel {
|
|
display: flex;
|
|
gap: 20px;
|
|
}
|
|
|
|
.item-big {
|
|
position: relative;
|
|
width: 120px;
|
|
height: 60px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.item {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
opacity: 0;
|
|
/* Mặc định ẩn tất cả các item */
|
|
transition: opacity 1s ease, transform 1s ease;
|
|
/* Thêm transition cho transform */
|
|
transform: translateY(100%);
|
|
/* Mặc định item bắt đầu ở dưới */
|
|
}
|
|
|
|
.item.active {
|
|
opacity: 1;
|
|
/* Hiển thị item khi có lớp active */
|
|
transform: translateY(0);
|
|
/* Item sẽ di chuyển lên vị trí gốc */
|
|
}
|
|
|
|
.item.previous {
|
|
opacity: 0.3;
|
|
/* Làm mờ các item trước */
|
|
transform: translateY(-150%);
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
|
|
|
|
<!-- Wrapper cho carousel -->
|
|
<div class="carousel-wrapper">
|
|
<div class="carousel">
|
|
<!-- Các logo ban đầu -->
|
|
<div class="item-big">
|
|
<div class="item active">
|
|
<img src="https://via.placeholder.com/120x60?text=Logo+1" alt="Logo 1">
|
|
</div>
|
|
<div class="item">
|
|
<img src="https://via.placeholder.com/120x60?text=Logo+5" alt="Logo 1">
|
|
</div>
|
|
<div class="item">
|
|
<img src="https://via.placeholder.com/120x60?text=Logo+10" alt="Logo 1">
|
|
</div>
|
|
</div>
|
|
<div class="item-big">
|
|
<div class="item active">
|
|
<img src="https://via.placeholder.com/120x60?text=Logo+1" alt="Logo 1">
|
|
</div>
|
|
<div class="item">
|
|
<img src="https://via.placeholder.com/120x60?text=Logo+5" alt="Logo 1">
|
|
</div>
|
|
<div class="item">
|
|
<img src="https://via.placeholder.com/120x60?text=Logo+10" alt="Logo 1">
|
|
</div>
|
|
</div>
|
|
<div class="item-big">
|
|
<div class="item active">
|
|
<img src="https://via.placeholder.com/120x60?text=Logo+1" alt="Logo 1">
|
|
</div>
|
|
<div class="item">
|
|
<img src="https://via.placeholder.com/120x60?text=Logo+5" alt="Logo 1">
|
|
</div>
|
|
<div class="item">
|
|
<img src="https://via.placeholder.com/120x60?text=Logo+10" alt="Logo 1">
|
|
</div>
|
|
</div>
|
|
<div class="item-big">
|
|
<div class="item active">
|
|
<img src="https://via.placeholder.com/120x60?text=Logo+1" alt="Logo 1">
|
|
</div>
|
|
<div class="item">
|
|
<img src="https://via.placeholder.com/120x60?text=Logo+5" alt="Logo 1">
|
|
</div>
|
|
<div class="item">
|
|
<img src="https://via.placeholder.com/120x60?text=Logo+10" alt="Logo 1">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
</body>
|
|
<script>
|
|
function startCarousel() {
|
|
const itemBigs = document.querySelectorAll('.item-big');
|
|
const staggerDelay = 120; // Độ trễ tính bằng mili giây giữa mỗi itemBig
|
|
|
|
// Hàm để bắt đầu hoạt hình của một itemBig cụ thể
|
|
function animateItemBig(itemBig, delay) {
|
|
setTimeout(() => {
|
|
const items = [...itemBig.querySelectorAll('.item')];
|
|
let activeItem = itemBig.querySelector('.item.active');
|
|
if (!activeItem && items.length > 0) {
|
|
activeItem = items[0];
|
|
activeItem.classList.add('active');
|
|
}
|
|
|
|
if (!activeItem) return; // Xử lý itemBig trống
|
|
|
|
const activeItemIndex = items.indexOf(activeItem);
|
|
const nextItemIndex = (activeItemIndex + 1) % items.length;
|
|
|
|
if (nextItemIndex !== activeItemIndex) {
|
|
const nextItem = items[nextItemIndex];
|
|
activeItem.classList.remove('active');
|
|
activeItem.classList.add('previous');
|
|
nextItem.classList.add('active');
|
|
activeItem.addEventListener('transitionend', function handler() {
|
|
this.classList.remove('previous');
|
|
this.removeEventListener('transitionend', handler);
|
|
}, { once: true });
|
|
}
|
|
}, delay);
|
|
}
|
|
|
|
|
|
// Bắt đầu hoạt hình với độ trễ xen kẽ.
|
|
itemBigs.forEach((itemBig, index) => {
|
|
animateItemBig(itemBig, index * staggerDelay);
|
|
});
|
|
|
|
// Hàm để xử lý chuyển đổi sang nhóm itemBig tiếp theo.
|
|
function moveToNextSet() {
|
|
setTimeout(() => {
|
|
// Logic để chuyển sang nhóm itemBig tiếp theo. Điều này có thể liên quan đến logic phức tạp hơn tùy thuộc vào cấu trúc của bạn
|
|
// Để đơn giản, tôi chỉ lặp lại tất cả các itemBig một lần nữa. Bạn cần điều chỉnh điều này.
|
|
itemBigs.forEach((itemBig, index) => {
|
|
animateItemBig(itemBig, index * staggerDelay);
|
|
});
|
|
}, 2000); // độ trễ 2 giây trước khi chuyển sang nhóm tiếp theo
|
|
}
|
|
|
|
moveToNextSet();
|
|
|
|
}
|
|
|
|
startCarousel();
|
|
|
|
</script>
|
|
|
|
</html> |