پولرائڈ امیجز کے ذریعے سی ایس ایس لامحدود سلائیڈر پلٹ رہا ہے۔

آخری مضمون میں، ہم نے ایک خوبصورت چھوٹا سا سلائیڈر بنایا (یا "کیروسل" اگر آپ اسے پسند کرتے ہیں) جو ایک سرکلر سمت میں گھومتا ہے۔ اس بار ہم ایسا بنانے جا رہے ہیں جو پولرائیڈ امیجز کے ڈھیر سے پلٹ جائے۔

ٹھنڈا ہے نا؟ ابھی تک کوڈ کو نہ دیکھیں کیونکہ اس کو کھولنے کے لیے بہت کچھ ہے۔ میرے ساتھ شامل ہوں گے، کیا آپ؟

بنیادی سیٹ اپ

اس سلائیڈر کے لیے زیادہ تر HTML اور CSS اس سرکلر سے ملتے جلتے ہیں جو ہم نے پچھلی بار بنایا تھا۔ درحقیقت، ہم بالکل وہی مارک اپ استعمال کر رہے ہیں:

اور یہ بنیادی سی ایس ایس ہے جو ہمارے والدین کو سیٹ کرتی ہے۔ .gallery کنٹینر ایک گرڈ کے طور پر جہاں تمام امیجز کو ایک دوسرے کے اوپر اسٹیک کیا جاتا ہے:

.gallery  {
  display: grid;
  width: 220px; /* controls the size */
}
.gallery > img {
  grid-area: 1 / 1;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 10px solid #f2f2f2;
  box-shadow: 0 0 4px #0007;
}

اب تک کچھ بھی پیچیدہ نہیں ہے۔ یہاں تک کہ تصاویر کے لیے پولرائیڈ نما اسٹائل کے لیے بھی، میں صرف کچھ استعمال کر رہا ہوں۔ border اور box-shadow. آپ اسے بہتر طریقے سے کرنے کے قابل ہوسکتے ہیں، لہذا ان آرائشی شیلیوں کے ساتھ کھیلنے کے لئے آزاد محسوس کریں! ہم اپنی زیادہ تر توجہ حرکت پذیری پر مرکوز کرنے جا رہے ہیں، جو کہ سب سے مشکل حصہ ہے۔

چال کیا ہے؟

اس سلائیڈر کی منطق امیجز کے اسٹیکنگ آرڈر پر منحصر ہے - تو ہاں، ہم اس کے ساتھ کھیلنے جا رہے ہیں z-index. تمام تصاویر ایک ہی سے شروع ہوتی ہیں۔ z-index قدر (2) جو منطقی طور پر اسٹیک کے اوپری حصے پر آخری تصویر بنائے گا۔

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

یہاں ایک سٹرپڈ بیک ڈیمو ہے جو چال کو ظاہر کرتا ہے۔ اینیمیشن کو چالو کرنے کے لیے تصویر کو ہوور کریں:

اب، تمام تصاویر پر لاگو ایک ہی چال کا تصور کریں۔ اگر ہم استعمال کر رہے ہیں تو پیٹرن یہ ہے۔ :nth-child() تصویروں میں فرق کرنے کے لیے سیوڈو سلیکٹر:

• ہم آخری تصویر سلائیڈ کرتے ہیں (N)۔ اگلی تصویر دکھائی دے رہی ہے (N - 1).
• ہم اگلی تصویر سلائیڈ کرتے ہیں (N - 1)۔ اگلی تصویر دکھائی دے رہی ہے (N - 2)
• ہم اگلی تصویر سلائیڈ کرتے ہیں (N - 2)۔ اگلی تصویر دکھائی دے رہی ہے (N - 3)
• (ہم پہلی تصویر تک پہنچنے تک اسی عمل کو جاری رکھتے ہیں)
• ہم پہلی تصویر سلائیڈ کرتے ہیں (1)۔ آخری تصویر (N) دوبارہ نظر آتا ہے۔

یہ ہمارا لامحدود سلائیڈر ہے!

حرکت پذیری کو جدا کرنا

