Divi: نحوه اضافه کردن یک افکت شیب هنگام شناور روی یک عنصر

آیا می‌خواهید یک افکت شیب اضافه کنید DIVI در هر عنصری از صفحه شما؟

اضافه کردن افکت های شیب شناور به شما وب سایت یکی از آن راه های سرگرم کننده و جذاب برای آوردن شما است وب سایت DIVI. معمولا این نوع طراحی نیاز به افزونه یا کد پیشرفته تری دارد. اما، این فرآیند با استفاده از Tilt.js (یک افکت شیب جزئی شناور برای jQuery) بسیار ساده تر است. با Tilt.js، می توانید به راحتی جلوه های شیب شناور را در عرض چند دقیقه روی هر چیزی اعمال کنید.

در این آموزش، ما به شما نشان خواهیم داد که چگونه افکت های شیب شناور را به هر عنصری اضافه کنید DIVI. با استفاده از ترکیبی از قطعه‌های جی کوئری tilt.js و سازنده Divi، به شما نشان می‌دهیم که چگونه افکت‌های شیب شناور عالی را به یک تصویر، ستون ماژول، ردیف و غیره اضافه کنید. 

ما حتی به شما نشان خواهیم داد که چگونه جلوه های اختلاف منظر سه بعدی شگفت انگیز را اضافه کنید.

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

بررسی

در اینجا یک نمای کلی از نتیجه ای است که در این آموزش به دست خواهیم آورد.

همچنین ببینید: Divi: نحوه نمایش محتوا با شناور روی قسمت تقسیم کننده

آنچه شما باید برای شروع کار

از داشبورد وردپرس، به صفحات> افزودن جدید برای ایجاد یک صفحه جدید

عنوانی به آن بدهید که برای شما منطقی باشد و کلیک کنید از Divi Builder استفاده کنید

سپس روی کلیک کنید شروع به ساختن کنید (از خراش بسازید)

پس از آن یک بوم خالی برای شروع طراحی در دیوی خواهید داشت.

افکت های شیب را در شناور هر عنصر در Divi اضافه کنید

افکت Tilt Hover را به ماژول های Divi اضافه کنید

بیایید با افزودن یک ردیف سه ستونی به بخش معمولی پیش فرض شروع کنیم.

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

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

توجه: شما می توانید از هر ماژول دلخواه خود استفاده کنید. اصلاً لازم نیست که یک ماژول Image باشد.

تصویر دلخواه خود را آپلود کنید. 

یک کلاس ماژول Image اضافه کنید

زیر زبانه فناوری، کلاس CSS زیر را اضافه کنید:

• کلاس CSS: et-js-tilt

این کلاس بعداً به عنوان یک انتخابگر برای تابع tilt ما استفاده خواهد شد.

ماژول تصویر قبلی را کپی و جایگذاری کنید

در مرحله بعد، ماژول Image را کپی کرده و یکی را در هر یک از دو ستون باقیمانده قرار دهید.

در صورت تمایل می توانید تصاویر تکراری را با تصاویر جدید جایگزین کنید. فقط مطمئن شوید که هر ماژول تصویر متعلق به کلاس CSS است "et-js-tilt".

کتابخانه JQuery "tilt.js" را اضافه کنید

برای افزودن کتابخانه tilt.js و قطعه کد مورد نیاز برای انحراف تصاویر، ما از یک ماژول Code استفاده می کنیم.

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

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

سپس باید به آن دسترسی داشته باشیم کتابخانه tilt.js با افزودن اسکریپتی که tilt.js را از CDN آنها وارد می کند (https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery. min.js). اسکریپت زیر را در کادر کد قرار دهید.

از کد src زیر در یک تگ اسکریپت برای وارد کردن کتابخانه استفاده کنید:

src="https://cdnjs.cloudflare.com/ajax/libs/tilt.js/1.2.1/tilt.jquery.min.js"

می بایست شبیه به این باشه:

واردات مهم است tilt.js قبل از اضافه کردن کدی که از آن استفاده می کند. بنابراین پس از اشاره اسکریپت به tilt.js، تگ های اسکریپت لازم را برای بسته بندی JQuery که باید اضافه کنیم اضافه کنید. سپس JQuery زیر را بین تگ های اسکریپت قرار دهید.

jQuery(document).ready(function ($) {
  if ($(window).width() > 980) {
 
    $(".et-js-tilt").tilt({
      glare: true,
      maxGlare: 0.7,
      scale: 1.1,
      perspective: 300,
    });
 
  }
});

توجه داشته باشید که تابع tilt() درون یک دستور if قرار دارد که وقتی عرض مرورگر بیشتر از 980 پیکسل باشد اجرا می شود. این اطمینان حاصل می کند که اثر فقط در رایانه رومیزی رخ می دهد.

در اینجا نتیجه است.

افکت شناور شیب به خط اضافه شد

همانطور که قبلا ذکر کردیم، می توانید این افکت شیب شناور را به هر عنصر Divi اضافه کنید. این شامل یک خط کامل است. 

علاوه بر این، می‌توانید افکت شیب را به یک ردیف اضافه کنید و در عین حال جلوه‌های شیب را برای هر یک از ماژول‌های داخل ردیف حفظ کنید.

در اینجا چگونه است.

خط را کپی کنید و کلاس CSS منحصر به فرد را به خط اضافه کنید

ردیف موجود از تصاویر را کپی کنید، سپس تنظیمات ردیف تکراری را باز کنید. زیر زبانه فناوری، به خط یک کلاس CSS منحصر به فرد به صورت زیر بدهید:

• کلاس CSS: et-row-js-tilt

جی کوئری اضافه کنید

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

$(".et-row-js-tilt").tilt({
  scale: 1,
  perspective: 1200,
});

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

در اینجا نتیجه است.

توجه داشته باشید که چگونه ردیف دارای یک ویژگی شیب است که وقتی ماوس را روی ردیف نگه می‌دارید فعال می‌شود و هر یک از ماژول‌های Image نیز همان افکت شیب را دارند که قبلا اضافه کردیم. به این ترتیب می توانید نمونه های افکت شیب تودرتو را اعمال کنید.

افکت Tilt Hover را به ستونی با چندین ماژول Divi اضافه کنید

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

برای ارائه مثالی از نحوه انجام این کار، می‌خواهیم یک افکت شیب بر شناور را به ستونی که شامل یک ماژول Image، یک ماژول متن و یک ماژول دکمه است اضافه کنیم.

یک خط جدید اضافه کنید

برای شروع، یک ردیف جدید با ساختار ستون زیر ایجاد کنید:

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

در ستون 2 (ستون وسط)، یک ماژول Image جدید اضافه کنید.

یک تصویر در ماژول آپلود کنید.

تراز تصویر را در مرکز قرار دهید.

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

در زیر ماژول Image، یک ماژول Text با هدر H2 زیر اضافه کنید:

<h2>Local Organic</h2>

در مرحله بعد، سبک های عنوان H2 را به صورت زیر به روز کنید:

• قلم: Berkshire Swash
• تراز متن: در مرکز
• رنگ متن: #000000
• اندازه: 60px
• ارتفاع خط: 1,2 em

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

در زیر ماژول Text، یک ماژول دکمه اضافه کنید.

متن دکمه را برای خواندن "بیشتر بدانید..." به روز کنید

تنظیمات شخصی سازی را به صورت زیر به روز کنید:

• تراز دکمه: مرکز

• از سبک های سفارشی برای دکمه استفاده کنید
• اندازه متن دکمه: 18 پیکسل
• رنگ متن: #fff
• پس زمینه دکمه: #000

• پهنای حاشیه دکمه: 0 پیکسل
• شعاع حاشیه: 100 پیکسل
• قلم دکمه: Quicksand
• وزن قلم: پررنگ

• بالشتک (بالا و پایین): 16 پیکسل
• بالشتک (چپ و راست): 30 پیکسل

