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

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

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

نتیجه احتمالی

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

طراحی 1: شیب پس زمینه متن با اثر پیمایش افقی

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

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

برای شروع ، یک ردیف یک ستونی به قسمت پیش فرض اضافه کنید.

طرح ستون divi را انتخاب کنید

ماژول متنی را اضافه کنید

سپس یک ماژول متن جدید به ستون اضافه کنید.

ماژول متن divi را اضافه کنید

محتویات

برای محتویات ستون، کد HTML زیر را در کادر قرار دهید محتویات:

کد قطعه را ذخیره کنید

قالب بندی متن

سپس طراحی متن را به شرح زیر به روز کنید:

  • رنگ زمینه: #ffffff
  • سبک قلم متن: TT
  • رنگ متن: # 000000
  • اندازه متن: 100 px (دسک تاپ) ، 40 پیکسل (تلفن)
  • فاصله نامه متن: 0.15 ساعت
  • ارتفاع خط متن: 1em
  • ترتیب متن: مرکز
سفارشی سازی متن Divi
  • قلم عنوان: Merriweather
  • وزن وزن قلم عنوان: جسورانه
  • سبک فونت عنوان: TT
  • تراز بندی متن سربرگ: مرکز
  • سرصفحه متن: # 000000
  • اندازه متن سربرگ: 200 پیکسل (دسک تاپ) ، 80 پیکسل (تلفن)
  • فاصله نامه نامه: 0.15 دقیقه
  • ارتفاع خط عنوان: 1em

لنت و فیلتر

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

برای افزودن پر و فیلتر ، موارد زیر را به روز کنید:

  • بالشتک: 15px بالا ، 20px کم
  • Blend Mode: صفحه

توجه: حالت ترکیب صفحه با متن سیاه در پس زمینه سفید بهترین عملکرد را دارد. اگر می خواستیم از متن سفید در پس زمینه سیاه استفاده کنیم ، از حالت Multiply blend استفاده می کنیم.

پیکربندی فاصله ماژول متن Divi

جداکننده بالا و پایین

پس از اتمام ماژول متن ، بیایید چند عنصر جداکننده (در بالا و یکی زیر ماژول متن) را برای یک عنصر طراحی اضافی اضافه کنیم.

یک جداکننده پایین اضافه کنید

یک ماژول جداسازی جدید را در زیر ماژول متن اضافه کنید.

ماژول جدا کننده divi را اضافه کنید
تنظیمات جدایی بالاتر

تنظیمات جداکننده را باز کنید و NO را برای نمایش جداکننده انتخاب کنید.

جلوه های پیمایش پس زمینه متن دیوی

سپس پس زمینه را به روز کنید و به تقسیم کننده حالت ترکیبی مشابه ماژول متن را به شرح زیر بدهید:

  • رنگ پس زمینه شیب چپ: # 000000
  • رنگ پس زمینه شیب در سمت راست: #ffffff
  • جهت گرادیان: 90deg
  • موقعیت شروع: 48٪
  • موقعیت نهایی: 0٪
  • Blend Mode: صفحه
پیکربندی جداکننده رنگ

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

  • قد: 15px (تلفن)
پیکربندی جداکننده Divi

جداکننده بالایی را اضافه کنید

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

درج تقسیم کننده

سپس رنگها را بر روی پس زمینه شیب معکوس کنید.

درج زمینه گرادیان

پارامترهای خط را به روز کنید

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

  • عرض روده: 1 (برای حذف حاشیه های پایین بین ماژول ها)
  • حداکثر عرض: 600 پیکسل (برای نگه داشتن یک طرح منسجم در دسک تاپ و تبلت)
  • تراز خط: مرکز
  • بالشتک: 0px زیاد ، 0px کم
  • سرریز افقی: پنهان
  • سرریز عمودی: پنهان
پارامتر خط divi را سفارشی کنید

برای رنگ زمینه متن متحرک ، یک جداکننده ایجاد کنید

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

درج جدا کننده

سپس NO را برای نمایش جداکننده انتخاب کنید.

نمایش تقسیم کننده تقسیم

تنظیمات تقسیم پس زمینه

جداکننده با پیش زمینه شیب به شرح زیر است:

  • رنگ پس زمینه شیب چپ: # e02b20
  • رنگ شیب پس زمینه سمت راست: # 8300e9
  • جهت گرادیان: 90deg
  • موقعیت شروع: 30٪
  • موقعیت نهایی: 70٪
تقسیم کننده عقب Divi

ما می خواهیم ارتفاع جداکننده آنقدر زیاد باشد که بتواند متن همه ما را در ماژول متن و جداکننده های بالا و پایین رنگی کند. برای این طراحی ، ارتفاع را روی 400px تنظیم کنید.

  • ارتفاع: 400px
تقسیم کننده ارتفاع تقسیم کننده

سپس به تقسیم کننده موقعیتی مطلق بدهید تا مستقیماً در بالای ماژولهای دیگر قرار گیرد. برای قرار دادن تقسیم کننده در پشت سایر ماژول ها از شاخص Z استفاده کنید.

  • مقام: مطلق
  • شاخص Z: -1
جدا کننده شاخص
جلوه های پیمایشی تقسیم کننده پس زمینه

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

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

در زیر زبانه حرکت افقی ...

دفتر

  • حرکت افقی را فعال کنید: بله
  • شروع افست: 6 (با 20٪)
  • متوسط ​​افست: 0 (با 40٪ -60٪)
  • افست نهایی: -6 (با 80٪)

تلفن

  • شروع افست: 3
  • پایان افست: -3

همچنین ، مطمئن شوید که ماشه را برای اثر حرکت در وسط کلیپ تنظیم کنید:

  • اثر حرکت ماشه: وسط عنصر
پیکربندی انیمیشن

فاصله بخش اضافه کنید

برای ایجاد فضای پیمایش موقتی برای آزمایش طرح ، موارد زیر را به بخش اضافه کنید:

  • حاشیه: 80vh بالاتر ، 80vh زیر
بخش اندازه پیکربندی

آخرین افکار

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

من نمی توانم صبر کنم تا از شما در نظرات بشنوم.

به سلامتی شما!