اگر آپ کو پچھلا مضمون یاد ہے تو، میں نے صرف ایک اینیمیشن کی وضاحت کی ہے اور ہر تصویر کو کنٹرول کرنے میں تاخیر کے ساتھ چلائی ہے۔ ہم یہاں بھی ایسا ہی کریں گے۔ آئیے پہلے اپنی اینیمیشن کی ٹائم لائن کو دیکھنے کی کوشش کریں۔ ہم تین تصاویر کے ساتھ شروع کریں گے، پھر اسے بعد میں کسی بھی نمبر کے لیے عام کریں گے (Nتصاویر کی )۔

ہماری حرکت پذیری کو تین حصوں میں تقسیم کیا گیا ہے: "دائیں سے سلائیڈ"، "بائیں طرف سلائیڈ" اور "مت حرکت"۔ ہم ہر تصویر کے درمیان تاخیر کی آسانی سے شناخت کر سکتے ہیں۔ اگر ہم غور کریں کہ پہلی تصویر شروع ہوتی ہے۔ 0s، اور مدت کے برابر ہے۔ 6s، پھر دوسرا شروع ہوگا۔ -2s اور تیسرے پر -4s.

.gallery > img:nth-child(2) { animation-delay: -2s; } /* -1 * 6s / 3 */
.gallery > img:nth-child(3) { animation-delay: -4s; } /* -2 * 6s / 3 */

ہم یہ بھی دیکھ سکتے ہیں کہ "مت حرکت" کا حصہ پوری حرکت پذیری کا دو تہائی حصہ لیتا ہے (2*100%/3) جب کہ "دائیں سے سلائیڈ" اور "بائیں طرف سلائیڈ" کے حصے اس کا ایک تہائی حصہ ایک ساتھ لے جاتے ہیں - لہذا، ہر ایک برابر ہے 100%/6 کل حرکت پذیری کا۔

ہم اپنے اینیمیشن کی فریمز کو اس طرح لکھ سکتے ہیں:

@keyframes slide {
  0%     { transform: translateX(0%); }
  16.67% { transform: translateX(120%); }
  33.34% { transform: translateX(0%); }
  100%   { transform: translateX(0%); } 
}

کہ 120% ایک صوابدیدی قدر ہے۔ مجھے اس سے بڑی چیز کی ضرورت تھی۔ 100%. تصاویر کو باقی تصاویر سے دائیں طرف سلائیڈ کرنے کی ضرورت ہے۔ ایسا کرنے کے لیے، اسے کم از کم آگے بڑھنے کی ضرورت ہے۔ 100% اس کے سائز کے. اس لیے میں چلا گیا۔ 120% - کچھ اضافی جگہ حاصل کرنے کے لیے۔

اب ہمیں غور کرنے کی ضرورت ہے۔ z-index. یہ نہ بھولیں کہ ہمیں تصویر کو اپ ڈیٹ کرنے کی ضرورت ہے۔ z-index قیمت کے بعد یہ ڈھیر کے دائیں طرف پھسلتا ہے، اور اس سے پہلے ہم اسے واپس ڈھیر کے نیچے سلائیڈ کرتے ہیں۔

@keyframes slide {
  0%     { transform: translateX(0%);   z-index: 2; }
  16.66% { transform: translateX(120%); z-index: 2; }
  16.67% { transform: translateX(120%); z-index: 1; } /* we update the z-order here */
  33.34% { transform: translateX(0%);   z-index: 1; }
  100%   { transform: translateX(0% );  z-index: 1; }  
}

میں ایک ریاست کی وضاحت کرنے کے بجائے 16.67% (100%/6) ٹائم لائن میں نقطہ، ہم تقریبا ایک جیسے پوائنٹس پر دو ریاستوں کی وضاحت کر رہے ہیں (16.66% اور 16.67%) جہاں z-index اس سے پہلے کہ ہم تصویر کو ڈیک پر واپس سلائیڈ کریں، قدر کم ہو جاتی ہے۔

یہاں کیا ہوتا ہے جب ہم ان سب کو ایک ساتھ کھینچتے ہیں:

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

ہمیں قریب سے پیروی کرنے کی ضرورت ہے۔ z-index تبدیلیاں ابتدائی طور پر، تمام تصاویر ہیں z-index: 2. اس کا مطلب ہے کہ اسٹیکنگ آرڈر جانا چاہیے…

Our eyes 👀 --> 3rd (2) | 2nd (2) | 1st (2)

ہم تیسری تصویر کو سلائیڈ کرتے ہیں اور اسے اپ ڈیٹ کرتے ہیں۔ z-index اس آرڈر کو حاصل کرنے کے لیے:

