نحوه اضافه کردن انیمیشن اسکرول در وردپرس (با کد و پلاگین)


آیا وقتی وب سایتی با جلوه اسکرول تعاملی بسیار جالب پیدا می کنید، این احساس را می دانید؟ می‌دانید، آن نوع انیمیشن طوماری است که مانند یک بچه گربه با یک گلوله نخ، کاملاً حواس شما را پرت می‌کند؟

اگر شما هم مثل من هستید، شاید فکر می کردید که عالی است، اما راهی برای ایجاد لیگ شما. خبر خوب این است که نه تنها این امکان وجود دارد، بلکه می توانید تنها با چند کلیک یک انیمیشن اسکرول برای سایت وردپرس خود ایجاد کنید.

من چهار روش برای انجام آن را به شما نشان می دهم که مغز شما را خراب نمی کند:

اولین روشی که می خواهم به اشتراک بگذارم استفاده از یک افزونه فوق العاده مفید به نام Scrollsequence است.

وب سایت Scrollsequence

Scrollsequence به شما کمک می کند تا یک انیمیشن اسکرول سینمایی ایجاد کنید که تأثیر بصری زیادی بر بازدیدکنندگان شما دارد. مخصوصاً برای نمایشگرهای محصول که می خواهید محصول را 360 درجه بچرخانید، مناسب است. با اسکرول کاربر، انیمیشن هم پخش می شود و هم به عقب باز می گردد. برای مثالی چشم نواز، وب سایت آنها را بررسی کنید:

اولین کاری که باید انجام دهید این است که افزونه را نصب کنید. می‌توانید نسخه رایگان را در صفحه WordPress.org آن‌ها دریافت کنید، یا یک نسخه برتر را در وب‌سایت Scrollsequence دانلود کنید. آنها یک آزمایش رایگان 14 روزه ارائه می دهند، بنابراین هیچ خطری برای امتحان آن در سایت شما وجود ندارد.

هنگامی که افزونه را نصب و فعال کردید، به منوی Scrollsequence در داشبورد مدیریت خود بروید.

منوی پیمایش

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

Scrollsequence به جای استفاده از یک فایل GIF یا ویدیویی، به یک سری فریم ثابت برای ایجاد جلوه ویدیویی اسکرول متکی است. بنابراین اولین کاری که باید انجام دهید این است که یک ویدیوی کوتاه بگیرید – 5 تا 10 ثانیه یا بیشتر – و فریم ها را به عنوان فایل های توالی JPEG با استفاده از نرم افزار ویرایش مورد علاقه خود صادر کنید. مبدل Ezgif یک انتخاب عالی و رایگان است. هنگامی که فایل ها را ذخیره کردید، به سایت خود برگردید و به آن بروید دنباله پیمایش>Scrollsequence جدید اضافه کنید.

روی Add a Scene و a کلیک کنید توالی تصویر* کشویی ظاهر خواهد شد. کلیک پیوست ها را انتخاب کنیدو تصاویری را که ذخیره کرده اید اضافه کنید. بسته به سرعت اتصال شما ممکن است مدتی طول بکشد تا آنها بارگیری شوند.

منوی پیمایش

در این مرحله، می‌توانید روی Save Draft کلیک کنید، سپس انیمیشن را پیش‌نمایش کنید. بدون انجام هیچ گونه ویرایش یا انتخاب هیچ تنظیماتی، انیمیشن پیمایش پیش‌فرض من چگونه به نظر می‌رسد:

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

وقتی راضی شدید، کلیک کنید انتشار. سپس در منوی مدیریت به Scrollsequence برگردید. دنباله خود را با یک کد کوتاه لیست شده خواهید دید.

منوی پیمایش

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

ویژگی ها و تنظیمات بیشتری در Scrollsequence موجود است، مانند انیمیشن محتوا. اگر می‌خواهید در مورد Scrollsequence عمیق‌تر شوید، آموزش کامل را در مقاله بررسی ما بررسی کنید.

