Divi اور Divi بلڈر کا استعمال کرتے ہوئے خوبصورت ورڈپریس ویب سائٹس کی تعمیر

دیوئی کے ساتھ متحرک تھری ڈی ماؤس موو اینیمیشن اثر کیسے بنائیں

Rifat Divi سبق Apr 26, 2021

دیوی بلڈر کی مدد سے ہم بہت سے منفرد اور تخلیقی ڈیزائن کر سکتے ہیں۔ آج ہم دیکھیں گے کہ ڈیوی ویژیول پیج بلڈر کا استعمال کرتے ہوئے ایک متحرک تھری ڈی اینیمیشن کیسے بنائی جائے جو ماؤس کرسر کی حرکت کے ساتھ متعامل ہے۔ عام طور پر، ہم کسی شے پر ہوور یا اینیمیشن پر کلک کرتے ہیں لیکن یہاں، ہم ایک ایسی شے کو متحرک کریں گے جو ماؤس کی حرکت کے ساتھ مختلف سمتوں میں حرکت کرے گی۔ اس کے علاوہ، آپ دیکھیں گے کہ کس طرح ایک چیز ہے کہ انٹرایکٹو حرکت پذیری کرتا ہے اور ڈیزائن میں زندگی لانے کے لئے ایک منڈلاتا 3ڈی اثر شامل کرنے کے لئے!

ہم ڈیزائن کے لئے دیوئی معمار استعمال کریں گے اور بعد میں، ہم اینیمیشن فعالیت بنانے کے لئے کچھ سی ایس ایس اور جے کوری کوڈ شامل کریں گے جو ڈیزائن کو زندہ کر دے گا! آپ اپنے زائرین کو ایک نئے طریقے سے اپنی مصنوعات دکھانے کے لئے اس ڈیزائن کا استعمال کرسکتے ہیں!

آخری ڈیزائن

اگر سب کچھ ٹھیک ہو جاتا ہے جیسا کہ ہم منصوبہ بندی کرتے ہیں، تو ہمارا آخری ڈیزائن بہت کچھ اس طرح نظر آئے گا۔

دیوئی پر متحرک تھری ڈی ماؤس موو اثر بنانا

کام 1: صفحہ سیٹ اپ

چونکہ آپ اپنے ویب پیج پر یہ اثر پیدا کرنا چاہتے ہیں، ہمیں یقین ہے کہ آپ پہلے ہی دیوئی کا تازہ ترین ورژن انسٹال کر چکے ہیں۔ اب، ڈیش بورڈ سے "ایک صفحہ شامل کریں"، اسے اپنی ضرورت کے مطابق عنوان دیں اور اسے دیوئی بلڈر کے ساتھ وسعت دیں۔

Divi ڈاؤن لوڈ، اتارنا بہترین ورڈپریس تھیم

دنیا میں سب سے زیادہ مقبول ورڈپریس تھیم اور حتمی ورڈپریس پیج بلڈر

Divi ڈاؤن لوڈ، اتارنا

اب "شروع سے تعمیر کریں" کا انتخاب کریں اور ہیڈ شروع کریں۔

کام 2: ہوور کنٹینر اور کارڈ بنانا

ہوور پر تھری ڈی اینیمیشن کو فعال کرنے کے لیے ہم صف کو نشانہ بنائیں گے۔ ہم اسے "ہوور کنٹینر" کہیں گے۔ دوسری طرف کالم ایک کارڈ کے طور پر کام کرے گا، جو قطار پر منڈلاتے ہوئے بچوں کے عناصر کے ساتھ متحرک ہوگا۔

Section Styling

طے شدہ سیکشن سیٹنگیں کھولیں اور درج ذیل تازہ کاری کریں

  • پس منظر رنگ - آر جی بی اے (68,55,99,0.1). یہاں 0.1 غیر شفافیت ہے۔ 
  • اوپر اور نیچے دونوں پر "7ویایچ" پیڈنگ شامل کریں۔

Hover Container

اب تیار سیکشن میں ایک کالم ی صف شامل کریں۔

اب درج ذیل تبدیلیوں کے ساتھ صف سیٹنگ کو اپ ڈیٹ کریں۔

  • "مخصوص گٹر چوڑائی" فعال کریں اور قیمت کو 1 میں تبدیل کریں
  • چوڑائی 100٪
  • زیادہ سے زیادہ چوڑائی: 70٪ (ڈیسک ٹاپ)، 60٪ (ٹیبلٹ)، 50٪ (موبائل)
  • پیڈنگ: اوپر اور نیچے 7وی ایچ، بائیں اور دائیں پر 5وی ڈبلیو. 