Our eyes 👀 --> 2nd (2) | 1st (2) | 3rd (1)

ہم دوسرے کے ساتھ بھی ایسا ہی کرتے ہیں:

Our eyes 👀 --> 1st (2) | 3rd (1) | 2nd (1)

اور پہلا:

Our eyes 👀 --> 3rd (1) | 2nd (1) | 1st (1)

ہم ایسا کرتے ہیں اور لگتا ہے کہ سب کچھ ٹھیک ہے۔ لیکن حقیقت میں، یہ نہیں ہے! جب پہلی تصویر کو پیچھے کی طرف لے جایا جائے گا، تو تیسری تصویر ایک اور تکرار شروع کرے گی، یعنی یہ واپس آجائے گی۔ z-index: 2:

Our eyes 👀 --> 3rd (2) | 2nd (1) | 1st (1)

لہذا، حقیقت میں ہمارے پاس کبھی بھی تمام تصاویر نہیں تھیں۔ z-index: 2 بالکل! جب تصاویر حرکت نہیں کر رہی ہیں (یعنی، حرکت پذیری کا حصہ "مت حرکت") z-index is 1. اگر ہم تیسری تصویر کو سلائیڈ کرتے ہیں اور اسے اپ ڈیٹ کرتے ہیں۔ z-index سے قدر 2 کرنے کے لئے 1، یہ سب سے اوپر رہے گا! جب تمام تصاویر ایک جیسی ہوں۔ z-index, سورس آرڈر میں آخری — اس معاملے میں ہماری تیسری تصویر — اسٹیک کے اوپر ہے۔ تیسری تصویر کو سلائیڈ کرنے کے نتیجے میں درج ذیل ہیں:

Our eyes 👀 --> 3rd (1) | 2nd (1) | 1st (1)

تیسری تصویر اب بھی اوپر ہے اور، اس کے بالکل بعد، ہم دوسری تصویر کو اوپر لے جاتے ہیں جب اس کی اینیمیشن دوبارہ شروع ہوتی ہے۔ z-index: 2:

Our eyes 👀 --> 2nd (2) | 3rd (1) | 1st (1)

ایک بار جب ہم اسے سلائیڈ کرتے ہیں، ہمیں ملتا ہے:

Our eyes 👀 --> 3rd (1) | 2nd (1) | 1st (1)

پھر پہلی تصویر اوپر کود جائے گی:

Our eyes 👀 --> 1st(2) | 3rd (1) | 2nd (1)

ٹھیک ہے، میں کھو گیا ہوں۔ کیا ساری منطق غلط ہے؟

میں جانتا ہوں، یہ الجھا ہوا ہے۔ لیکن ہماری منطق بالکل غلط نہیں ہے۔ ہمیں صرف حرکت پذیری کو تھوڑا سا درست کرنا ہوگا تاکہ ہر چیز ہماری مرضی کے مطابق کام کرے۔ چال کو صحیح طریقے سے ری سیٹ کرنا ہے۔ z-index.

آئیے اس صورتحال کو لیتے ہیں جہاں تیسری تصویر سب سے اوپر ہے:

Our eyes 👀 -->  3rd (2) | 2nd (1) | 1st (1)

ہم نے دیکھا کہ تیسری تصویر کو سلائیڈ کرتے ہوئے اور اسے تبدیل کرتے ہوئے۔ z-index اسے سب سے اوپر رکھتا ہے. ہمیں اپ ڈیٹ کرنے کی ضرورت ہے۔ z-index دوسری تصویر کی. لہذا، اس سے پہلے کہ ہم تیسری تصویر کو ڈیک سے دور کریں، ہم اپ ڈیٹ کرتے ہیں۔ z-index دوسری تصویر کی 2.

دوسرے الفاظ میں، ہم ری سیٹ کریں z-index اینیمیشن ختم ہونے سے پہلے کی دوسری تصویر۔

