- افکت اسکرول نرم و روان در وردپرس فقط با چند خط کد
- چرا باید اسکرول نرم در سایت وردپرسی داشته باشیم؟
- افکت اسکرول نرم چیست و چه تأثیری روی تجربه کاربری دارد؟
- آموزش مرحلهبهمرحله افزودن اسکرول نرم با کدنویسی
- مزایای استفاده از اسکرول روان در طراحی سایت
- نکات مهم در استفاده از افکت اسکرول نرم
- جمعبندی و نتیجهگیری
افکت اسکرول نرم و روان در وردپرس فقط با چند خط کد
اگر تا حالا وارد سایتهایی شدهای که اسکرول آنها بسیار نرم، دلنشین و طبیعی حرکت میکند، احتمالاً متوجه تأثیر عجیبی که روی حس کاربر دارد شدهای. این حس، حاصل استفاده از افکت اسکرول نرم (Smooth Scroll) است. خبر خوب اینکه برای اضافه کردن چنین افکتی به وردپرس، نیازی به افزونههای سنگین نیست — فقط چند خط کد کافی است!
چرا باید اسکرول نرم در سایت وردپرسی داشته باشیم؟
کاربران به تجربه روان و بدون پرش علاقه دارند. وقتی اسکرول سایتت خشک و تند باشد، حس بیکیفیت بودن منتقل میشود. اما با یک اسکرول نرم، حس حرفهای بودن طراحی را القا میکنی و باعث میشوی کاربر مدت بیشتری در سایت بماند.
در واقع، اسکرول نرم بخشی از تجربه کاربری (UX) است که به صورت مستقیم روی زمان ماندگاری (Dwell Time) و حتی نرخ پرش (Bounce Rate) تأثیر میگذارد.
افکت اسکرول نرم چیست و چه تأثیری روی تجربه کاربری دارد؟
اسکرول نرم در طراحی وب یعنی حرکت تدریجی و روان هنگام پیمایش صفحه، به جای حرکت ناگهانی. این افکت باعث میشود:
-
چشم کاربر فرصت دنبال کردن محتوا را داشته باشد.
-
حرکت بین بخشها طبیعیتر و زیباتر به نظر برسد.
-
حس پویایی و کیفیت بالاتری از سایت منتقل شود.
درواقع، این جزئیات کوچک هستند که سایتهای مدرن و حرفهای را از بقیه متمایز میکنند.
آموزش مرحلهبهمرحله افزودن اسکرول نرم با کدنویسی
در این روش نیازی به نصب هیچ افزونهای نیست. فقط کافی است چند خط کد به قالب وردپرس اضافه کنی.
اضافه کردن فایلهای استایل و اسکریپت به وردپرس
ابتدا کد زیر را در فایل functions.php
قالب خود قرار بده:
function enqueue_lenis_assets() { wp_enqueue_style( 'lenis-css', 'https://unpkg.com/lenis@1.1.18/dist/lenis.css', array(), null ); wp_enqueue_script( 'lenis-js', 'https://unpkg.com/lenis@1.1.18/dist/lenis.min.js', array(), null, true ); wp_add_inline_script( 'lenis-js', 'const lenis = new Lenis({ autoRaf: true, lerp: 0.05 });' ); } add_action('wp_enqueue_scripts', 'enqueue_lenis_assets');
مزایای استفاده از اسکرول روان در طراحی سایت
تأثیر مثبت روی تجربه کاربری (UX)
کاربر هنگام پیمایش صفحه حس پویایی و کیفیت بالاتری دارد. این موضوع بهصورت ناخودآگاه باعث افزایش رضایت او میشود.
افزایش زمان ماندگاری کاربر در سایت
وقتی حرکت روان است، کاربر تمایل بیشتری برای ادامهی مرور محتوا دارد. همین امر یکی از فاکتورهای غیرمستقیم سئو محسوب میشود.
زیبایی بصری و حس حرفهای بودن سایت
اسکرول نرم باعث میشود طراحی کلی سایت لوکستر و یکدستتر دیده شود، مخصوصاً در سایتهای شرکتی یا شخصی که هویت بصری اهمیت بالایی دارد.
نکات مهم در استفاده از افکت اسکرول نرم
توجه به سرعت حرکت و عملکرد در موبایل
در موبایل ممکن است سرعت پیمایش متفاوت باشد. بنابراین همیشه تست ریسپانسیو را فراموش نکن.
بهینهسازی کد برای سئو و سرعت سایت
هرچند این کد سبک است، اما اگر از انیمیشنها و کتابخانههای دیگر هم استفاده میکنی، بهتر است فایلها را فشرده (minify) و در پایان صفحه بارگذاری کنی.
جمعبندی و نتیجهگیری
اسکرول نرم یکی از سادهترین و در عین حال تأثیرگذارترین ترفندهای طراحی مدرن است.
با چند خط کد ساده میتوانی سایت وردپرسیات را از نظر ظاهری چندین پله بالاتر ببری و تجربهای روان، دلنشین و حرفهای برای کاربران بسازی.