اگر به دنبال راهی برای ایجاد انیمیشن های روان با جلوه های پیمایش داخلی Divi هستید ، این آموزش را دوست خواهید داشت. ما به شما نشان خواهیم داد که چگونه می توانید حرکت اسکرول را با جلوه های حرکتی داخلی Divi ترکیب کرده و بخشهایی با ارتفاع کامل ایجاد کنید که می توانید با یک حرکت پیمایش کنید.
ما با ایجاد بخش اول شروع خواهیم کرد. بنابراین ما از این بخش در طول طراحی صفحه خود استفاده مجدد خواهیم کرد. برای فعال کردن اسکروپ کردن پیمایش ، از ویژگی های اسکرول پیمایشی CSS که به بخش ها ، HTML ، هدر و پاورقی صفحه خود اختصاص خواهیم داد ، استفاده خواهیم کرد.
نتیجه احتمالی
قبل از اینکه به آموزش برویم ، بیایید نگاهی سریع به نتیجه در اندازه های مختلف صفحه بیندازیم.
1. ایجاد یک صفحه جدید و طراحی قسمت اول را شروع کنید
یک صفحه جدید اضافه کنید و به ویژوال سازنده تغییر دهید
با افزودن صفحه جدید شروع کنید. عنوان صفحه را وارد کنید ، صفحه را منتشر کنید و به Visual Builder بروید.
تنظیمات بخش
اندازه
پس از ورود به صفحه جدید ، بخش موجود را در آنجا باز کرده و تنظیمات اندازه را تغییر دهید.
- ارتفاع حداقل: 100vh
عنصر اصلی
همچنین دو خط کد CSS به قسمت اضافه می کنیم. این خطوط کد CSS به ما کمک می کند تا بخش را به یک نقطه ضربه محکم و ناگهانی اسکرول تبدیل کنیم.
scroll-snap-align: start؛ scroll-snap-stop: normal؛
دید
برای اینکه مطمئن شویم هیچ چیزی فراتر از ظرف قسمت نیست ، سرریزهای بخش را پنهان خواهیم کرد.
- سرریز افقی: پنهان
- سرریز عمودی: پنهان
خط شماره 1 را اضافه کنید
ساختار ستون
با اضافه کردن ساختار ستون زیر ، اضافه کردن یک خط جدید به بخش ادامه دهید:
اندازه
بدون اضافه کردن ماژول ها ، تنظیمات ردیف را باز کرده و اندازه را به شرح زیر تغییر دهید:
- از پهنای صاف Gutter استفاده کنید: بله
- عرض روده: 1
- عرض: 100٪
- حداکثر عرض: 100٪
فاصله
ما همچنین قسمت بالایی و بالشتک پیش فرض بخش را از بین می بریم.
- بالشتک بالایی: 0px
- بالشتک پایین: 0px
موقعیت
و ما ردیف را به همین ترتیب تغییر می دهیم:
- مقام: مطلق
- محل سکونت: مرکز پایین
ماژول متن را به ستون اضافه کنید
جعبه محتوا را خالی بگذارید
تنها ماژول مورد نیاز ما در این ردیف ، یک ماژول Text است. حتما جعبه محتوای ماژول را خالی بگذارید.
رنگ پس زمینه
سپس رنگ پس زمینه را تغییر دهید.
- رنگ زمینه: # ffee00
تنظیمات متن
ارتفاع خط متن ماژول را نیز حذف خواهیم کرد.
- ارتفاع خط متن: 1em
اندازه گیری
سپس ، به تنظیمات اندازه خواهیم رفت و عرض را تغییر می دهیم.
- عرض: 30٪
فاصله
ما با اضافه کردن مقداری بالشتک بالا ، ماژول را به یک مربع تبدیل خواهیم کرد.
- بالشتک برتر: 30٪
ردیف شماره 2 را اضافه کنید
ساختار ستون
در خط بعدی از ساختار ستون زیر استفاده کنید:
اندازه
بدون افزودن ماژول ، تنظیمات ردیف را باز کرده و تنظیمات اندازه را در برگه طراحی تغییر دهید:
- از عرض روده ای سفارشی استفاده کنید: بله
- عرض روده: 1
- عرض: 60vw
- حداکثر عرض: 100٪
فاصله
سپس حاشیه بالایی سفارشی را در اندازه های مختلف صفحه اضافه کنید.
- حاشیه برتر: 20vh (دسک تاپ) ، 5vw (رایانه لوحی و تلفن)
فاصله ستون 2
سپس تنظیمات را در ستون 2 باز خواهیم کرد و مقادیر fill custom را اضافه می کنیم.
- بالشتک بالایی: 2vh (رایانه لوحی و تلفن)
- بالشتک سمت چپ: 2vw
- بالشتک راست: 2vw
یک ماژول تصویر به ستون 1 اضافه کنید
آپلود تصویر
وقت آن است که mod ها را اضافه کنید ، یک mod mod به ستون 1 اضافه کنید و تصویری را که می خواهید انتخاب کنید بارگذاری کنید.
اندازه
ما پس از آن ، عرض کامل را بر روی ماژول وارد خواهیم کرد.
- نیروی کامل: بله
ماژول متن # 1 را به ستون 2 اضافه کنید
محتوای H2 را اضافه کنید
در ستون دوم، اولین ماژول مورد نیاز ما یک ماژول متن است محتویات H2
تنظیمات متن H2
به برگه طراحی ماژول بروید و تنظیمات متن H2 را به صورت زیر تغییر دهید:
- فونت عنوان 2: آنتون
- مورد 2 اندازه متن: 5vw (دسک تاپ) ، 7vw (رایانه لوحی) ، 9vw (تلفن)
ماژول متن # 2 را به ستون 2 اضافه کنید
اضافه کردن محتوا
یک ماژول متنی دیگر درست در زیر درست زیر قبلی اضافه کنید و آن را وارد کنید محتویات از توضیحات انتخابی شما
تنظیمات متن
تنظیمات متن ماژول را به شرح زیر تغییر دهید:
- متن فونت: بدون باز کردن
- اندازه متن: 0.8vw (دسک تاپ) ، 2vw (رایانه لوحی) ، 2.5vw (تلفن)
- ارتفاع خط متن: 1,8 em
فاصله
و حاشیه سفارشی بالا و پایین را به تنظیمات فاصله اضافه کنید.
- حاشیه بالایی: 2vw
- حاشیه پایین: 2vw
ماژول دکمه را به ستون 2 اضافه کنید
یک کپی اضافه کنید
آخرین و آخرین ماژول مورد نیاز در این ستون ، ماژول دکمه ای است. یک کپی به انتخاب خود اضافه کنید.
تنظیمات دکمه
دکمه را بر این اساس سبک دهید:
- از دکمه های سفارشی برای دکمه استفاده کنید: بله
- اندازه متن دکمه: 1vw (دسک تاپ) ، 2vw (رایانه لوحی) ، 3vw (تلفن)
- رنگ متن دکمه: # 333333
- دکمه حاشیه رنگ: # 333333
- شعاع دکمه: 1px
- قلم دکمه: آنتون
- دکمه سبک قلم: بزرگ
فاصله
و تنظیمات ماژول را با افزودن مقدار سفارشی بر اساس اندازه صفحه کامل کنید.
- حاشیه داخلی بالا: 1vw (دسک تاپ) ، 2vw (تبلت) ، 3vw (تلفن)
- حاشیه داخلی پایین: 1vw (دسک تاپ) ، 2vw (تبلت) ، 3vw (تلفن)
- حاشیه داخلی سمت چپ: 3vw (دسک تاپ) ، 5vw (تبلت) ، 7vw (تلفن)
- حاشیه اینترنت مناسب: 3vw (دسک تاپ) ، 5vw (تبلت) ، 7vw (تلفن)
2. جلوه های پیمایش را به عناصر مختلف اضافه کنید
ماژول متن در خط شماره 1
انیمیشن عمودی
پس از نصب همه عناصر ، وقت آن است که جلوه های پیمایش را اضافه کنید. ماژول متن را در ردیف اول خود باز کنید و از حرکت عمودی استفاده کنید.
- فعال کردن حرکت عمودی: بله
- شروع افست: 4
- میانه افست: 0
- خاتمه افست: -4
- اثر حرکتی: وسط عنصر
خط 2
ستون 1
انیمیشن افقی
سپس ستون اول ردیف دوم خود را باز کرده و یک حرکت افقی اضافه کنید.
- حرکت افقی را فعال کنید: بله
- شروع افست: -3
- متوسط افست: 0 (از 40٪ تا 60٪)
- پایان افست: -3
- اثر حرکت ماشه: وسط عنصر
محو و داخل می شوند
ما همچنین اثر fade in و fade out را به همان ستون اعمال می کنیم.
- محو شدن درون و بیرون را فعال کنید: بله
- کدورت اولیه: 0٪
- کدورت متوسط: 100٪
- کدورت پایان: 100٪
- اثر حرکت ماشه: وسط عنصر
ستون 2
حرکت افقی
سپس پارامترهای ستون دوم را باز می کنیم و پارامترهای حرکت افقی زیر را اعمال می کنیم:
- حرکت افقی را فعال کنید: بله
- شروع افست: 3
- متوسط افست: 0 (از 40٪ تا 60٪)
- پایان افست: 3
- اثر حرکت ماشه: وسط عنصر
محو و داخل می شوند
با یک اثر محو شدن ورودی و خروجی.
- محو شدن درون و بیرون را فعال کنید: بله
- کدورت اولیه: 0٪
- کدورت متوسط: 100٪
- کدورت پایان: 100٪
- اثر حرکت ماشه: وسط عنصر
4. استفاده مجدد از بخش اول
بخش کلون چهار بار
پس از اتمام بخش اول و جلوه های پیمایش آن ، می توانید هر بار که دوست دارید کلون کنید.
رنگ پس زمینه همه بخش های دیگر را تغییر دهید
ما رنگ زمینه همه بخشهای دیگر را تغییر خواهیم داد.
- رنگ زمینه: # 111111
5- کد CSS را برای فعال کردن ضبط پیمایش در صفحه HTML اضافه کنید
ماژول کد را به قسمت آخر صفحه اضافه کنید
اکنون برای فعال کردن اسکرول گرفتن در HTML صفحه خود ، ما می خواهیم یک ماژول کد را در هر قسمت از آخرین بخش صفحه خود اضافه کنیم.
کد HTML CSS را وارد کنید
این خطوط کد CSS به ما کمک می کند تا تراز پیمایشی را در کد HTML صفحه خود اعمال کنیم:
<style> html {overflow-x: hidden;scroll-snap-type: y mandatory;scroll-snap-points-y: repeat(100vh);} </style>
Scroll Snapping Start را به Header and Footer اضافه کنید
با اضافه کردن سطرهای زیر کد CSS مطمئن خواهیم شد که هدر و پاورقی ما نیز نقاط ضبط پیمایش (دقیقاً مانند بخش های ما) را پیموده اید:
header، footer {scroll-snap-تراز: شروع ؛}
برای پایان دادن به
در این مقاله ، ما به شما نشان داده ایم که چگونه با ترکیب ضربه محکم و ناگهانی پیمایشی و جلوه های حرکتی داخلی Divi ، انیمیشن های روان ایجاد کنید. این یک روش عالی برای فعال کردن جلوه های پیمایش فقط با یک پیمایش است.
ضبط اسکرول کمک می کند آخرین بازدید بدون زحمت بخش های مختلف خود را مرور کنید وب سایت. ما آن را با طرح بخش تمام ارتفاع ترکیب کردیم. شما همچنین توانستید فایل JSON را به صورت رایگان دانلود کنید! اگر سوال یا پیشنهادی دارید، در قسمت نظرات زیر نظر خود را درج کنید.