سبز جمع کی علامت بڑھتی ہوئی نمائندگی کرتی ہے۔ z-index کرنے کے لئے 2، اور سرخ مائنس علامت اس سے منسلک ہے۔ z-index: 1. دوسری تصویر سے شروع ہوتی ہے۔ z-index: 2، پھر ہم اسے اپ ڈیٹ کرتے ہیں۔ 1 جب یہ ڈیک سے دور پھسل جاتا ہے۔ لیکن اس سے پہلے کہ پہلی تصویر ڈیک سے دور ہو جائے، ہم اسے تبدیل کرتے ہیں۔ z-index دوسری تصویر کی طرف واپس 2. یہ یقینی بنائے گا کہ دونوں تصاویر ایک جیسی ہیں۔ z-index، لیکن پھر بھی، تیسرا سب سے اوپر رہے گا کیونکہ یہ بعد میں DOM میں ظاہر ہوتا ہے۔ لیکن تیسری تصویر سلائیڈ کے بعد اور اس کے z-index اپ ڈیٹ کیا جاتا ہے، یہ نیچے کی طرف جاتا ہے۔

یہ حرکت پذیری کے ذریعے دو تہائی ہے، تو آئیے اس کے مطابق اپنے کلیدی فریموں کو اپ ڈیٹ کریں:

@keyframes slide {
  0%     { transform: translateX(0%);   z-index: 2; }
  16.66% { transform: translateX(120%); z-index: 2; }
  16.67% { transform: translateX(120%); z-index: 1; } /* we update the z-order here */
  33.34% { transform: translateX(0%);   z-index: 1; }
  66.33% { transform: translateX(0%);   z-index: 1; }
  66.34% { transform: translateX(0%);   z-index: 2; } /* and also here */
  100%   { transform: translateX(0%);   z-index: 2; }  
}

تھوڑا بہتر، لیکن پھر بھی نہیں۔ بہت وہاں. ایک اور مسئلہ ہے…

ارے نہیں، یہ کبھی ختم نہیں ہوگا!

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

جب پہلی تصویر سب سے اوپر ہوتی ہے، تو ہمارے پاس درج ذیل صورت حال ہوتی ہے:

Our eyes 👀 -->  1st (2) | 3rd (1) | 2nd (1)

ہم نے جو پچھلی ایڈجسٹمنٹ کی تھی اس پر غور کرتے ہوئے، تیسری تصویر پہلی تصویر سلائیڈ ہونے سے پہلے اوپر کود جائے گی۔ یہ صرف اس صورت حال میں ہوتا ہے کیونکہ اگلی تصویر جو پہلی تصویر کے بعد حرکت کرتی ہے۔ آخری تصویر جس کا DOM میں آرڈر زیادہ ہے۔ باقی تصاویر ٹھیک ہیں کیونکہ ہمارے پاس ہیں۔ N، تو N - 1، پھر ہم وہاں سے جاتے ہیں۔ 3 کرنے کے لئے 2، اور 2 کرنے کے لئے 1… لیکن پھر ہم وہاں سے چلے جاتے ہیں۔ 1 کرنے کے لئے N.

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

@keyframes slide-last {
  0%     { transform: translateX(0%);   z-index: 2;}
  16.66% { transform: translateX(120%); z-index: 2; }
  16.67% { transform: translateX(120%); z-index: 1; } /* we update the z-order here */
  33.34% { transform: translateX(0%);   z-index: 1; }
  83.33% { transform: translateX(0%);   z-index: 1; }
  83.34% { transform: translateX(0%);   z-index: 2; } /* and also here */
  100%   { transform: translateX(0%);   z-index: 2; }
}

ہم نے دوبارہ ترتیب دیا۔ z-index اینیمیشن (دو تہائی کے بجائے) کے ذریعے 5/6 کی قدر کریں جو کہ پہلی تصویر کے ڈھیر سے باہر ہونے پر ہے۔ تو ہمیں کوئی کودتا نظر نہیں آتا!

TADA! ہمارا لامحدود سلائیڈر اب کامل ہے! یہاں ہمارا آخری کوڈ اس کی تمام شان میں ہے:

.gallery > img {
  animation: slide 6s infinite;
}
.gallery > img:last-child {
  animation-name: slide-last;
}
.gallery > img:nth-child(2) { animation-delay: -2s; } 
.gallery > img:nth-child(3) { animation-delay: -4s; }