جدید ٹیب کے تحت، ایک مخصوص سی ایس ایس کلاس شامل کریں۔

  • سی ایس ایس کلاس: ایٹ ہوور کنٹینر

اس کے علاوہ، مرکزی عنصر میں سی ایس ایس کوڈ شامل کریں۔

display:flex;
align-items:center;
justify-content:center;

The Card

صف تازہ کاری ختم کرنے کے بعد، کارڈ کو سٹائل کرنے کے لیے کالم کی ترتیب کھولیں۔

  • پس منظر رنگ #ffffff
  • پیڈنگ: 7وی ایچ ٹاپ، 7وی ایچ باٹم، 5 فیصد بائیں، 5 فیصد دائیں
  • گول کونے: 30pکس
  • باکس شیڈو: سکرین شاٹ دیکھیں
  • باکس سایہ عمودی پوزیشن: 0Pکس
  • باکس شیڈو دھندلا طاقت: 80پی ایکس
  • سایہ رنگ: آر جی بی اے (0,0,0,0.2)

جدید ٹیب کے تحت، ایک مخصوص سی ایس ایس کلاس شامل کریں۔

  • سی ایس ایس کلاس: ایٹ ماؤس موو کارڈ

اس کے علاوہ، اس سی ایس ایس کوڈ کو مرکزی عنصر کے تحت شامل کریں۔

max-width: 600px;

اب افقی اور عمودی دونوں اوور فلو کے لئے اوور فلو پراپرٹیز کو نظر آنے کے لئے سیٹ کریں۔

کام 3: کارڈ عنصر بنانا

The Circle Background With Logo

ہمارے کارڈ کے پہلے عنصر کے لئے، ہم ایک دائرہ پس منظر ہے کہ ہمارا لوگو ہے کہ ہماری اہم مصنوعات کی تصویر کے پیچھے بیٹھ جائے گا شامل شامل کرنے جا رہے ہیں.

اب کالم پر "متن" شامل کریں اور جسم کو خالی رکھنے کے لیے طے شدہ متن ہٹا دیں۔

اس کا وقت درجہ بندی کا پس منظر شامل کرنے کا ہے۔

  • درجہ بندی پس منظر بائیں رنگ #443763
  • درجہ بندی پس منظر دائیں رنگ #EA3900
  • درجہ بندی سمت 90 ڈیجی پر سیٹ کریں

درجہ بندی رنگ کے ساتھ ساتھ پس منظر کی تصویر کے طور پر لوگو شامل کریں۔ تصویر کا سائز 60پی ایکس بمطابق 60پی ایکس ہونا چاہئے اور بیک گراؤنڈ امیج سائز ویلیو کو "اصل سائز" پر سیٹ کرنا چاہئے

"ڈیزائن" ٹیب پر، اقدار کو "سائزنگ" سیکشن پر درج ذیل کے طور پر تبدیل کریں۔ ڈیسک ٹاپ کے لیے چوڑائی کی قیمت 160پی ایکس، ٹیبلٹ کے لیے 150پی ایکس اور سمارٹ فون کے لیے 80پی ایکس سیٹ کریں۔

اس کے علاوہ اونچائی کی قدر چوڑائی کے برابر مقرر کریں۔ آخر میں، "بارڈر" سیکشن کے تحت 80 فیصد کی قدر کے لئے گول کونوں کو سیٹ کریں۔

"ایڈوانسڈ" ٹیب پر، نیچے دیئے گئے عہدوں کو اپ ڈیٹ کریں۔

  • پوزیشن : مطلق
  • مقام : اوپر مرکز
  • عمودی آفسیٹ : 15٪

The Card Image

اب، جیسا کہ ہم لوگو کے حصے کے ساتھ کیا جاتا ہے, آئیے کارڈ پر مصنوعات کی تصویر شامل کرتے ہیں۔ ہم پچھلے ٹیکسٹ ماڈیول کے تحت ایک نیا امیج ماڈیول شامل کریں گے۔

اب مصنوعات کی تصویر اپ لوڈ کریں۔ اس بات کو یقینی بنائیں کہ تصویر شفاف ہے اور پی این جی فارمیٹ میں ہے۔ یہاں، ہم ایک سرخ فیراری کی تصویر کا استعمال کر رہے ہیں.

"ڈیزائن" ٹیب پر، اقدار کو تبدیل کریں جیسا کہ ذیل میں ذکر کیا گیا ہے۔

  • تصویر صف بندی: مرکز
  • چوڑائی: 90٪
  • حاشیہ: 12وی ایچ اوپر اور 5وی ایچ نیچے (اپنی ضرورت کے مطابق اقدار کو ایڈجسٹ کریں)

