ایجاد یک انیمیشن اسکرول پسزمینه متنی یک روش منحصر به فرد برای افزودن بافتهای متحرک رنگارنگ به متن شما است. وب سایت در حالی که کاربر در حال پیمایش صفحه است. با DIVI، با یادگیری چند تکنیک کلیدی، این فرآیند به طرز شگفت آوری آسان است.
در این آموزش ما فقط از توان پارامترهای داخلی استفاده می کنیم DIVI برای ایجاد 3 طرح منحصر به فرد که دارای یک انیمیشن پیمایش پس زمینه متن رنگارنگ است. ما حتی به شما نشان خواهیم داد که چگونه یک نسخه تاریک از هر طرح برای ظاهری کاملاً جدید ایجاد کنید.
بیایید شروع کنیم!
نتیجه احتمالی
در اینجا نگاهی می اندازیم به طرح هایی که امروز خواهیم ساخت.
طراحی 1: شیب پس زمینه متن با اثر پیمایش افقی
این اولین طراحی دارای یک اثر پیمایشی افقی است که ماژول جدا کننده رنگی را در پشت ماژول متن با فیلتر صفحه متحرک می کند.
ستون را اضافه کنید
برای شروع ، یک ردیف یک ستونی به قسمت پیش فرض اضافه کنید.
ماژول متنی را اضافه کنید
سپس یک ماژول متن جدید به ستون اضافه کنید.
محتویات
برای محتویات ستون، کد HTML زیر را در کادر قرار دهید محتویات:
قالب بندی متن
سپس طراحی متن را به شرح زیر به روز کنید:
- رنگ زمینه: #ffffff
- سبک قلم متن: TT
- رنگ متن: # 000000
- اندازه متن: 100 px (دسک تاپ) ، 40 پیکسل (تلفن)
- فاصله نامه متن: 0.15 ساعت
- ارتفاع خط متن: 1em
- ترتیب متن: مرکز
- قلم عنوان: Merriweather
- وزن وزن قلم عنوان: جسورانه
- سبک فونت عنوان: TT
- تراز بندی متن سربرگ: مرکز
- سرصفحه متن: # 000000
- اندازه متن سربرگ: 200 پیکسل (دسک تاپ) ، 80 پیکسل (تلفن)
- فاصله نامه نامه: 0.15 دقیقه
- ارتفاع خط عنوان: 1em
لنت و فیلتر
اکنون باید مقداری padding و فیلتر صفحه به ماژول متن اضافه کنیم. فیلتر برای کارکرد این طرح مورد نیاز است همانگونه که به رنگها / حالتهای پس زمینه اجازه می دهد پشت متن نشان داده شوند.
برای افزودن پر و فیلتر ، موارد زیر را به روز کنید:
- بالشتک: 15px بالا ، 20px کم
- Blend Mode: صفحه
توجه: حالت ترکیب صفحه با متن سیاه در پس زمینه سفید بهترین عملکرد را دارد. اگر می خواستیم از متن سفید در پس زمینه سیاه استفاده کنیم ، از حالت Multiply blend استفاده می کنیم.
جداکننده بالا و پایین
پس از اتمام ماژول متن ، بیایید چند عنصر جداکننده (در بالا و یکی زیر ماژول متن) را برای یک عنصر طراحی اضافی اضافه کنیم.
یک جداکننده پایین اضافه کنید
یک ماژول جداسازی جدید را در زیر ماژول متن اضافه کنید.
تنظیمات جدایی بالاتر
تنظیمات جداکننده را باز کنید و NO را برای نمایش جداکننده انتخاب کنید.
سپس پس زمینه را به روز کنید و به تقسیم کننده حالت ترکیبی مشابه ماژول متن را به شرح زیر بدهید:
- رنگ پس زمینه شیب چپ: # 000000
- رنگ پس زمینه شیب در سمت راست: #ffffff
- جهت گرادیان: 90deg
- موقعیت شروع: 48٪
- موقعیت نهایی: 0٪
- Blend Mode: صفحه
سپس ارتفاع تقسیم کننده را بر روی صفحه تلفن به شرح زیر به روز کنید:
- قد: 15px (تلفن)
جداکننده بالایی را اضافه کنید
برای ایجاد تقسیم کننده بالا ، تقسیم کننده قبلی قبلی را کپی کرده و با استفاده از قسمت نمایش لایه ها ، آن را به بالای ماژول متن بکشید.
سپس رنگها را بر روی پس زمینه شیب معکوس کنید.
پارامترهای خط را به روز کنید
پس از جدا شدن قسمت بالایی و پایین ما ، پارامترهای خط را به شرح زیر به روز کنید:
- عرض روده: 1 (برای حذف حاشیه های پایین بین ماژول ها)
- حداکثر عرض: 600 پیکسل (برای نگه داشتن یک طرح منسجم در دسک تاپ و تبلت)
- تراز خط: مرکز
- بالشتک: 0px زیاد ، 0px کم
- سرریز افقی: پنهان
- سرریز عمودی: پنهان
برای رنگ زمینه متن متحرک ، یک جداکننده ایجاد کنید
آخرین عنصر این اولین طرح تقسیم کننده ای است که ما برای متحرک سازی رنگ زمینه متن روی پیمایش استفاده خواهیم کرد. برای انجام این کار ، یک ماژول جداسازی جدید در زیر تقسیم پایین اضافه کنید.
سپس NO را برای نمایش جداکننده انتخاب کنید.
تنظیمات تقسیم پس زمینه
جداکننده با پیش زمینه شیب به شرح زیر است:
- رنگ پس زمینه شیب چپ: # e02b20
- رنگ شیب پس زمینه سمت راست: # 8300e9
- جهت گرادیان: 90deg
- موقعیت شروع: 30٪
- موقعیت نهایی: 70٪
ما می خواهیم ارتفاع جداکننده آنقدر زیاد باشد که بتواند متن همه ما را در ماژول متن و جداکننده های بالا و پایین رنگی کند. برای این طراحی ، ارتفاع را روی 400px تنظیم کنید.
- ارتفاع: 400px
سپس به تقسیم کننده موقعیتی مطلق بدهید تا مستقیماً در بالای ماژولهای دیگر قرار گیرد. برای قرار دادن تقسیم کننده در پشت سایر ماژول ها از شاخص Z استفاده کنید.
- مقام: مطلق
- شاخص Z: -1
جلوه های پیمایشی تقسیم کننده پس زمینه
در حالی که جداکننده در موقعیت قرار دارد، تنها کاری که باید انجام دهیم این است که جداکننده را با استفاده از افکت های اسکرول پشت متن حرکت دهیم. DIVI. برای این طراحی، ما به سادگی حرکت افقی را روی اسکرول اضافه می کنیم.
موارد زیر را به روز کنید:
در زیر زبانه حرکت افقی ...
دفتر
- حرکت افقی را فعال کنید: بله
- شروع افست: 6 (با 20٪)
- متوسط افست: 0 (با 40٪ -60٪)
- افست نهایی: -6 (با 80٪)
تلفن
- شروع افست: 3
- پایان افست: -3
همچنین ، مطمئن شوید که ماشه را برای اثر حرکت در وسط کلیپ تنظیم کنید:
- اثر حرکت ماشه: وسط عنصر
فاصله بخش اضافه کنید
برای ایجاد فضای پیمایش موقتی برای آزمایش طرح ، موارد زیر را به بخش اضافه کنید:
- حاشیه: 80vh بالاتر ، 80vh زیر
آخرین افکار
طرح های انیمیشن پس زمینه متن نشان داده شده در این مقاله در واقع به عنوان یک طرح ثابت بدون حرکت افزودن بر روی پیمایش کار می کنند. با این حال ، اثرات اضافی پیمایش ، طراحی را کاملاً به سطح جدیدی منتقل می کند. با خیال راحت با رنگها و جلوه های بیشتر آزمایش کنید!
من نمی توانم صبر کنم تا از شما در نظرات بشنوم.
به سلامتی شما!