نحوه متحرک سازی ماسک های پس زمینه و الگوهای اسکرول با Divi

افزودن انیمیشن اسکرول به ماسک ها و قالب های پس زمینه Divi یک ترفند طراحی مفید است که می تواند جان تازه ای به طراحی پس زمینه وب سایت شما بدهد. ما قبلاً به شما نشان داده‌ایم که چگونه گزینه‌های پس‌زمینه Divi را به روش‌های خلاقانه ترکیب کنید، از جمله نحوه ایجاد طرح‌های پس‌زمینه دو لایه. اما امروز ما یک انیمیشن اسکرول را به گزینه های پس زمینه Divi اضافه می کنیم.

در این آموزش، نحوه ایجاد و متحرک سازی ماسک ها و الگوهای پس زمینه را با استفاده از گزینه های اسکرول Divi به شما نشان خواهیم داد (بدون نیاز به کد سفارشی). برای انجام این کار، یک لایه پس‌زمینه شناور با استفاده از یک ردیف Divi ایجاد می‌کنیم (مشابه کاری که در اینجا انجام دادیم)، که از آن برای متحرک سازی ماسک‌ها و الگوهای پس‌زمینه زمانی که کاربر در یک قطعه محتوا پیمایش می‌کند، استفاده می‌کنیم. ما فکر می کنیم که شما نتیجه را دوست خواهید داشت.

بیا شروع کنیم!

یک نگاه یواشکی

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

مفهوم

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

سپس یک ردیف ایجاد می کنیم که (به طور مطلق) طوری قرار می گیرد که قسمت را کاملاً بپوشاند (به عنوان روکش). می توانیم یک الگوی پس زمینه به ردیف اضافه کنیم.

سپس می توانیم یک ماسک پس زمینه به ستون اضافه کنیم.

سپس افکت‌های اسکرول را به سطر و ستون اضافه می‌کنیم (مانند مقیاس و چرخش) که قالب و ماسک را به طور جداگانه در پس‌زمینه بخش متحرک می‌کند.

وقتی سرریز بخش را پنهان می کنیم، تنها چیزی که می بینیم انیمیشن موجود در بخش است.

طرح بندی را به صورت رایگان دانلود کنید

برای لمس طراحی چیدمان از این آموزش، ابتدا باید آن را با استفاده از دکمه زیر دانلود کنید. برای دسترسی به دانلود، باید با استفاده از فرم زیر در لیست ایمیل Divi Daily ما مشترک شوید. به‌عنوان یک مشترک جدید، هر دوشنبه بیشتر Divi خوبی و بسته Divi Layout رایگان دریافت خواهید کرد! اگر قبلاً در لیست هستید، فقط آدرس ایمیل خود را در زیر وارد کنید و روی دانلود کلیک کنید. شما “دوباره مشترک” نخواهید شد یا ایمیل های اضافی دریافت نمی کنید.

برای وارد کردن طرح بندی برگه به ​​کتابخانه Divi خود، موارد زیر را انجام دهید:

1. به کتابخانه Divi بروید.
2. روی دکمه Import در بالای صفحه کلیک کنید.
3. در پنجره قابل حمل، تب import را انتخاب کنید
4. فایل مورد نظر را برای دانلود از رایانه خود انتخاب کنید (مطمئن شوید که ابتدا فایل را از حالت فشرده خارج کرده و از فایل JSON استفاده کنید).
5. سپس روی دکمه import کلیک کنید.

پس از انجام، طرح برگه در Divi Builder در دسترس خواهد بود.

بریم سراغ آموزش، درسته؟

آنچه برای شروع نیاز دارید

برای شروع، باید موارد زیر را انجام دهید:

1. اگر قبلا این کار را نکرده اید، تم Divi را نصب و فعال کنید.
2. یک صفحه وردپرس جدید ایجاد کنید و از Divi Builder برای ویرایش صفحه در قسمت جلو (سازنده بصری) استفاده کنید.
3. گزینه «ساخت از ابتدا» را انتخاب کنید.
4. حالا شما یک بوم خالی برای شروع طراحی در Divi دارید!