@keyframes slide {
  0% { transform: translateX(0%); z-index: 2; }
  16.66% { transform: translateX(120%); z-index: 2; }
  16.67% { transform: translateX(120%); z-index: 1; } 
  33.34% { transform: translateX(0%); z-index: 1; }
  66.33% { transform: translateX(0%); z-index: 1; }
  66.34% { transform: translateX(0%); z-index: 2; } 
  100% { transform: translateX(0%); z-index: 2; }
}
@keyframes slide-last {
  0% { transform: translateX(0%); z-index: 2; }
  16.66% { transform: translateX(120%); z-index: 2; }
  16.67% { transform: translateX(120%); z-index: 1; }
  33.34% { transform: translateX(0%); z-index: 1; }
  83.33% { transform: translateX(0%); z-index: 1; }
  83.34% { transform: translateX(0%); z-index: 2; } 
  100%  { transform: translateX(0%); z-index: 2; }
}

تصاویر کی کسی بھی تعداد کی حمایت

اب جب کہ ہماری اینیمیشن تین امیجز کے لیے کام کرتی ہے، آئیے اسے کسی بھی نمبر کے لیے کام کریں (Nتصاویر کی )۔ لیکن پہلے، ہم فالتو پن سے بچنے کے لیے اینیمیشن کو تقسیم کرکے اپنے کام کو تھوڑا بہتر بنا سکتے ہیں:

.gallery > img {
  z-index: 2;
  animation: 
    slide 6s infinite,
    z-order 6s infinite steps(1);
}
.gallery > img:last-child {
  animation-name: slide, z-order-last;
}
.gallery > img:nth-child(2) { animation-delay: -2s; } 
.gallery > img:nth-child(3) { animation-delay: -4s; }

@keyframes slide {
  16.67% { transform: translateX(120%); }
  33.33% { transform: translateX(0%); }
}
@keyframes z-order {
  16.67%,
  33.33% { z-index: 1; }
  66.33% { z-index: 2; }
}
@keyframes z-order-last {
  16.67%,
  33.33% { z-index: 1; }
  83.33% { z-index: 2; }
}

اب بہت کم کوڈ! ہم سلائیڈنگ حصے کے لیے ایک اینیمیشن بناتے ہیں اور دوسری کے لیے z-index تازہ ترین. نوٹ کریں کہ ہم استعمال کرتے ہیں۔ steps(1) پر z-index حرکت پذیری. اس کی وجہ یہ ہے کہ میں اچانک تبدیل کرنا چاہتا ہوں۔ z-index قدر، سلائیڈنگ اینیمیشن کے برعکس جہاں ہم ہموار حرکت چاہتے ہیں۔

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