"ایڈوانسڈ" ٹیب سیکشن پر، تصویر کے لیے ایک مخصوص سی ایس ایس کلاس شامل کریں۔

  • سی ایس ایس کلاس: ایٹ کارڈ تصویر

The Car Heading

اب ہم کارڈ کے لئے ایک سرخی بنائیں گے۔ پوزیشن میں ہماری کار کی تصویر کے ساتھ, آئیے اپنے کارڈ کی سرخی بنانے کے لئے تصویر کے نیچے ایک ٹیکسٹ ماڈیول شامل کرتے ہیں۔

جسم میں طے شدہ متن کو ہٹا دیں اور ذیل میں دی گئی ایچ ٹی ایم ایل کی ایچ 2 سرخی شامل کریں۔

<h2>The <span style="color: #ea3900:"> Ferrari</span> Car</h2>

اب، ڈیزائن سیکشن پر مندرجہ ذیل اقدار تبدیل کریں:

  • سرخی 2 فانٹ : بیبس نیو
  • سرخی 2 متن صف بندی : مرکز
  • سرخی 2 متن رنگ: #443763
  • سرخی 2 متن سائز : ڈیسک ٹاپ کے لئے 75پی ایکس، ٹیبلٹ کے لئے 60پی ایکس اور موبائل کے لئے 45پی ایکس۔
  • سرخی 2 حرف وقفہ کاری : 0.05ایم
  • حاشیہ : نیچے 4ویایچ

"ایڈوانسڈ سیکشن" پر ایک مخصوص سی ایس ایس کلاس شامل کریں

  • سی ایس ایس کلاس: ایٹ کارڈ ہیڈنگ

The Card Info

اب ہم کارڈ کے بارے میں معلومات شامل کریں گے۔ ہم معلومات کے لئے ایک اور ٹیکسٹ ماڈیول شامل کریں گے کیونکہ اس سے ہمیں ان میں سے ہر ایک میں مختلف تھری ڈی اینیمیشن اثرات شامل کرنے کی اجازت ہوگی۔ آئیے سرخی متن ماڈیول کے تحت ایک نیا متن ماڈیول شامل کرتے ہیں۔

اب جسم میں درج ذیل متن مواد شامل کریں۔

<p>The one and only Ferrari Car <br>(By CodeWatchers)</p>

ڈیزائن ٹیب کے تحت درج ذیل کو اپ ڈیٹ کریں:

  • متن فانٹ وزن : نیم بولڈ
  • متن سائز : 18پی ایکس (ڈیسک ٹاپ) اور 16پی ایکس (ٹیبلٹ اور فون.)
  • متن لائن اونچائی : 1.8ایم
  • متن صف بندی : مرکز
  • حاشیہ : 4و

اب اس ماڈیول میں ایک مخصوص سی ایس ایس کلاس شامل کریں۔

  • سی ایس ایس کلاس: ایٹ کارڈ معلومات

The Button

اب معلومات متن ماڈیول کے تحت ایک نیا بٹن ماڈیول شامل کریں۔ اس سے کارڈ پر ایک بٹن شامل ہوگا۔

بٹن سیٹنگوں کے "مشمول" جدول پر بٹن متن تبدیل کریں۔

  • بٹن متن: پیشکش کریں۔

"ڈیزائن" ٹیب پر بٹن کو اسٹائل کریں جیسا کہ نیچے ذکر کیا گیا ہے۔

  • بٹن کے لیے مخصوص طرزیں استعمال کریں: جی ہاں
  • بٹن متن سائز: 25پی ایکس (ڈیسک ٹاپ)، 20پی ایکس (ٹیبلٹ)، 16پی ایکس (فون)
  • بٹن متن رنگ: #ffffff
  • بٹن پس منظر رنگ: #443763
  • بٹن بارڈر چوڑائی: 0Pکس
  • بٹن بارڈر رداس: 30پی ایکس
  • بٹن حرف فاصلہ کاری: 0.1ایم
  • بٹن فانٹ: بیبس نیو
  • پیڈنگ (ڈیسک ٹاپ): 0.5ایم اوپر، 0.5ایم نیچے، 3ایم بائیں، 3ایم دائیں
  • پیڈنگ (فون): 0.5ایم اوپر، 0.5ایم نیچے، 2ایم بائیں، 2ایم دائیں

اب ایک مخصوص سی ایس ایس کلاس شامل کریں

  • سی ایس ایس کلاس: ایٹ کارڈ بٹن

Result Till Now

یہاں حرکت پذیری کے بغیر ہمارا آخری ڈیزائن آؤٹ پٹ ہے۔

