À thật ra cái này thấy trên web của kenbi á, thấy đẹp đẹp nên cũng ăn trộm về :D .
Đơn giản chỉ cần tạo 1 file js rồi gián cái này vào
Tiếp theo, nhúng cái file đó vào web là được.
Sau đó vào web và cảm nhận, sẽ có 2 cái lồng đèn nhỏ đong đưa nhẹ nhàng trên web
Đơn giản chỉ cần tạo 1 file js rồi gián cái này vào
(function() {
const style = document.createElement('style');
style.textContent = `:root { --lantern-size:140px; }
.lantern-wrap { position:fixed; top:0; width:var(--lantern-size); z-index:9999; pointer-events:none; transform-origin:top center; }
.lantern-left { left:12px; animation:swing-left 4.8s ease-in-out infinite; }
.lantern-right { right:12px; animation:swing-right 5.3s ease-in-out infinite; }
.lantern-string { width:2px; height:60px; background:#cbd5f5; margin:0 auto; }
.lantern-img{width:100%; display:block; filter:drop-shadow(0 0 18px rgba(255,80,80,.65))
drop-shadow(0 0 35px rgba(255,120,120,.4))}
@keyframes swing-left {
0% { transform:rotate(0deg); } 25% { transform:rotate(4deg); } 50% { transform:rotate(-3deg); } 75% { transform:rotate(2deg); } 100% { transform:rotate(0deg); }
}
@keyframes swing-right {
0% { transform:rotate(0deg); } 30% { transform:rotate(-4deg); } 55% { transform:rotate(3deg); } 80% { transform:rotate(-2deg); } 100% { transform:rotate(0deg); }
}
`;
document.head.appendChild(style);
const lanternHTML = `
<div class="lantern-wrap lantern-left">
<div class="lantern-string"></div>
<img
class="lantern-img"
src="https://cloudinary.stockage.workers.dev/view/dorew/pw6fucxtpeqfznkazian.png"
alt="Lantern"
>
</div>
<div class="lantern-wrap lantern-right">
<div class="lantern-string"></div>
<img
class="lantern-img"
src="https://cloudinary.stockage.workers.dev/view/dorew/pw6fucxtpeqfznkazian.png"
alt="Lantern"
>
</div>
`;
const container = document.createElement('div');
container.innerHTML = lanternHTML;
document.body.appendChild(container);
function resizeLantern() {
const w = window.innerWidth;
let size = 140;
if (w < 480) size = 80;
else if (w < 768) size = 100;
else if (w < 1200) size = 120;
document.documentElement.style.setProperty('--lantern-size', size + 'px');
}
window.addEventListener('resize', resizeLantern);
resizeLantern();
})();Tiếp theo, nhúng cái file đó vào web là được.
<script src="/file-js-hoi-nay.js"></script>Sau đó vào web và cảm nhận, sẽ có 2 cái lồng đèn nhỏ đong đưa nhẹ nhàng trên web
KenBi đã thích bài viết này
