tieptk/demo
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

up

Browse Source
This commit is contained in:
Tieptk
2024-11-25 22:09:34 +07:00
parent 9677b33ee1
commit 39a17331b8
1 changed files with 41 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
img.html
View File

@@ -35,144 +35,100 @@
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 */
transition: opacity 0.8s ease, transform 0.8s ease;
transform: translateY(100%);
/* Mặc định item bắt đầu ở dưới */
}
.item img {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
}
.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%);
opacity: 0;
transform: translateY(-170%);
}
</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 class="item active"><img src="https://www.tncstore.vn/media/brand/22.png" alt="Logo 1"></div>
<div class="item"><img src="https://www.tncstore.vn/media/brand/23.jpg" alt="Logo 1"></div>
<div class="item"><img src="https://www.tncstore.vn/media/brand/78.jpg" 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 class="item active"><img src="https://www.tncstore.vn/media/brand/13.png" alt="Logo 1"></div>
<div class="item"><img src="https://www.tncstore.vn/media/brand/64.png" alt="Logo 1"></div>
<div class="item"><img src="https://www.tncstore.vn/media/brand/32.png" 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 class="item active"><img src="https://www.tncstore.vn/media/brand/11.png" alt="Logo 1"></div>
<div class="item"><img src="https://www.tncstore.vn/media/brand/28.png" alt="Logo 1"></div>
<div class="item"><img src="https://www.tncstore.vn/media/brand/17.png" 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 class="item active"><img src="https://www.tncstore.vn/media/brand/156.jpg" alt="Logo 1"></div>
<div class="item"><img src="https://www.tncstore.vn/media/brand/145.jpg" alt="Logo 1"></div>
<div class="item"><img src="https://www.tncstore.vn/media/brand/136.jpg" 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
const staggerDelay = 120;
// 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')];
if (items.length === 0) return; // Xử lý itemBig trống
let activeItem = itemBig.querySelector('.item.active');
if (!activeItem && items.length > 0) {
if (!activeItem) {
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 });
}
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.classList.remove('active'); // Loại bỏ lớp active sau khi chuyển đổi
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
itemBigs.forEach((itemBig, index) => {
animateItemBig(itemBig, index * staggerDelay);
});
// Gọi đệ quy để giữ cho vòng quay hoạt động vô thời hạn
setTimeout(moveToNextSet, 2000); // Điều chỉnh độ trễ nếu cần
}
moveToNextSet();
}
setTimeout(() => {
startCarousel();
}, 2000)
setTimeout(startCarousel, 2000); // Độ trễ ban đầu
</script>
</html>