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

ڈیویٹ پر انیمیٹ. جے ایس اور لیٹرائز ڈاٹ جی ایس کا استعمال کرتے ہوئے ٹیکسٹ کیسے متحرک کریں

Blair2004 ورڈپریس سبق Dec 15, 2020

جب کسی ویب سائٹ کو حرکیات دینے کی بات ہو تو DIVI بہت سارے متحرک امکانات کے ساتھ آتے ہیں۔ تاہم ، آپ ان متحرک تصاویر کو ایک بار میں صرف ایک بار کنٹینر میں شامل کرسکتے ہیں۔ اگر کچھ حرکت پذیری کے ل perfectly ، وقت کے مطابق وقتی طور پر یہ کافی ہے ، تو آپ جلدی سے اس کو محدود پاسکتے ہیں۔ مثال کے طور پر ، کبھی کبھی ، آپ ایک سے زیادہ ٹیکسٹ انیمیشن شامل کرنا چاہتے ہیں اور یہی بات ہم آج ٹیکسٹ ماڈیول ، لیٹرائز ڈاٹ جے ایس اور انیمیٹ ڈاٹ جےز کا استعمال کرتے ہوئے کریں گے جو جاوا اسکرپٹ لائبریری ہیں جو DOM عناصر کو CSS حرکت پذیری فراہم کرتی ہیں۔ اس نقطہ نظر کے ساتھ ، آپ کسی دوسرے Divi ماڈیول کے ساتھ ایسی حرکت پذیری تخلیق کرسکیں گے۔

آو شروع کریں.

ممکنہ اختتامی نتیجہ

یہاں ایک ممکنہ نتیجہ ہے جو ہم سبق کے آخر میں پہنچ سکتے ہیں۔

1. ہیرو سیکشن ڈیزائن بنائیں

ہم ایک بہت بڑا سیکشن تشکیل دے کر شروع کریں گے جس کا نام "ہیرو سیکشن" ہے ، اور اس میں ایک انوکھا سیکشن شامل کریں گے۔

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

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

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

نیا سیکشن شامل کریں

Spacing

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

  • اوپر کی بھرتی: 180 پکس (ڈیسک ٹاپ) ، 100 پکس (ٹیبلٹ) ، 50 پکس (فون)
  • نیچے کی بھرتی: 180 پکس (ڈیسک ٹاپ) ، 100 پکس (ٹیبلٹ) ، 50 پکس (فون)

ایک قطار شامل کریں

Single Column Structure

مندرجہ ذیل کالم ڈھانچے کا استعمال کرکے ایک نئی صف شامل کرکے آگے بڑھیں:

Configure Spacing

ہم اب کوئی ماڈیول شامل نہیں کریں گے بلکہ اس کے بجائے ، بھرتی کی ترتیبات کی وضاحت کریں۔

  • نیچے کی بھرتی: 0 px

پہلے کالم میں ٹیکسٹ ماڈیول شامل کریں

Add H1 Copy

ہم صرف اس ماڈیول کو اس قطار میں شامل کریں گے وہ ایک ٹیکسٹ ماڈیول ہے۔ اپنی پسند کا کچھ H1 مواد شامل کریں۔

H1 Text Settings

ماڈیول ڈیزائن ٹیبز پر جائیں اور آئیے درج ذیل متن کی ترتیبات کو تبدیل کریں۔

  • ہیڈنگ فونٹ: مونٹسیراٹ
  • عنوان کی رنگت: rgba (232،232،232،0.41)
  • ہیڈنگ ٹیکسٹ سائز: 80px (ڈیسک ٹاپ) ، 50px (ٹیبلٹ) ، 40px (فون)
  • خط کی وقفہ کاری: -10 px (ڈیسک ٹاپ) ، -4 px (ٹیبلٹ) ، -3 px (فون)
  • ہیڈنگ لائن کی اونچائی: 0.6 ایم (ڈیسک ٹاپ) ، 0.7 ایم (ٹیبلٹ) ، 0.8 ایم (فون)

ایک دوسری قطار شامل کریں

Column Structure

آئیے درج ذیل کالم کے ڈھانچے کے ساتھ پچھلے سے نیچے ایک اور صف جوڑیں۔

Sizing

قطار کی ترتیبات کو کھولیں اور sizing کی ترتیبات میں زیادہ سے زیادہ چوڑائی کو تبدیل کریں۔

  • زیادہ سے زیادہ چوڑائی: 1680px

Spacing

اگلے سب نیچے والے مارجن اور بھرتی کو ہٹا دیں۔

  • نیچے مارجن: 0 پکس
  • نیچے کی بھرتی: 0 px

