دوستان عزیز و نازنین سلام؛ امیدوارم حال دلتون عالی باشه؛ برای استفاده از کدهای زیر حتما آموزش رو ببینید. همینطور در انتها میتونید تمپلیت (template) رو هم دانلود کنید.
کد CSS
/* css goes in .card */
selector {
--blob-size:250px;
}
selector .inner{
backdrop-filter: blur(80px);
height: 100%;
}
selector .blob{
width: var(--blob-size);
height: 80%;
left: calc(50% - calc(var(--blob-size)/2));
filter: blur(40px);
z-index: -1;
opacity: 0;
transition: opacity 300ms 300ms linear;
}
selector .fakeblob {
visibility: hidden;
z-index: -1;
height: 100%;
}کد JavaScript
<script type="text/javascript">
const cards = document.querySelectorAll(".card");
window.addEventListener("mousemove", (ev) => {
cards.forEach((e) => {
const blob = e.querySelector(".blob");
const fblob = e.querySelector(".fakeblob");
const rec = fblob.getBoundingClientRect();
blob.animate(
[
{
transform: `translate(${
(ev.clientX - rec.left) - (rec.width / 2)
}px,${(ev.clientY - rec.top) - (rec.height / 2)}px)`
}
],
{
duration: 300,
fill: "forwards"
}
);
blob.style.opacity = "1";
});
});
</script>دانلود قالب (template)
روی لینک زیر کلیک کنید تا براتون دانلود بشه. هر سوالی هم داشتید میتونید بپرسید.
2 پاسخ
سلام خسته نباشید بهتون بابت آموزش عالی که برامون تهیه کردید فقط یه سوالی ک هست نمیشه خروجی گرفت از المنتور ما همون رو انتقال بدیم به سایت مون چون تازه کار هستم یکم سخت ممنونم 😊
سلام و درود خدمت شما دوست عزیز و پرانرژی؛ خوشحالم که براتون مفید بوده؛ البته میشه خروجی گرفت به عنوان قالب تمپلیت(template). نسخه فایل قالب آماده توی کانال تلگرام موجوده و میتونید ازش استفاده بکنید و تنها رنگ هاش رو تغییر بدهین 👌☺