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

104
img.html
View File

@@ -35,144 +35,100 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
opacity: 0; opacity: 0;
/* Mặc định ẩn tất cả các item */ transition: opacity 0.8s ease, transform 0.8s ease;
transition: opacity 1s ease, transform 1s ease;
/* Thêm transition cho transform */
transform: translateY(100%); 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 { .item.active {
opacity: 1; opacity: 1;
/* Hiển thị item khi có lớp active */
transform: translateY(0); transform: translateY(0);
/* Item sẽ di chuyển lên vị trí gốc */
} }
.item.previous { .item.previous {
opacity: 0.3; opacity: 0;
/* Làm mờ các item trước */ transform: translateY(-170%);
transform: translateY(-150%);
} }
</style> </style>
</head> </head>
<body> <body>
<!-- Wrapper cho carousel -->
<div class="carousel-wrapper"> <div class="carousel-wrapper">
<div class="carousel"> <div class="carousel">
<!-- Các logo ban đầu -->
<div class="item-big"> <div class="item-big">
<div class="item active"> <div class="item active"><img src="https://www.tncstore.vn/media/brand/22.png" alt="Logo 1"></div>
<img src="https://via.placeholder.com/120x60?text=Logo+1" alt="Logo 1"> <div class="item"><img src="https://www.tncstore.vn/media/brand/23.jpg" alt="Logo 1"></div>
</div> <div class="item"><img src="https://www.tncstore.vn/media/brand/78.jpg" 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 class="item-big"> <div class="item-big">
<div class="item active"> <div class="item active"><img src="https://www.tncstore.vn/media/brand/13.png" alt="Logo 1"></div>
<img src="https://via.placeholder.com/120x60?text=Logo+1" alt="Logo 1"> <div class="item"><img src="https://www.tncstore.vn/media/brand/64.png" alt="Logo 1"></div>
</div> <div class="item"><img src="https://www.tncstore.vn/media/brand/32.png" 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 class="item-big"> <div class="item-big">
<div class="item active"> <div class="item active"><img src="https://www.tncstore.vn/media/brand/11.png" alt="Logo 1"></div>
<img src="https://via.placeholder.com/120x60?text=Logo+1" alt="Logo 1"> <div class="item"><img src="https://www.tncstore.vn/media/brand/28.png" alt="Logo 1"></div>
</div> <div class="item"><img src="https://www.tncstore.vn/media/brand/17.png" 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 class="item-big"> <div class="item-big">
<div class="item active"> <div class="item active"><img src="https://www.tncstore.vn/media/brand/156.jpg" alt="Logo 1"></div>
<img src="https://via.placeholder.com/120x60?text=Logo+1" alt="Logo 1"> <div class="item"><img src="https://www.tncstore.vn/media/brand/145.jpg" alt="Logo 1"></div>
</div> <div class="item"><img src="https://www.tncstore.vn/media/brand/136.jpg" 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>
</div> </div>
</div>
</body> </body>
<script> <script>
function startCarousel() { function startCarousel() {
const itemBigs = document.querySelectorAll('.item-big'); 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) { function animateItemBig(itemBig, delay) {
setTimeout(() => { setTimeout(() => {
const items = [...itemBig.querySelectorAll('.item')]; const items = [...itemBig.querySelectorAll('.item')];
if (items.length === 0) return; // Xử lý itemBig trống
let activeItem = itemBig.querySelector('.item.active'); let activeItem = itemBig.querySelector('.item.active');
if (!activeItem && items.length > 0) { if (!activeItem) {
activeItem = items[0]; activeItem = items[0];
activeItem.classList.add('active'); activeItem.classList.add('active');
} }
if (!activeItem) return; // Xử lý itemBig trống
const activeItemIndex = items.indexOf(activeItem); const activeItemIndex = items.indexOf(activeItem);
const nextItemIndex = (activeItemIndex + 1) % items.length; const nextItemIndex = (activeItemIndex + 1) % items.length;
if (nextItemIndex !== activeItemIndex) {
const nextItem = items[nextItemIndex]; const nextItem = items[nextItemIndex];
activeItem.classList.remove('active'); activeItem.classList.remove('active');
activeItem.classList.add('previous'); activeItem.classList.add('previous');
nextItem.classList.add('active'); nextItem.classList.add('active');
activeItem.addEventListener('transitionend', function handler() { activeItem.addEventListener('transitionend', function handler() {
this.classList.remove('previous'); this.classList.remove('previous');
this.classList.remove('active'); // Loại bỏ lớp active sau khi chuyển đổi
this.removeEventListener('transitionend', handler); this.removeEventListener('transitionend', handler);
}, { once: true }); }, { once: true });
}
}, delay); }, 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() { 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) => { itemBigs.forEach((itemBig, index) => {
animateItemBig(itemBig, index * staggerDelay); animateItemBig(itemBig, index * staggerDelay);
}); });
}, 2000); // độ trễ 2 giây trước khi chuyển sang nhóm tiếp theo // 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(); moveToNextSet();
} }
setTimeout(() => { setTimeout(startCarousel, 2000); // Độ trễ ban đầu
startCarousel();
}, 2000)
</script> </script>
</html> </html>