دوسرے کالم میں تصویری ماڈیول شامل کریں

Upload An Illustration

اس کے بعد ، ہم تصویری ماڈیول شامل کریں اور اپنی پسند کی مثال اپ لوڈ کریں۔ یہ پس منظر کی مثال کی طرح نظر آنا چاہئے۔

Sizing

اب ماڈیول کے ڈیزائن ٹیب پر جائیں اور شبیہہ پر پوری چوڑائی پر مجبور کریں۔

  • پوری چوڑائی پر مجبور کریں: ہاں

Spacing

اگلے میں کچھ منفی نیچے مارجن شامل کریں۔

  • نیچے مارجن: -12٪

Animation

آئیے مندرجہ ذیل حرکت پذیری کی ترتیبات کو شامل کرکے ماڈیول کی ترتیبات کو مکمل کریں:

  • حرکت پذیری کا انداز: دھندلا ہونا
  • حرکت پذیری میں تاخیر: 3000 ملی میٹر

تیسری قطار شامل کریں

Define The Column Structure

اگلی اور آخری صف پر۔ مندرجہ ذیل کالم ڈھانچے کا استعمال کریں:

Spacing

قطار کے ڈیزائن ٹیب پر آگے بڑھیں اور کچھ کسٹم پیڈنگ ویلیوز شامل کریں۔

  • اوپر کی بھرتی: 10٪
  • نیچے کی بھرتی: 5٪
  • بائیں بازو: 3٪
  • دائیں بھرتی: 3٪

Box Shadow

اس کے بعد ، ایک ٹھیک ٹھیک خانہ سایہ منتخب کریں۔

  • باکس شیڈو کلنک کی طاقت: 80px
  • شیڈو رنگین: rgba (0،0،0،0.06)

Animation

اور درج ذیل حرکت پذیری شامل کرکے قطار کی ترتیبات کو مکمل کریں:

  • حرکت پذیری کا انداز: دھندلا ہونا
  • حرکت پذیری میں تاخیر: 3000 ملی میٹر

تیسری صف میں ٹیکسٹ ماڈیول شامل کریں

Provide Content

آئیے ماڈیولز شامل نہ کریں۔ ہمیں جو پہلا ماڈیول درکار ہے وہ کچھ مواد کے ساتھ ایک ٹیکسٹ ماڈیول ہے۔

Text Settings

ماڈیول کے ڈیزائن ٹیب پر جائیں اور اس کے مطابق متن کی ترتیبات میں ترمیم کریں:

  • ٹیکسٹ فونٹ: لاٹو
  • متن کا سائز: 18px
  • متن خط وقفہ کاری: 1px
  • متن کی اونچائی: 2.7 منٹ

کالم میں ایک بٹن ماڈیول شامل کریں

Provide Text

ہمیں جس آخری ماڈیول کی ضرورت ہے وہ ایک بٹن ماڈیول ہے۔ اپنی پسند کا متن درج کریں۔

Button Settings

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

  • بٹن کے لئے کسٹم اسٹائل کا استعمال کریں: جی ہاں
  • بٹن ٹیکسٹ سائز: 16 پکس
  • بٹن متن کا رنگ: # 171 سییف
  • بٹن بارڈر کی چوڑائی: 0 px
  • بٹن بارڈر رداس: 0 px
  • بٹن فونٹ: مونٹسیریٹ
  • بٹن فونٹ انداز: بڑے

Spacing

اس کے بعد ، خلا کی ترتیبات کے اندر درج ذیل بھرتی قیمتوں کا اطلاق کریں:

  • اوپر کی بھرتی: 2٪
  • نیچے کی بھرتی: 2٪
  • بائیں بازو: 5٪
  • دائیں بھرتی: 5٪

Box Shadow

مندرجہ ذیل باکس سائے کو شامل کرکے ماڈیول کی ترتیبات کو مکمل کریں:

  • باکس شیڈو عمودی پوزیشن: 5px
  • باکس شیڈو پھیلانے کی طاقت: -2 px
  • شیڈو رنگین: # 171 سییف

2. ہیڈ لائن میں سی ایس ایس کلاس شامل کریں

پہلا ٹیکسٹ ماڈیول کھولیں اور ٹیکسٹ ٹیب پر کلک کریں

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

H1 ٹیگ میں ID وصف شامل کریں

H1 کے اندر ایک کسٹم ID کا وصف شامل کریں۔

  • ID = "سرخی کاپی"

3. لیٹرائز اور موبائل فون لائبریریاں شامل کریں

کالم میں کوڈ ماڈیول شامل کریں

