انیمیشن پس زمینه گرادیان می تواند یک تکنیک طراحی عالی برای زنده کردن رنگ های پس زمینه در شما باشد وب سایت. این یک راه‌حل عالی برای کسانی است که چیزی واقعی‌تر از رنگ پس‌زمینه ثابت می‌خواهند بدون اینکه مجبور باشند به پس‌زمینه ویدیویی با بارگذاری آهسته متوسل شوند. ایده اصلی پشت انیمیشن پس‌زمینه گرادیان، استفاده از CSS برای ایجاد بزرگ‌نمایی و متحرک کردن پس‌زمینه گرادیان برای ایجاد انتقال‌های رنگی متحرک صاف است.
در این آموزش ، ما به شما نحوه ایجاد انیمیشن های پس زمینه شیب دار در Divi را نشان خواهیم داد. این روش یک قطعه سفارشی CSS را ترکیب می کند که رنگهای شیب انتخاب شده در تنظیمات Divi یکپارچه را متحرک می کند. پیکربندی در واقع برای چنین نتیجه زیبایی بسیار ساده است.
بیایید شروع کنیم!
نتیجه Posisble
در اینجا مروری بر دو روش ارائه شده برای ایجاد یک انیمیشن پس زمینه گرادیان در Divi ارائه شده است.
البته پیش نیاز این آموزش این است که شما یک تم دیوی نصب شده و به روز شده است.
ایجاد یک انیمیشن پس زمینه شیب دار با عصاره CSS و گزینه پس زمینه Divi
برای شروع ، یک ردیف از یک ستون به بخش پیش فرض در Divi Builder اضافه کنید.
تنظیمات بخش
سپس تنظیمات بخش را با یک تصویر پس زمینه به روز کنید. پس زمینه شیب ما به خط ما اضافه می شود تا با این تصویر همپوشانی داشته باشد.
سپس پر کردن را به شرح زیر به روز کنید:
- بالشتک: 0px زیاد ، 0px کم
تنظیمات ردیف و ستون
پارامترهای ستون
تنظیمات ردیف را باز کنید ، سپس ستون را به شرح زیر پر کنید:
- بالشتک: بالاتر از 12vw
سپس CSS سفارشی زیر را به عنصر ستون اصلی اضافه کنید:
height: 40vw;
تنظیمات خط
پیشینه شیب
اکنون می توانیم پس زمینه شیب را به خط اضافه کنیم. اگر می خواهید تصویر پس زمینه را ببینید ، رنگ های شیب را نیمه شفاف کنید.
پارامترهای خط را به شرح زیر به روز کنید:
- رنگ پس زمینه شیب چپ: rgba (12,113,195,0.8،XNUMX،XNUMX،XNUMX)
- رنگ پس زمینه شیب در سمت راست: rgba (131,0,233,0.8،XNUMX،XNUMX،XNUMX)
- نوع شیب: خطی
- جهت شیب: 45 درجه
اندازه
سپس اندازه خط را به شرح زیر به روز کنید:
- عرض: 100٪
- حداکثر عرض: 100٪
کلاس CSS سفارشی
اکنون که پس زمینه شیب ما آماده است ، باید انیمیشن را از طریق CSS سفارشی اضافه کنیم. قبل از افزودن کد CSS ، باید یک کلاس CSS سفارشی برای هدف قرار دادن آن ردیف خاص اضافه کنیم.
به تب Advanced بروید و کلاس CSS زیر را اضافه کنید:
- کلاس CSS: شیب تحریک کننده
ماژول کد را اضافه کنید
پس از افزودن کلاس CSS به خط ، ماژول کد را به خط اضافه کنید.
CSS را در ماژول کد قرار دهید
سپس کد CSS زیر را در قسمت ماژول Code Code قرار دهید:
.animate-gradient {background-size: 400% 400%;animation: gradient 5s ease infinite;} @keyframes gradient {0% {background-position: 0% 50%;}50% {background-position: 100% 50%;}100% {background-position: 0% 50%;}}
مطمئن شوید که کد را در <style></style>برچسب ها زیرا ما آن را به کد HTML صفحه اضافه می کنیم.
نتیجه
در اینجا نتیجه تا کنون وجود دارد. پس زمینه شیب تا 400٪ از اندازه اصلی بزرگ شده است و با حرکت به چپ و راست متحرک می شود.
تماس عملی را اضافه کنید
برای تکمیل طراحی، اجازه دهید ماژول فراخوانی را اضافه کنیم تا بخشی از آن باشیم محتویات.
تنظیمات تماس برای اقدام
محتویات
را به روز کنید محتویات به شرح زیر است:
- عنوان اضافه کنید
- متن دکمه را اضافه کنید
- متن بدن را اضافه کنید
- نشانی اینترنتی لینک دکمه: #
- از رنگ زمینه استفاده کنید: نه
تصور
به تب Design بروید و موارد زیر را به روز کنید:
- فونت عنوان: فیلمنامه کاشان
- اندازه متن عنوان: 4vw (دسک تاپ) ، 30 پیکسل (تلفن)
- ارتفاع خط عنوان: 1,4 em
- پلیس بدن: Roboto
- اندازه متن دکمه: 16px
- رنگ متن دکمه: # 555555
- زمینه دکمه: #ffffff
- عرض مرز دکمه: 0px
- شعاع مرزی دکمه: 30 پیکسل
- فاصله نامه دکمه: 3px
- قلم دکمه: تراکم Roboto
- وزن قلم دکمه: جسورانه
نتیجه
حالا نتیجه را در صفحه لایو با تیک بزنید محتویات فراخوان برای اقدام در محل. این یک هدر عالی برای شما خواهد بود وب سایت !
به یاد داشته باشید ، شما به راحتی می توانید رنگ پس زمینه خط خود را به هر آنچه می خواهید تغییر دهید. کد همچنان در پس زمینه اجرا می شود تا پس زمینه را برای شما متحرک کند.
اگر کمی CSS می دانید ، می توانید با تغییر مقادیر ویژگی های انیمیشن ، سرعت و جهت انیمیشن را تنظیم کنید.
امیدوارم این آموزش برای شما مفید واقع شده باشد. دریغ نکنید که نظرات خود را در مورد آن به اشتراک بگذارید.
