5 انیمیشن جاوااسکریپت که طراحی سایت را زنده می‌کنند

🔹 مزایای استفاده از Typewriter Effect

• کاربر ناخودآگاه منتظر پایان جمله می‌مونه.
• حس گفت‌وگو و پویایی ایجاد می‌کنه.
• مثل شعار برند، معرفی شخصی، یا CTA.
• قابل استفاده در لودینگ‌ها یا شبیه‌سازی چت‌بات‌ها.

🔹 پیاده‌سازی انیمیشن تایپ کننده متن

const text = "سلام، اینجا رویال سایته و ما بهترین خدمات طراحی سایت رو ارائه میدهیم!";
let i = 0;

function typeWriter() {
	if (i < text.length) {
		const target = document.getElementById("typewriter")
		target.innerHTML += text.charAt(i);
		i++;
		setTimeout(typeWriter, 50);
	}
}
typeWriter();

• متغیر text : متنی که می‌خوایم به‌صورت تایپی نمایش بدیم.
• متغیر i : متغیری برای نگه‌داشتن موقعیت فعلی در متن (کدوم حرف باید تایپ بشه).
• تابع typewriter : تابعی که مسئول تایپ کردن متن به‌صورت حرف‌به‌حرفه.
• شرط text.length : بررسی می‌کنه که هنوز به انتهای متن نرسیدیم.
• متغیر target : عنصر مورد نظر برای تایپ کردن.
• تابع setTimeout : بعد از 50 میلی‌ثانیه، دوباره همین تابع رو اجرا می‌کنه (برای حرف بعدی).

🔹 نکته‌ی کلیدی

می‌تونید این انیمیشن رو با متد IntersectionObserver ترکیب کنید تا زمانی که کاربر به محل متن رسید، افکت تایپ به‌صورت خودکار اجرا بشه.

اگه با IntersectionObserver آشنایی ندارید، اینجا کلیک کنید. آموزش صفر تا صد Intersectionobserver

🔹 چرا این افکت خاص و تأثیرگذاره؟

• باعث می‌شه کاربر توقف کنه و نگاه کنه چون حرکت تدریجی توجه رو جلب می‌کنه
• حس دقت، ظرافت و خلاقیت رو منتقل می‌کنه، مخصوصاً برای برندهایی که طراحی براشون مهمه
• به‌خاطر استفاده از SVG، کاملاً واکنش‌گرا، سبک و شفاف باقی می‌مونه
• می‌تونه با اسکرول، کلیک یا حتی زمان‌بندی خاص فعال بشه و تجربه‌ای تعاملی بسازه

پیاده‌سازی انیمیشن Svg Drawer

path {
	stroke-dasharray: 500;
	stroke-dashoffset: 500;
	animation: draw 2s ease-out forwards;
}

@keyframes draw {
	to {
		stroke-dashoffset: 0;
	}
}

📌 مقدار اولیه‌ی ‌stroke-dasharray و stroke-dashoffset متغیر است و به شکل مسیر (path) در SVG بستگی دارد. برای به‌دست آوردن مقدار دقیق آن، می‌توانید از کد زیر استفاده کنید:

const svgPath = document.querySelector("path");
const strokeDashArray = svgPath.getTotalLength()

• ویژگی‌های stroke-dasharray و stroke-dashoffset: باعث می‌شن مسیر SVG به‌صورت تدریجی کشیده بشه.
• انیمیشن @keyframes draw: مقدار offset به صفر می‌رسه و مسیر کامل می‌شه.
• قابلیت استفاده: این تکنیک با هر مسیر برداری (مثل لوگو، آیکون، یا حتی امضای دیجیتال) قابل استفاده‌ست.

🔹 مزایای استفاده از Particle Animation

• ایجاد حس عمق و حرکت در پس‌زمینه یا عناصر صفحه
• افزایش جذابیت بصری بدون نیاز به تصاویر سنگین
• قابل استفاده در صفحات معرفی، لندینگ‌پیج‌ها، پورتفولیوها و حتی فرم‌ها
• قابل تعامل با ماوس یا لمس (hover، click، scroll)

🔹 پیاده‌سازی انیمیشن ذرات انفجاری بدون استفاده از کتابخانه

📌 این آموزش بدون استفاده از هیچ کتابخانه‌ای و صرفاً با کدنویسی دستی در جاوااسکریپت پیاده‌سازی شده است. به همین دلیل، درک آن نیازمند سطح بالایی از دانش فنی از جمله requestAnimationFrame است. با این حال، اگر به دنبال راه‌حل ساده‌تری هستید، می‌توانید به‌راحتی از کتابخانه‌ی آماده‌ی particles.js استفاده کنید.

// ---> html
<canvas id="explosionCanvas"></canvas>

// ---> javascript
const canvas = document.getElementById('explosionCanvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const particles = [];

class Particle {
constructor(x, y) {
	this.x = x;
	this.y = y;
	this.radius = Math.random() * 5 + 2;
	this.color = `hsl(${Math.random() * 360}, 100%, 50%)`;
	this.speedX = (Math.random() - 0.5) * 10;
	this.speedY = (Math.random() - 0.5) * 10;
	this.alpha = 1;
}

update() {
	this.x += this.speedX;
	this.y += this.speedY;
	this.alpha -= 0.02;
}

draw() {
	ctx.globalAlpha = this.alpha;
	ctx.beginPath();
	ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2);
	ctx.fillStyle = this.color;
	ctx.fill();
	ctx.globalAlpha = 1;
}
}

function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
particles.forEach((p, i) => {
	p.update();
	p.draw();
	if (p.alpha <= 0) particles.splice(i, 1);
});
requestAnimationFrame(animate);
}