نحوه متحرک سازی ماسک های پس زمینه و الگوهای اسکرول با Divi

طراحی پس زمینه بخش

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

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

• حداقل ارتفاع: 50vw
• بالشتک: 0px بالا، 0px پایین

یک گرادیان پس زمینه برای بخش طراحی کنید

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

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

• توقف گرادیان شماره 1: #4158d0 (در 0٪)
• توقف گرادیان شماره 2: #c850c0 (در 50٪)
• توقف گرادیان شماره 3: #ffcc70 (در 100٪)

سپس جهت گرادیان خطی را تغییر دهید:

• جهت گرادیان: 270 درجه

سطرها را به بخش اضافه کنید

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

سپس ردیفی را که ایجاد کرده اید کپی کنید. این خط دوم (تکراری) برای محتوای ما درست مانند شما استفاده خواهد شد. اکنون باید یک ردیف بالا برای انیمیشن اسکرول پس‌زمینه و یک ردیف برای محتوای ساده داشته باشید.

سفارش را سفارشی کنید

اکنون که گرادیان پس‌زمینه بخش ما آماده است، می‌توانیم توجه خود را به ترتیبی که برای انیمیشن اسکرول پس‌زمینه استفاده می‌کنیم معطوف کنیم. تنظیمات صف را باز کنید. در تب Advanced موارد زیر را به روز کنید:

این به سطر اجازه می‌دهد بدون اشغال فضای واقعی در بالای بخش (یا روی آن قرار گیرد). اکنون تنها کاری که باید انجام دهیم این است که ارتفاع و عرض را به روز کنیم تا کل عرض و ارتفاع بخش را در بر بگیرد. با این کار همپوشانی مورد نیاز ما و دومین لایه طراحی پس زمینه ما ایجاد می شود.

در تب طراحی، گزینه های اندازه را به صورت زیر به روز کنید:

• تراز ارتفاع ستون: بله
• عرض: 100%
• حداکثر عرض: 100٪
• قد: 100%
• بالشتک: 0px بالا، 0px پایین

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

یک الگوی پس زمینه برای ردیف ایجاد کنید

در این مثال، الگوی Confetti را به عنوان پس‌زمینه ردیف اضافه می‌کنیم.

تنظیمات صف را باز کنید. در زیر گزینه پس زمینه، تب templates را انتخاب کرده و موارد زیر را به روز کنید:

• الگوی پس زمینه: کانفتی
• رنگ قالب: #f6bef7
• اندازه مدل: اندازه سفارشی
• عرض مدل: 35vw
• مبدا تکرار الگو: مرکز

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

افکت های اسکرول را به ردیف اضافه کنید

اکنون که مدل پس‌زمینه ما در جای خود قرار دارد، می‌توانیم افکت‌های اسکرول را به ردیف اضافه کنیم.

به تب Advanced بروید. در زیر گزینه های جلوه های اسکرول، موارد زیر را به روز کنید:

تب Horizontal Motion را انتخاب کرده و موارد زیر را به روز کنید:

• اجازه حرکت افقی: بله
• آفست اولیه: 0.5 (در 0٪)
• میانگین افست: 0 (از 40% تا 60%)
• پایان افست: -0.5 (در 100٪)

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

تب Scale up and down را انتخاب کنید و موارد زیر را به روز کنید:

• اجازه افزایش و کاهش مقیاس: بله
• مقیاس شروع: 150% (در 0%)
• مقیاس متوسط: 100٪ (از 40٪ تا 60٪)
• مقیاس نهایی: 150% (در 100%)

با این کار، الگوی پس‌زمینه ردیف در اسکرول از 150% به 100% تا 150% مقیاس می‌شود.

تب Rotation را انتخاب کرده و موارد زیر را به روز کنید:

