نحوه ایجاد انیمیشن اسکرول برای متن در وب سایت شما

Summarize this content to 400 words in Persian Lang

عنوان: نحوه ایجاد انیمیشن اسکرول برای متن در وب سایت شما

مقدمه

انیمیشن های اسکرول می توانند یک عنصر پویا و تعاملی به وب سایت شما اضافه کنند و تعامل کاربر را افزایش دهند. در این پست، یک را ایجاد خواهیم کرد اسکرول انیمیشن برای متن با استفاده از جاوا اسکریپت و CSS، هم برای مبتدیان و هم برای توسعه دهندگان با تجربه مناسب است. در پایان، می‌دانید که چگونه یک انیمیشن متنی صاف را که با اسکرول ایجاد می‌شود، پیاده‌سازی کنید.

ویژگی های انیمیشن Scroll

با انتقال صاف توجه کاربر را به خود جلب می کند.
کاملاً واکنش گرا و بهینه شده برای مرورگرهای مدرن.
به راحتی برای نیازهای طراحی مختلف قابل تنظیم است.

فرآیند گام به گام

1. راه اندازی پروژه

یک ساختار اولیه پروژه با فایل های زیر ایجاد کنید:

project/
│
├── index.html
├── style.css
└── script.js

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

2. راه اندازی HTML

ایجاد ساختار اولیه در index.html برای متن متحرک شما

lang=”en”>

charset=”UTF-8″>
name=”viewport” content=”width=device-width, initial-scale=1.0″>
Scroll Animation Text
rel=”stylesheet” href=”style.css”>

class=”container”>
class=”scroll-text”>
Welcome to the World of Animation!

class=”content”>
Scroll down to see the magic!

src=]]>”script.js”>

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

3. یک ظاهر طراحی CSS

به متن و محفظه استایل دهید style.css.

body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
background-color: #f4f4f9;
overflow-x: hidden;
}

.container {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}

.scroll-text h1 {
font-size: 3rem;
opacity: 0;
transform: translateY(50px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.content {
margin-top: 200px;
text-align: center;
}

.content p {
font-size: 1.2rem;
color: #555;
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

4. جاوا اسکریپت را برای اسکرول انیمیشن اضافه کنید

منطق انیمیشن پیمایشی را در آن بنویسید script.js.

document.addEventListener(“DOMContentLoaded”, () => {
const scrollText = document.querySelector(“.scroll-text h1”);

window.addEventListener(“scroll”, () => {
const scrollPosition = window.scrollY;
const screenHeight = window.innerHeight;

if (scrollPosition > screenHeight / 4) {
scrollText.style.opacity = “1”;
scrollText.style.transform = “translateY(0)”;
} else {
scrollText.style.opacity = “0”;
scrollText.style.transform = “translateY(50px)”;
}
});
});

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

نکات سفارشی سازی

زمان بندی انیمیشن: را تنظیم کنید transition خواص در CSS برای انیمیشن های کندتر یا سریعتر.

نقطه ماشه: اصلاح کنید screenHeight / 4 در منطق جاوا اسکریپت برای موقعیت های مختلف اسکرول.

سبک قلم: را به روز کنید font-size و در CSS رنگ کنید تا با برند شما مطابقت داشته باشد.

خروجی نهایی

وقتی پیمایش می‌کنید، با رسیدن به یک موقعیت اسکرول خاص، عنوان به آرامی ظاهر می‌شود و جلوه بصری جذابی ایجاد می‌کند.

“

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

نتیجه گیری

افزودن انیمیشن های اسکرول به وب سایت شما یک راه ساده و در عین حال موثر برای بهبود تجربه کاربر است. این رویکرد کاملاً قابل تنظیم، پاسخگو و سبک است و عملکرد روان را در بین دستگاه ها تضمین می کند. این را در پروژه بعدی خود امتحان کنید و سایت خود را متمایز کنید!

کد نویسی مبارک! 😊

project/
│
├── index.html
├── style.css
└── script.js

 lang="en">

   charset="UTF-8">
   name="viewport" content="width=device-width, initial-scale=1.0">