canvas.addEventListener('click', (e) => {
for (let i = 0; i < 30; i++) {
	particles.push(new Particle(e.clientX, e.clientY));
}
});

animate();

• ساخت عنصر canvas: یک تگ <canvas> تعریف شده تا ذرات روی آن رسم شوند.
• دریافت context دو‌بعدی: با getContext('2d') امکان رسم روی canvas فراهم می‌شود.
• تنظیم اندازه canvas: عرض و ارتفاع canvas برابر با اندازه پنجره مرورگر تنظیم شده است.
• تعریف کلاس Particle: هر ذره دارای موقعیت، رنگ، اندازه، سرعت و شفافیت است.
• تولید رنگ تصادفی: با استفاده از HSL رنگ هر ذره به‌صورت تصادفی تعیین می‌شود.
• حرکت ذرات: در هر فریم، موقعیت ذره با سرعت آن به‌روزرسانی می‌شود.
• محو شدن تدریجی: مقدار alpha در هر فریم کاهش می‌یابد تا ذره به‌مرور ناپدید شود.
• رسم ذره: با استفاده از ctx.arc یک دایره رنگی با شفافیت مشخص رسم می‌شود.
• پاک‌سازی فریم قبلی: با clearRect صفحه پاک می‌شود تا فریم جدید رسم شود.
• حذف ذرات محو شده: اگر شفافیت ذره به صفر برسد، از آرایه حذف می‌شود.
• اجرای انیمیشن: با requestAnimationFrame انیمیشن به‌صورت پیوسته اجرا می‌شود.
• رویداد کلیک: با کلیک روی canvas، ۳۰ ذره جدید در محل کلیک ایجاد می‌شود.
• شروع انیمیشن: تابع animate در انتها فراخوانی می‌شود تا انیمیشن آغاز شود.

🔹 مزایای انیمیشن پارالاکس

• ایجاد حس عمق و حرکت در طراحی
• افزایش جذابیت بصری بدون نیاز به انیمیشن‌های سنگین
• مناسب برای سکشن‌های Hero، معرفی خدمات، یا صفحات داستان‌محور

🔹 پیاده‌سازی Parallax Animation

// ---> html

<div className="bg-parallex text-white relative">
	<div className="bg-pink-950 h-20 absolute top-0 w-full flex-center">
		<p>محتوای بالای پارالاکس</p>
	</div>
	<div className="h-[550px]"></div>
	<div className="bg-pink-950 h-20 absolute bottom-0 w-full flex-center">
		<p>محتوای پایین پارالاکس</p>
	</div>
</div>

// ---> css

.bg-parallex {
	margin: 0;
	padding: 0;
	background: url('your-image-url') no-repeat fixed;
	background-size: cover;
	background-position-y: center;
	background-position-x: center;
	overflow-x: hidden;
}

• ساختار کلی: یک div با کلاس bg-parallex داریم که نقش سکشن پارالاکس رو بازی می‌کنه. این عنصر شامل دو بخش ثابت در بالا و پایین، و یک فضای خالی در وسطه.
• پس‌زمینه‌ی پارالاکس: در کلاس bg-parallex از ویژگی background-attachment: fixed استفاده شده که باعث می‌شه تصویر پس‌زمینه هنگام اسکرول ثابت بمونه و محتوای صفحه روی اون حرکت کنه، این دقیقاً همون افکت پارالاکس کلاسیکه.
• تنظیم موقعیت تصویر: با background-position-x: center و background-position-y: center تصویر دقیقاً در مرکز قرار می‌گیره، و با background-size: cover کل فضای سکشن رو پر می‌کنه بدون اینکه کشیده بشه.
• محتوای بالا و پایین: دو div با position: absolute در بالا و پایین سکشن قرار گرفتن که محتوای متنی رو نمایش می‌دن. این باعث می‌شه تصویر بین این دو بخش دیده بشه و حس «بین دو لایه بودن» ایجاد بشه.
• فضای خالی مرکزی: div وسط با ارتفاع 550 پیکسل باعث می‌شه تصویر پس‌زمینه دیده بشه و افکت پارالاکس خودش رو نشون بده.
• سادگی و کارایی: این روش بدون نیاز به جاوااسکریپت پیاده‌سازی شده، بسیار سبک و سریع اجرا می‌شه، و در اکثر مرورگرها به‌خوبی کار می‌کنه.

🔹 مزایای Mouse Follower

• ایجاد حس تعامل و واکنش‌پذیری در رابط کاربری
• مناسب برای طراحی‌های خلاقانه، پورتفولیو، یا صفحات معرفی
• قابل استفاده به‌عنوان جایگزین نشانگر ماوس یا مکمل آن
• قابل توسعه با افکت‌های کشسانی، تغییر رنگ، یا نمایش آیکون

🔹 پیاده‌سازی انیمیشن دنبال‌کننده ماوس با جاوااسکریپت

// --- > html

<div id="follower" class="fixed z-50 pointer-events-none -translate-x-1/2 -translate-y-1/2 w-5 h-5 rounded-full bg-red-500"></div>

// ---> javascript

const follower = document.getElementById("follower");

document.addEventListener("mousemove", (e) => {
	follower.style.left = e.clientX + "px";
	follower.style.top = e.clientY + "px";
});

• عنصر follower : همان شیء که میخواهیم دنبال موس برود.
• موقعیت fixed : باعث می‌شه همیشه روی صفحه باقی بمونه.
• pointer-events: none : تا مزاحم کلیک‌ها نشه.
• رویداد mousemove : مختصات ماوس گرفته می‌شه و به عنصر اعمال می‌شه.