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

بیایید شروع.

اثرات پیمایش چیست؟

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

پیچیده به نظر می رسد، اما با DIVI، بسیار ساده است

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

6 اثر ششگانه منحصر به فرد

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

حرکت عمودی

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

تنظیمات تصویر Divi

حرکت افقی

اثر حرکتی افقی مشابه افکت حرکتی عمودی است ، با این تفاوت که اجازه می دهد آیتم ها بسته به جهت و سرعت پیمایش بازدید کننده ، از صفحه به چپ به راست منتقل شوند. . حتی می توانید حرکت عمودی و افقی را با هم ترکیب کنید و به شما امکان کنترل کامل حرکت هر عنصر را بدهد!

جلوه های انیمیشن Divi

تاری محتوا

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

تنظیم محو زمینه Divi

ذوب شده

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

Divi محو اثر

اثر مقیاس گذاری

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

اثر مقیاس گذاری

اثر چرخش

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

تنظیمات تصویر اثر چرخش تقسیم

رابط بصری جدید

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

با یک کلیک و بس!

آیا می خواهید یک اثر پیمایشی به ماژول اضافه کنید؟ با یک کلیک افکت اضافه می شود و همچنین بسیار عالی به نظر می رسد! برای افزودن جلوه پیمایشی ، به سادگی به گروه گزینه جدید پیمایش در تب پیشرفته هر ماژول ، ردیف ، ستون یا بخش دسترسی پیدا کنید. چندین جلوه می توانند همزمان فعال شوند و افکت ها به صورت یک انیمیشن روان ترکیب می شوند که با پیمایش به زیبایی تغییر شکل می دهد.

آیا می خواهید کنترل کامل داشته باشید؟ شما آن را دارید !

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

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

به عنوان مثال ، یک اثر کدری با مقدار شروع 0 (نامرئی) ، مقدار متوسط ​​100 (کاملاً قابل مشاهده) و مقدار پایان 0 (نامرئی) ، هنگام ورود از حالت نامرئی تغییر می کند پنجره تا زمانی که در وسط پنجره 100٪ قابل مشاهده شود ، هنگام خروج از پنجره در حالت نامرئی ناپدید می شود.

تنظیم جدول زمانی انیمیشن

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

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

حالتهای ساکن را به هر انیمیشن اضافه کنید

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

نظر شما در مورد این ویژگی های جدید چیست؟ دریغ نکنید که نظرات خود را در نظرات به اشتراک بگذارید.