@for $i from 2 to ($n + 1) {
  .gallery > img:nth-child(#{$i}) {
    animation-delay: calc(#{(1 - $i)/$n}*6s);
  }
}

اس کا مطلب ہے کہ ہم ونیلا سی ایس ایس سے ساس میں جا رہے ہیں۔ اگلا، ہمیں یہ تصور کرنے کی ضرورت ہے کہ کس طرح ٹائم لائن پیمانے کے ساتھ N تصاویر آئیے یہ نہ بھولیں کہ حرکت پذیری تین مراحل میں ہوتی ہے:

"دائیں سے سلائیڈ" اور "بائیں طرف سلائیڈ" کے بعد، تصویر کو اس وقت تک رکھنا چاہیے جب تک کہ باقی تصاویر ترتیب سے گزر نہ جائیں۔ لہذا "ہل نہ جائے" والے حصے کو اتنا ہی وقت درکار ہے جتنا کہ (N - 1) بطور "سلائیڈ ٹو دائیں" اور "سلائیڈ ٹو بائیں"۔ اور ایک تکرار کے اندر، N تصاویر سلائیڈ ہو جائیں گی۔ لہذا، "دائیں طرف سلائیڈ کریں" اور "بائیں طرف سلائیڈ کریں" دونوں لیتے ہیں۔ 100%/N کل اینیمیشن ٹائم لائن کا۔ تصویر ڈھیر سے دور پھسل رہی ہے۔ (100%/N)/2 اور پر واپس سلائڈ 100%/N .

ہم اسے تبدیل کر سکتے ہیں:

@keyframes slide {
  16.67% { transform: translateX(120%); }
  33.33% { transform: translateX(0%); }
}

…اس کے لیے:

@keyframes slide {
  #{50/$n}%  { transform: translateX(120%); }
  #{100/$n}% { transform: translateX(0%); }
}

اگر ہم بدل دیں۔ N ساتھ 3، ہم حاصل 16.67% اور 33.33% جب وہاں ہیں 3 اسٹیک میں تصاویر. یہ اسٹیکنگ آرڈر کے ساتھ وہی منطق ہے جہاں ہمارے پاس یہ ہوگا:

@keyframes z-order {
  #{50/$n}%,
  #{100/$n}% { z-index: 1; }
  66.33% { z-index: 2; }
}

ہمیں ابھی بھی اپ ڈیٹ کرنے کی ضرورت ہے۔ 66.33% نقطہ یہی سمجھا جاتا ہے جہاں تصویر دوبارہ ترتیب دیتی ہے۔ z-index حرکت پذیری کے اختتام سے پہلے۔ اسی وقت، اگلی تصویر سلائیڈ ہونے لگتی ہے۔ چونکہ سلائڈنگ حصہ لیتا ہے 100%/N، ری سیٹ پر ہونا چاہئے۔ 100% - 100%/N:

@keyframes z-order {
  #{50/$n}%,
  #{100/$n}% { z-index: 1; }
  #{100 - 100/$n}% { z-index: 2; }
}

لیکن ہمارے لیے z-order-last کام کرنے کے لئے حرکت پذیری، یہ ترتیب میں تھوڑی دیر بعد ہونا چاہئے. آخری تصویر کے لیے ہم نے کیا ٹھیک کیا یاد ہے؟ کو دوبارہ ترتیب دینا z-index قدر اس وقت ہونے کی ضرورت ہے جب پہلی تصویر ڈھیر سے باہر ہو اور اس وقت نہیں جب یہ سلائیڈنگ شروع ہو۔ ہم یہاں اپنے کلیدی فریموں میں وہی استدلال استعمال کر سکتے ہیں:

@keyframes z-order-last {
  #{50/$n}%,
  #{100/$n}% { z-index: 1; }
  #{100 - 50/$n}% { z-index: 2; }
}

ہم ہو چکے ہیں! پانچ امیجز استعمال کرتے وقت ہمیں کیا ملتا ہے:

ہم چیزوں کو قدرے بہتر بنانے کے لیے گردش کا ایک ٹچ شامل کر سکتے ہیں:

میں نے جو کچھ کیا وہ شامل ہے۔ rotate(var(--r)) کرنے کے لئے transform جائیداد لوپ کے اندر، --r بے ترتیب زاویہ سے بیان کیا گیا ہے:

@for $i from 1 to ($n + 1) {
  .gallery > img:nth-child(#{$i}) {
    --r: #{(-20 + random(40))*1deg}; /* a random angle between -20deg and 20deg */
  }
}

گردش چھوٹی خرابیاں پیدا کرتی ہے کیونکہ ہم بعض اوقات کچھ تصاویر کو اسٹیک کے پیچھے کودتے ہوئے دیکھ سکتے ہیں، لیکن یہ کوئی بڑی بات نہیں ہے۔

اپ ریپنگ

یہ سب z-index کام ایک بڑا توازن عمل تھا، ٹھیک ہے؟ اگر آپ کو یقین نہیں تھا کہ اس مشق سے پہلے اسٹیکنگ آرڈر کیسے کام کرتا ہے، تو شاید آپ کے پاس اب بہت بہتر آئیڈیا ہے! اگر آپ کو کچھ وضاحتوں کی پیروی کرنا مشکل معلوم ہوتا ہے تو، میں آپ کو مشورہ دیتا ہوں کہ آپ مضمون کو ایک اور مطالعہ کریں۔ پنسل اور کاغذ سے چیزوں کا نقشہ بنائیں. چال کو بہتر طور پر سمجھنے کے لیے تصاویر کی ایک مختلف تعداد کا استعمال کرتے ہوئے حرکت پذیری کے ہر قدم کو واضح کرنے کی کوشش کریں۔

پچھلی بار، ہم نے ایک سرکلر سلائیڈر بنانے کے لیے جیومیٹری کی چند ترکیبیں استعمال کیں جو مکمل ترتیب کے بعد واپس پہلی تصویر پر گھومتی ہیں۔ اس بار، ہم نے استعمال کرتے ہوئے اسی طرح کی چال کو پورا کیا۔ z-index. دونوں صورتوں میں، ہم نے کسی بھی تصویر کو مسلسل حرکت پذیری کے لیے نقل نہیں کیا، اور نہ ہی ہم حسابات میں مدد کے لیے JavaScript تک پہنچے۔

اگلی بار، ہم 3D سلائیڈرز بنائیں گے۔ دیکھتے رہنا!