• Box Shadow: اسکرین شات را ببینید

پارامترهای ستون

پس از تکمیل هر سه ماژول، تنظیمات ستون والد آن ماژول ها (ستون 2) را باز کنید و موارد زیر را به روز کنید:

• پس زمینه: #f5cee6

• بالشتک (بالا و پایین): 50 پیکسل
• بالشتک (چپ و راست): 20 پیکسل

اضافه کردن کلاس CSS به ستون

در تب پیشرفته، کلاس CSS زیر را اضافه کنید:

• کلاس CSS: et-column-js-tilt

jQuery را برای اعمال افکت شیب به ستون اضافه کرد

برای افزودن افکت skew به ستون، می‌توانیم قطعه مشابه دیگری از jQuery اضافه کنیم که ستون CSS Class را هدف قرار می‌دهد. 

قطعه کد زیر را در زیر قطعه کد قبلی که ردیف را هدف قرار می دهد، قرار دهید.

$(".et-column-js-tilt").tilt({
  scale: 1.1,
  perspective: 1000,
});

نتیجه نهایی است.

افکت اختلاف منظر سه بعدی به داخلی ها اضافه شده است

برای جلوه شیب شناور پیشرفته‌تر، می‌توانیم جلوه منظر سه بعدی را به ماژول‌های ستون داخلی اضافه کنیم. 

با استفاده از ترکیبی از پرسپکتیو و transform:translateZ()، می‌توانیم هر یک از ماژول‌های ستون را زمانی که افکت tilt-on-hover فعال است، در فضای سه بعدی ظاهر کنیم.

در اینجا چگونه است.

خط قبلی را کپی کنید

ابتدا ردیف قبلی را با افکت کج به ستون وسط کپی کنید.

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

سپس ستون وسط (ستون 2) را با یک کلاس CSS منحصر به فرد به صورت زیر به روز کنید:

• کلاس CSS: et-column-js-tilt-3d

CSS سفارشی

برای اطمینان از اینکه ماژول های داخلی جلوه سه بعدی را حفظ می کنند، CSS سفارشی زیر را به عنصر ستون اصلی اضافه کنید:

transform-style: preserve-3d;

jQuery و CSS را اضافه کنید

در مرحله بعد، چند قطعه jQuery دیگر را در زیر قطعه تابع skew قبلی که ستون را به صورت زیر هدف قرار می دهد، اضافه کنید:

const columnTilt3d = $(".et-column-js-tilt-3d").tilt({
  scale: 1.1,
  perspective: 1000,
});
columnTilt3d.on("tilt.mouseEnter", function (e) {
  $(e.target).addClass("tilt-active");
});
columnTilt3d.on("tilt.mouseLeave", function (e) {
  $(e.target).removeClass("tilt-active");
});

این jQuery یک تابع شیب اولیه دیگر را مانند مثال قبلی به ستون اضافه می کند. 

.et-column-js-tilt-3d.tilt-active .et_pb_image {
  transform: translateZ(100px);
}
.et-column-js-tilt-3d.tilt-active .et_pb_text {
  transform: translateZ(40px);
}
.et-column-js-tilt-3d.tilt-active .et_pb_button {
  transform: translateZ(50px);
}

حالا نتیجه نهایی را ببینید. توجه کنید که چگونه این سه ماژول در فضای سه بعدی در حین چرخش افکت شیب ظاهر می شوند.

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

نتایج نهایی

در اینجا نگاهی دیگر به نتایج نهایی برای مثال های ما داریم.

اکنون DIVI را دانلود کنید!!!

نتیجه

جلوه های شیب شناور ارائه شده توسط Tilt.js آزمایش کردن با آنها واقعا سرگرم کننده است 

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

امیدواریم این آموزش الهام بخش شما برای پروژه های بعدی Divi باشد. اگر نگرانی یا پیشنهادی دارید، ما را بیابید بخش نظرات برای بحث در مورد

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

اما در عین حال، این مقاله را در شبکه های اجتماعی مختلف خود به اشتراک بگذارید.

...