این یکی کمی متفاوت است، زیرا ما با یک تصویر ثابت به جای ویدیو شروع خواهیم کرد. وقتی کاربر پیمایش می کند، آن را از یک طرف صفحه به سمت دیگر حرکت می دهیم.

ابتدا یک صفحه جدید ایجاد کنید و سپس Edit with Elementor را انتخاب کنید. سپس یک تصویر را در صفحه قرار دهید. اگر از فایل شفاف PNG یا SVG استفاده کنید، این افکت بهتر عمل می کند. اندازه تصویر را طوری تنظیم کنید که حرکت در پیمایش قابل توجه باشد. در مورد من، من از یک تصویر استفاده کردم و اندازه را روی Medium – 300 x 300px تنظیم کردم.

ویرایشگر Elementor

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

ویرایشگر Elementor

فوراً می توانید به پایین پیمایش کنید و اثر را آزمایش کنید. این یک مثال بسیار ساده بود، اما می توانید ببینید که امکانات تقریباً نامحدود است.

شایان ذکر است که می‌توانید از Scrollsequence برای افزودن انیمیشن روی اسکرول در Elementor نیز استفاده کنید، و Elementor Pro دارای جلوه اسکرول چسبنده داخلی است، حتی اگر کمی محدود باشد.

این افکت شبیه به Scroll Effect در Elementor است. اگر کاربر Divi هستید، می توانید آن را نیز انجام دهید.

ابتدا یک صفحه ایجاد کنید و آن را انتخاب کنید از Divi Builder استفاده کنید. در مثالم، یکی از طرح‌بندی‌های از پیش ساخته Divi را انتخاب کردم – در این مورد، یک سایت مربیگری تنیس.

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

Divi Visual Builder

هنگامی که تصویر خود را آپلود کردید، کلیک کنید پیشرفته زیر تنظیمات تصویر به قسمت Scroll Effects به پایین بروید. چندین گزینه را در زیر Scroll Transform Effects خواهید دید. من هر دو افکت Rotate و Horizontal Motion را انتخاب کردم.

حرکت اسکرول خود را تست کنید، تنظیمات خود را تغییر دهید و تمام. افراد در Divi Extended یک آموزش عمیق تر در مورد افکت های اسکرول Divi دارند که ممکن است برای شما مفید باشد.

آخرین روشی که می خواهم با شما به اشتراک بگذارم به اندازه بقیه هیجان انگیز نیست، اما به روشی ساده کمی انیمیشن به سایت شما اضافه می کند.

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

ابتدا تگ های لنگر را در صفحه خود تنظیم کنید. متنی را که می خواهید به آن بپرید انتخاب کنید. در منوی سمت راست زیر Advanced، مقداری متن را در قسمت HTML Anchor قرار دهید. مهم نیست چه چیزی است، به شرطی که آن را به خاطر بسپارید. این تگ لنگر شماست.

ویرایشگر وردپرس

اکنون متنی را که می خواهید به تگ انکر خود پیوند دهید، انتخاب کنید. یک لینک اضافه کنید و در قسمت پیوند، متن لنگر خود را با یک هشتگ در مقابل آن وارد کنید، مانند: #link-word.

ویرایشگر وردپرس

اکنون صفحه خود را منتشر یا به روز کنید. همانطور که اشاره کردم، این عمل سخت خواهد بود. بیایید آن را درست کنیم. صفحه خود را باز کنید و در نوار مدیریت بالا، Customize را انتخاب کنید. به سمت پایین به CSS اضافی بروید. این کد را در فیلد قرار دهید:

html{
  scroll-behavior: smooth;
}
ویرایشگر وردپرس

روی انتشار کلیک کنید و لینک را تست کنید. صاف!

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

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

من شما را تشویق می‌کنم که Scrollsequence را کاوش کنید، زیرا این یک راه بسیار آسان برای تبدیل بازدیدکنندگان خود به بچه گربه‌هایی با توپ‌های نخ است. آنها سایت شما را به خاطر خواهند آورد و به احتمال زیاد آن را با دوستان خود به اشتراک خواهند گذاشت.


– تهیه و ترجمه توسط wordpress-templates.ir

سفارش طراحی سایت به وی تی!