• فعال کردن چرخش: بله
• چرخش اولیه: 10 درجه (در 0٪)
• چرخش متوسط: 0 درجه (از 40٪ تا 60٪)
• چرخش نهایی: -10 درجه (در 100٪)

نکته کلیدی: می‌خواهید چرخش را به حداقل برسانید وگرنه وقتی ردیف از بخش فراتر نمی‌رود، خطر نشان دادن شکاف‌ها را دارید. یک قانون کلی خوب این است که اگر می خواهید بچرخید، مقیاس را افزایش دهید. این به سطر اجازه می دهد تا روی بخش بچرخد بدون اینکه هیچ لبه ای در معرض دید قرار گیرد.

ماسک پس‌زمینه افکت اسکرول را به ستون اضافه کنید

هنگامی که ردیف ما کامل شد، ما آماده هستیم تا یک ماسک پس زمینه با افکت های اسکرول را به ستون در همان ردیف اضافه کنیم. برای شروع، اجازه دهید یک ماسک پس زمینه اضافه کنیم.

برای انجام این کار، تنظیمات ستون را باز کنید. در تب ماسک ها موارد زیر را به روز کنید:

• ماسک: وبلاگ لایه ها
• رنگ ماسک: #ffffff
• تبدیل ماسک: تلنگر افقی، تلنگر

افکت های اسکرول را به ستون اضافه کنید

اکنون که ماسک پس زمینه ما در جای خود قرار دارد، می توانیم افکت های اسکرول را به ستون اضافه کنیم. توجه داشته باشید که ستون قبلاً دارای افکت‌های اسکرول است که از ردیف والد به ارث رسیده است. تمام کاری که ما انجام می دهیم این است که ستون را در جهت مخالف ردیف بچرخانیم تا در طول انیمیشن اسکرول، ماسک و مدل بیشتر از هم جدا شوند.

به تب Advanced بروید. در زیر گزینه‌های جلوه‌های اسکرول، تب Rotation را انتخاب کرده و موارد زیر را به‌روزرسانی کنید:

• فعال کردن چرخش: بله
• چرخش اولیه: -15 درجه (در 0٪)
• چرخش متوسط: 0 درجه (از 40٪ تا 60٪)
• چرخش نهایی: 15 درجه (در 100٪)

پنهان کردن سرریز بخش

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

برای رفع این مشکل، باید سرریز بخش را پنهان کنیم. برای این کار تنظیمات بخش را باز کنید. در تب Advanced، گزینه های مشاهده را به صورت زیر به روز کنید:

• سرریز افقی: پنهان
• سرریز عمودی: پنهان

الان بهتر به نظر می رسد.

محتوا را به ردیف محتوا اضافه کنید

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

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

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

نتیجه نهایی

بیایید نگاهی به نتیجه نهایی طراحی خود بیندازیم.

تغییر دهید!

برای ظاهر متفاوت، می توانید ماسک ها و الگوهای مختلف را روی هر لایه امتحان کنید. اگر می خواهید الهام بیشتری در مورد نحوه استفاده از ماسک ها و الگوهای پس زمینه داشته باشید، این 12 طرح و الگوی ماسک پس زمینه قابل دانلود رایگان را بررسی کنید.

Gradient Builder به راحتی می‌تواند پس‌زمینه‌های گرادیان شگفت‌انگیزی را نیز برای بخش ایجاد کند. برای گزینه های طراحی پس زمینه گرادیان بیشتر، می توانید دموهای زنده ما را بررسی کنید.

افکار نهایی

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

برای اطلاعات بیشتر، می‌توانید آموزش مشابه ما را در مورد نحوه افزودن دو لایه طرح‌های پس‌زمینه بررسی کنید.

همچنین، پست‌های انتشار ویژگی ما را در ماسک‌ها و قالب‌های گرادیان و پس‌زمینه بررسی کنید.

همچنین ممکن است دانستن نحوه استفاده از ماسک ها و الگوها برای طراحی یک بخش کاراکتر مفید باشد.

مشتاقانه منتظر شنیدن نظرات شما هستم.

به سلامتی!