<!DOCTYPE html>
<html lang="vi">
<head>
<meta charset="UTF-8">
<title>Slide Icon Hiệu Ứng Đẹp</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
margin: 0;
padding: 0;
}
/* --- KHUNG CỐ ĐỊNH --- */
.slide-fixed {
position: fixed;
bottom: 20px;
left: 20px;
z-index: 9999;
width: 70px;
height: 70px;
overflow: hidden;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
/* --- ÁNH SÁNG RING RING --- */
.slide-fixed::before {
content: "";
position: absolute;
width: 120%;
height: 120%;
border-radius: 50%;
border: 2px solid rgba(0, 255, 255, 0.5);
box-shadow: 0 0 20px rgba(0, 255, 255, 0.7);
animation: ringPulseBox 2s infinite ease-out;
}
@keyframes ringPulseBox {
0% {
transform: scale(1);
opacity: 0.7;
}
70% {
transform: scale(1.6);
opacity: 0;
}
100% {
transform: scale(1.6);
opacity: 0;
}
}
/* --- KHUNG TRONG --- */
.slide-inner {
position: relative;
width: 60px;
height: 60px;
}
/* --- ICON CHUNG --- */
.icon {
position: absolute;
top: 0;
left: 100%;
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 28px;
box-shadow: 0 4px 14px rgba(0,0,0,0.3);
opacity: 0;
transform: translateX(100%);
transition: all 0.6s ease;
animation: wiggle 2s infinite ease-in-out;
cursor: pointer;
}
/* --- MÀU ICON --- */
.zalo { background: #0084ff; font-weight: bold; }
.phone { background: #28a745; }
.facebook { background: #1877f2; }
.youtube { background: #ff0000; }
.twitter { background: #1da1f2; }
/* --- ẢNH NẾU DÙNG HÌNH --- */
.icon img {
width: 90%;
height: 90%;
object-fit: contain;
pointer-events: none;
}
/* --- TRẠNG THÁI --- */
.icon.show {
left: 0;
opacity: 1;
transform: translateX(0);
}
.icon.hide {
left: -100%;
opacity: 0;
transform: translateX(-100%);
}
/* --- LẮC NHẸ --- */
@keyframes wiggle {
0%,100% { transform: rotate(0deg); }
25% { transform: rotate(6deg); }
50% { transform: rotate(-6deg); }
75% { transform: rotate(4deg); }
}
</style>
</head>
<body>
<!-- KHUNG CHỨA ICON -->
<div class="slide-fixed">
<div class="slide-inner">
<div class="icon zalo show" data-link="https://zalo.me/0901234567">
<img src="zalo.png">
</div>
<div class="icon phone" data-link="tel:0901234567"><i class="fa fa-phone"></i></div>
<div class="icon facebook" data-link="https://facebook.com"><i class="fa fa-facebook"></i></div>
<div class="icon youtube" data-link="https://youtube.com"><i class="fa fa-youtube-play"></i></div>
<div class="icon twitter" data-link="https://twitter.com"><i class="fa fa-twitter"></i></div>
<!-- Ví dụ icon dạng hình ảnh -->
<!-- <div class="icon" style="background:#fff;" data-link="https://mysite.com">
<img src="your-icon.png" alt="My Logo">
</div> -->
</div>
</div>
<script>
// --- SLIDE TỰ ĐỘNG ---
const icons = document.querySelectorAll('.icon');
let current = 0;
// Chỉ icon đầu tiên hiện
icons.forEach((ic, i) => {
if (i !== 0) ic.classList.add('hide');
});
// Click mở link
icons.forEach(icon => {
icon.addEventListener('click', () => {
const link = icon.getAttribute('data-link');
if (link.startsWith('tel:')) window.location.href = link;
else window.open(link, '_blank');
});
});
// Hàm chuyển icon
function slideNext() {
icons[current].classList.remove('show');
icons[current].classList.add('hide');
current = (current + 1) % icons.length;
icons[current].classList.remove('hide');
icons[current].classList.add('show');
}
// Auto đổi mỗi 2s
setInterval(slideNext, 2000);
</script>
</body>
</html>
