بیایید فقط در 50 خط جاوا اسکریپت یک انیمیشن حباب رویداد جالب ماوس بسازیم!
هی حالتون چطوره بچه ها؟!
امروز می خواهم یک پس زمینه متحرک جالب با حباب ها را به اشتراک بگذارم و همانطور که ماوس را حرکت می دهیم حباب ها نیز حرکت می کنند!
و ما می توانیم آن را با فقط انجام دهیم جاوا اسکریپت خالص و فقط 50 خط کد! انجامش بدیم؟!
نگاهی به انیمیشن ما بیندازید:
پیاده سازی ساختار HTML:
ابتدا بیایید پایه را پیاده سازی کنیم HTML ساختار، یک خواهیم داشت اصلی div و a بنر با چهار حباب دو در آن، بنابراین کد به شکل زیر خواهد بود:
...
<body>
<main>
<div class="banner">
<div class="bubble-one"></div>
<div class="bubble-two"></div>
<div class="bubble-three"></div>
<div class="bubble-four"></div>
</div>
</main>
</body>
پیاده سازی ساختار CSS:
حالا بیایید ساختار CSS را پیاده سازی کنیم! ما باید برای 4 حباب خود و برای کلاس بنر خود کلاس ایجاد کنیم! حباب ها را همان طور که آنها را در خود می کشیدم اجرا کردم فیگما نمونه اولیه، اما با خیال راحت آنها را تغییر دهید و آنها را مطابق میل خود تطبیق دهید. بنابراین کد به شکل زیر بود:
* {
box-sizing: border-box;
margin: 0;
}
.banner {
background-color: #0476df;
height: 100vh;
width: 100%;
overflow: hidden;
position: relative;
}
.booble-one {
position: absolute;
width: 300px;
height: 300px;
left: 0;
top: 0;
background: #0dc5d0;
filter: blur(83px);
}
.booble-two {
position: absolute;
width: 500px;
height: 500px;
right: 0;
top: 0;
background: #942cb9;
filter: blur(139px);
}
.booble-three {
position: absolute;
width: 300px;
height: 300px;
left: 0;
bottom: 0;
background: #040e63;
filter: blur(114px);
}
.booble-four {
position: absolute;
width: 150px;
height: 150px;
left: 70%;
top: 70%;
bottom: 0;
background: #fdee15;
filter: blur(104px);
}
و نتیجه در حال حاضر مانند زیر است:
پیاده سازی ساختار جاوا اسکریپت:
در زیر می توانید ببینید که عملکرد انیمیشن جاوا اسکریپت ما چگونه به نظر می رسد و اگر متوجه شده اید که ما داریم فقط 50 خط کد جاوا اسکریپت، جالبه نه؟!
در زیر آن نیز بلوک به بلوک کد را بررسی خواهیم کرد تا همه قطعات را بفهمیم!
function getElement(elementSelector) {
return document.querySelector(elementSelector);
}
function bubbleAnimations(event) {
const bubbleOne = getElement('.bubble-one');
const bubbleTwo = getElement('.bubble-two');
const bubbleThree = getElement('.bubble-three');
const bubbleFour = getElement('.bubble-four');
let cursorPositionX = event.clientX;
let cursorPositionY = event.clientY;
function animateBubble(positionX, positionXType, positionY, positionYType) {
return `translate(${positionXType}${Math.round(
positionX / Math.PI
)}px, ${positionYType}${Math.round(positionY / Math.PI)}px`;
}
bubbleOne.style.transform = animateBubble(
cursorPositionX,
'',
cursorPositionY,
''
);
bubbleTwo.style.transform = animateBubble(
cursorPositionY,
'',
cursorPositionX,
''
);
bubbleThree.style.transform = animateBubble(
cursorPositionY,
'',
cursorPositionY,
'-'
);
bubbleFour.style.transform = animateBubble(
cursorPositionX,
'-',
cursorPositionY,
''
);
}
document.addEventListener('mousemove', (event) => {
bubbleAnimations(event);
});
حالا بیایید هر قسمت از کد جاوا اسکریپ خود را درک کنیم و چرا اینگونه است!
درک تابع: getElement()
function getElement(elementSelector) {
return document.querySelector(elementSelector);
}
در این کد ما یک تابع ساده برای برگرداندن عنصر HTML داریم! با آن ما می توانیم زمان توسعه خود را بهبود بخشیم زیرا ما نمی نویسیم document.querySelector(elementSelector) به طور مکرر، تمرین کد تمیز و جداسازی مسئولیت های کد ما!
درک تابع: bubbleAnimations()
حال، بیایید هسته اصلی انیمیشن خود را درک کنیم bubble Animations() تابع!
عناصر حباب را دریافت کنید
const bubbleOne = getElement('.bubble-one');
const bubbleTwo = getElement('.bubble-two');
const bubbleThree = getElement('.bubble-three');
const bubbleFour = getElement('.bubble-four');
در اینجا ما فقط چهار const ایجاد می کنیم و انتخابگر کلاس را پاس می کنیم و عنصر را با the دریافت می کنیم getElement() تابعی که ایجاد کردیم
موقعیت مکان نما را دریافت کنید:
let cursorPositionX = event.clientX;
let cursorPositionY = event.clientY;
در اینجا ما فقط دو متغیر ایجاد می کنیم تا با استفاده از آرگومان رویداد، موقعیت مکان نما X و Y را بدست آوریم bubble Animations() تابع.
درک تابع: animateBubble()
function animateBubble(positionX, positionXType, positionY, positionYType) {
return `translate(${positionXType}${Math.round(
positionX / Math.PI
)}px, ${positionYType}${Math.round(positionY / Math.PI)}px`;
}
در این بلوک کد، ما یک تابع برای برگرداندن ویژگی translate ایجاد می کنیم، زیرا با آن افکت انتقال را به ما اعمال می کنیم حباب ها عناصر!
این تابع چهار پارامتر دارد:
🧩 positionX: The X position of the element.
🧩 positionXType: The position X type, as we can have negative or positive position.
🧩 positionY: The Y position of the element.
🧩 positionYType: The Y type of the position, as we can have negative or positive position.
در این تابع ما داریم رشته الگو، دور ریاضی و Math.PI همچنین برای انجام محاسبات!
با این کار ما نیازی به تکرار بی‌شمار کد نداریم و با این کار درک کد خود را آسان‌تر و انجام تعمیرات/بهبود را آسان‌تر می‌کنیم زیرا فقط در یک مکان لمس می‌کنیم.
استفاده از انیمیشن ها در حباب های ما:
bubbleOne.style.transform = animateBubble(
cursorPositionX,
'',
cursorPositionY,
''
);
bubbleTwo.style.transform = animateBubble(
cursorPositionY,
'',
cursorPositionX,
''
);
bubbleThree.style.transform = animateBubble(
cursorPositionY,
'',
cursorPositionY,
'-'
);
bubbleFour.style.transform = animateBubble(
cursorPositionX,
'-',
cursorPositionY,
''
);
در این قسمت از کد، ما فقط انیمیشن را با استفاده از آن اعمال کردیم سبک و تغییر داد تبدیل ملک با تماس با حباب متحرک تابع و با چند آرگومان تصادفی به تابع!
فراخوانی تابع:
document.addEventListener('mousemove', (event) => {
bubbleAnimations(event);
});
این قسمت از کد مهم است، در اینجا ما یک را اضافه می کنیم رویدادListener در ما سند! و رویداد ما نیاز به گوش دادن برای است حرکت ماوس، زیرا ما فقط می خواهیم انیمیشن ها را در مورد اعمال کنیم حرکت ماوس رویداد! بنابراین فقط آن را اضافه کنید و با آن تماس بگیرید انیمیشن های حبابی تابع عبور از رویداد پارامتر!
و در نهایت، ما انیمیشن بسیار جذاب و ساده خود را با تنها 50 خط کد جاوا اسکریپت داریم!
این همه بچه ها! با آن انیمیشن می‌توانیم وب‌سایت‌هایمان را زیباتر کنیم و تجربه کاربری را خوب کنیم!
این لینک پروژه StackBlitz است، با خیال راحت تغییرات، بهبودها و هر چیزی را که می خواهید انجام دهید.
امیدواریم این باعث شود که شما با انیمیشن های جاوا اسکریپت و امکانات آنها احساس راحتی بیشتری داشته باشید!
در صورت داشتن هرگونه سوال با من تماس بگیرید!
و بدیهی است که امیدوارم از آن لذت برده باشید 🤟💪🤟💪