اب ہم اس ڈیزائن پر زندگی لانے کے لئے کچھ مخصوص کوڈ شامل کریں گے۔

ٹاسک 4: سی ایس ایس اور جے کوئری کسٹم کوڈ شامل کرنا

چونکہ ہمارا ڈیزائن مکمل ہو چکا ہے، اب ہم اپنے نئے بنائے گئے کالموں اور کارڈ عناصر کو دینے کے لئے سی ایس ایس اور جے کوئری کوڈ شامل کریں گے تاکہ اسے ایک متحرک تھری ڈی ماؤس موو اینیمیشن اثر دیا جا سکے۔

ایسا کرنے کے لیے بٹن ماڈیول کے تحت ایک نیا کوڈ ماڈیول شامل کریں۔

دیا گیا مخصوص سی ایس ایس کوڈ باکس میں چسپاں کریں اور کوڈ کو "طرز" ٹیگ میں لپیٹنا یقینی بنائیں۔

<style>
/*add perspective to row for 3d perspective of child elements*/
.et-hover-container {
perspective: 1000px;
}
 
/*preserve-3d needed for 3d effect on card elements*/
.et-mousemove-card {
transform-style: preserve-3d;
transition: all 100ms linear !important;
}
 
/*transition timing function and duration for card elements*/
.et-card-image,
.et-popout-title,
.et-card-info,
.et-mousemove-card .et_pb_button_module_wrapper {
transition: all 750ms ease-out !important;
}
 
/*transform styles for card elements*/
.et-card-image.transform-3d {
transform: translateZ(150px) rotateZ(10deg) !important;
}
.et-card-heading.transform-3d {
transform: translateZ(150px) !important;
}
.et-card-info.transform-3d {
transform: translateZ(50px) !important;
}
.et-mousemove-card .et_pb_button_module_wrapper.transform-3d {
transform: translateZ(150px) rotateX(20deg) !important;
}
</style>

کوڈ ماڈیول کے مواد ٹیب کے تحت سی ایس ایس کوڈ اس طرح نظر آئے گا۔

سی ایس ایس کے نیچے، درج ذیل جے کوری شامل کریں اور اس بات کو یقینی بنائیں کہ کوڈ "نوشتہ" ٹیگز کے اندر ہے۔

<script>
jQuery(document).ready(function ($) {
//Items
var $hoverContainer = $(".et-hover-container");
var $mousemoveCard = $(".et-mousemove-card");
var $cardImage = $(".et-card-image");
var $cardHeading = $(".et-card-heading");
var $cardInfo = $(".et-card-info");
var $cardButton = $(".et-mousemove-card .et_pb_button_module_wrapper");
 
//Moving Animation Event
$hoverContainer.on("mousemove", function (e) {
let xAxis = (window.innerWidth / 2 - e.clientX) / 25;
let yAxis = (window.innerHeight / 2 - e.clientY) / 25;
$mousemoveCard.css(
"transform",
`rotateY(${xAxis}deg) rotateX(${yAxis}deg)`
);
});
 
//Animate on Hover
$hoverContainer.hover(function () {
$mousemoveCard.toggleClass("transform-3d");
$cardHeading.toggleClass("transform-3d");
$cardImage.toggleClass("transform-3d");
$cardButton.toggleClass("transform-3d");
$cardInfo.toggleClass("transform-3d");
});
 
//Pop Back on mouseleave
$hoverContainer.on("mouseleave", function () {
$mousemoveCard.css("transform", `rotateY(0deg) rotateX(0deg)`);
});
});
</script>

درج ذیل کوڈ کو کوڈ پینل میں اس طرح دیکھنا چاہئے۔

اب پورا کام محفوظ کریں اور پورے کام کو براہ راست صفحے میں چیک کریں۔

حتمی پیداوار

تو ہمارا پورا ڈیزائن اس طرح لگتا ہے۔ ٹھنڈا ہہ!

آخری الفاظ

آج کے ٹیوٹوریل میں ہم نے جو تھری ڈی اینیمیشن دیکھی ہے وہ سیکھنے میں بہت آسان اور مزے دار ہے۔ یہ ایک منفرد اور جدید حرکت پذیری اثر ہے جسے ماؤس کی نقل و حرکت سے کنٹرول کیا جاسکتا ہے۔ ہم اسے کچھ سادہ سی ایس ایس اور جے کوری کوڈنگ کے ذریعے ڈیزائن کرسکتے ہیں۔ بلاشبہ دیوئی ایک طاقتور پیج بلڈر ہے اور اپنی مرضی کے مطابق کوڈنگ کے ذریعے ویب سائٹس پر جادوئی ڈیزائن لانا ممکن ہے۔