متحرک تصاویر تخلیق کرنے کیلئے ، ہم لیٹرائز ڈاٹ جے ایس اور اینی می ڈس لائبریریوں کا استعمال کر رہے ہیں۔ ان لائبریریوں کو شامل کرنے کیلئے ، اپنی آخری قطار کے کالم میں ایک نیا کوڈ ماڈیول داخل کریں۔

دونوں لائبریریاں شامل کریں

پھر ، مندرجہ ذیل ذرائع پر مشتمل دو مختلف اسکرپٹ ٹیگ شامل کریں جو لائبریریوں میں واپس جائیں۔

  • <اسکرپٹ src = "https://cdn.jsdelivr.net/gh/WojciechWKROPCE/letterize-js/lib/letterize.min.js"> </script>
  • <اسکرپٹ src = "https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"> </script>

4. حرکت پذیری کا کوڈ شامل کریں

انفرادی سطح پر خط کے لئے حرکت پذیری

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

jQuery(function ($) {
   $(document).ready(function () {
          var headlineCopy = new Letterize({
          targets: "#headline-copy"
       });
       var animation = anime.timeline({
          targets: headlineCopy.listAll(),
          delay: anime.stagger(20),
          loop: false
       });
      animation.add({
          opacity: [0, 1],
          scale: [0, 1.2, 1],
          duration: 1500,
          elasticity: 600,
          color: '#000',
      }).add({
          color: '#00FFF7',
      }).add({
          color: '#D2BEFB',
      }).add({
         color: '#171cff',
      });
   });
});

ہر "شامل" فنکشن متحرک تصاویر کی ٹائم لائن میں حرکت پذیری کی نمائندگی کرتا ہے۔ یہ متحرک تصاویر ہر خط پر اکیلا طور پر لاگو ہوتی ہیں۔ آپ ان اضافی افعال میں ترمیم کرسکتے ہیں جیسا کہ آپ لیٹرائز API کی پیروی کرنا چاہتے ہیں ، نئے شامل کریں یا موجودہ کو ہٹا دیں ، بس اس بات کو یقینی بنائیں کہ آخر میں شامل ہونے والی آخری تقریب کو '؛' کے ساتھ صحیح طریقے سے بند کردیا گیا ہے (جیسا کہ آپ اوپر والے کوڈ میں دیکھ سکتے ہیں) .

آپ ان "شامل" افعال کے اندر مختلف سی ایس ایس پراپرٹیز شامل کرسکتے ہیں۔ آپ خصوصیات کے بارے میں اور وہ Anime.js دستاویزات کی مثالیں میں استعمال ہونے والے طریقوں کے بارے میں مزید معلومات حاصل کرسکتے ہیں۔

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

سزا کے لئے حرکت پذیری

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

anime.timeline({loop: false}) 
   .add({targets: '#headline-copy',lineHeight: '1em',delay: '1500' }) 
   .add({targets: '#headline-copy',translateX: ['-5%', 0],letterSpacing: '-2px',});

مدت کے لئے کسٹم CSS شامل کریں

اب ، چونکہ ہم نے اپنے ہر ایک خط کے لئے ایک الگ دورانیہ تشکیل دیا ہے ، لہذا ہمیں خطوط کو ایک دوسرے کے ساتھ ظاہر ہونے کی اجازت دینے کے ل each ہر اسپین کی ڈسپلے پراپرٹی کو تبدیل کرنے کی ضرورت ہوگی۔ ایسا کرنے کے ل we ، ہم اپنے کوڈ ماڈیول میں کچھ سی ایس ایس کوڈ شامل کریں گے۔ اس بات کو یقینی بنائیں کہ آپ کوڈ کو اسٹائل ٹیگ کے درمیان رکھیں۔

#headline-copy span {display: inline-block;}

حتمی پیش نظارہ

اب جب کہ ہم تمام مراحل سے گزر چکے ہیں ، آئیے مختلف اسکرین سائز میں اس کے حتمی جائزہ لیں۔

حتمی خیالات

لہذا اس ساری پوسٹ میں ، ہم آپ کو دکھائے ہیں کہ کس طرح آپ کی سرخی میں متن متحرک تصاویر تخلیق کریں۔ ہم نے ڈیویی کے اندر پورا ڈیزائن بنوایا ہے اور فریم ورک کو Letterize.js اور Anime.js لائبریریوں کے ساتھ جوڑ دیا ہے۔ کیا آپ اپنے بلاگ پر اس حرکت پذیری کی جانچ کریں گے؟ کیا آپ ہمارے ساتھ اشتراک کرنے کے لئے کوئی دوسرا حرکت پذیری رکھتے ہیں؟ ہمیں بتائیں.