سی ایس ایس لامحدود اور سرکلر گھومنے والی تصویری سلائیڈر

تصویری سلائیڈرز (جسے carousels بھی کہا جاتا ہے) ہر جگہ موجود ہیں۔ وہاں ہے عام سلائیڈر بنانے کے لیے بہت سی سی ایس ایس ٹرکس جہاں تصاویر بائیں سے دائیں (یا اس کے برعکس) سلائیڈ ہوتی ہیں۔ اس کے ساتھ ایک ہی معاملہ ہے۔ وہاں بہت سی جاوا اسکرپٹ لائبریریاں ہیں۔ جو پیچیدہ متحرک تصاویر کے ساتھ فینسی سلائیڈرز بناتے ہیں۔ ہم اس پوسٹ میں اس میں سے کچھ نہیں کرنے جا رہے ہیں۔

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

اس پہلے مضمون کے لیے، ہم اس چیز سے شروع کریں گے جسے میں "سرکلر گھومنے والی امیج سلائیڈر" کہتا ہوں:

ٹھنڈا ہے نا؟ آئیے کوڈ کو الگ کریں!

HTML مارک اپ

اگر آپ نے میری سیریز کی پیروی کی۔ فینسی تصویر کی سجاوٹ or سی ایس ایس گرڈ اور حسب ضرورت شکلیں۔، پھر آپ جانتے ہیں کہ میرا پہلا اصول یہ ہے کہ سب سے چھوٹی HTML کے ساتھ کام کرنا ہے۔ میں اپنے کوڈ کو بہت زیادہ بے ترتیبی میں ڈالنے سے پہلے ہمیشہ سی ایس ایس حل تلاش کرنے کی کوشش کرتا ہوں۔

s اور دیگر چیزیں۔

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

ہم کہتے ہیں کہ ہم چار تصاویر کے ساتھ کام کر رہے ہیں:

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

یہ کس طرح کام کرتا ہے؟

یہ ایک ویڈیو ہے جہاں میں ہٹاتا ہوں۔ overflow: hidden CSS سے تاکہ ہم بہتر طور پر سمجھ سکیں کہ تصاویر کیسے حرکت کر رہی ہیں:

ایسا لگتا ہے کہ ہماری چار تصاویر ایک بڑے دائرے پر رکھی گئی ہیں جو گھڑی کی مخالف سمت میں گھومتی ہیں۔

تمام تصاویر کا سائز ایک جیسا ہے (جس کی طرف سے اشارہ کیا گیا ہے۔ S تصویر میں)۔ نیلے رنگ کے دائرے کو نوٹ کریں جو وہ دائرہ ہے جو تمام امیجز کے مرکز سے آپس میں ملتا ہے اور اس کا ایک رداس (R)۔ ہمیں اپنی اینیمیشن کے لیے بعد میں اس قدر کی ضرورت ہوگی۔ R مساوی ہے 0.707 * S. (میں جیومیٹری کو چھوڑنے جا رہا ہوں جو ہمیں وہ مساوات فراہم کرتا ہے۔)

آئیے کچھ سی ایس ایس لکھیں!

ہم استعمال کریں گے سی ایس ایس گرڈ۔ تمام تصاویر کو ایک ہی علاقے میں ایک دوسرے کے اوپر رکھنے کے لیے:

.gallery  {
  --s: 280px; /* control the size */

  display: grid;
  width: var(--s);
  aspect-ratio: 1;
  padding: calc(var(--s) / 20); /* we will see the utility of this later */
  border-radius: 50%;
}
.gallery > img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

اب تک کچھ بھی زیادہ پیچیدہ نہیں ہے۔ مشکل حصہ حرکت پذیری ہے۔

ہم نے ایک بڑے دائرے کو گھمانے کے بارے میں بات کی، لیکن حقیقت میں، ہم ہر تصویر کو انفرادی طور پر گھمائیں گے جس سے ایک بڑے گھومنے والے دائرے کا بھرم پیدا ہوگا۔ تو آئیے ایک اینیمیشن کی وضاحت کرتے ہیں، m، اور اسے تصویری عناصر پر لاگو کریں:

.gallery > img {
  /* same as before */
  animation: m 8s infinite linear;
  transform-origin: 50% 120.7%;
}

@keyframes m {
  100% { transform: rotate(-360deg); }
}

مرکزی چال اس نمایاں لائن پر انحصار کرتی ہے۔ پہلے سے طے شدہ طور پر، CSS transform-origin جائیداد کے برابر ہے center (یا 50% 50%) جو تصویر کو اپنے مرکز کے گرد گھومتا ہے، لیکن ہمیں ایسا کرنے کی ضرورت نہیں ہے۔ ہمیں تصویر کے مرکز کے گرد گھومنے کی ضرورت ہے۔ بڑا دائرہ جس میں ہماری تصاویر شامل ہیں اس لیے نئی قدر transform-origin.

چونکہ R کے برابر ہے۔ 0.707 * S، ہم یہ کہہ سکتے ہیں۔ R مساوی ہے 70.7% تصویر کے سائز کا۔ ہمیں یہ کیسے ملا اس کی وضاحت کرنے کے لئے یہاں ایک اعداد و شمار ہے۔ 120.7% قدر:

آئیے اینیمیشن چلائیں اور دیکھیں کہ کیا ہوتا ہے:

میں جانتا ہوں میں جانتا ہوں. نتیجہ اس سے بہت دور ہے جو ہم چاہتے ہیں، لیکن حقیقت میں ہم بہت قریب ہیں۔ ایسا لگتا ہے کہ وہاں صرف ایک تصویر ہے، لیکن یہ نہ بھولیں کہ ہم نے تمام تصاویر کو ایک دوسرے کے اوپر سجا دیا ہے۔ یہ سب ایک ہی وقت میں گھوم رہے ہیں اور صرف اوپر کی تصویر نظر آ رہی ہے۔ ہمیں اس اوورلیپ سے بچنے کے لیے ہر تصویر کی اینیمیشن میں تاخیر کرنے کی ضرورت ہے۔

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

چیزیں پہلے ہی بہتر ہو رہی ہیں!

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

ہم اپنے اینی میشن کی فریمز کو اپ ڈیٹ کرنے جا رہے ہیں بس ایسا کرنے کے لیے:

@keyframes m {
  0%, 3% { transform: rotate(0); }
  22%, 27% { transform: rotate(-90deg); }
  47%, 52% { transform: rotate(-180deg); }
  72%, 77% { transform: rotate(-270deg); }
  98%, 100% { transform: rotate(-360deg); }
}

ہر ایک کے لئے 90deg (360deg/4، کہاں 4 تصاویر کی تعداد ہے) ہم ایک چھوٹا سا وقفہ شامل کریں گے۔ ہر تصویر اس کے لیے مرئی رہے گی۔ 5% اس سے پہلے کہ ہم اگلے پر سلائیڈ کریں (27%-22%, 52%-47%وغیرہ)۔ میں اپ ڈیٹ کرنے جا رہا ہوں animation-timing-function ایک کا استعمال کرتے ہوئے cubic-bezier() حرکت پذیری کو قدرے بہتر بنانے کے لیے فنکشن:

اب ہمارا سلائیڈر کامل ہے! ٹھیک ہے، تقریباً کامل کیونکہ ہم ابھی تک حتمی رابطے سے محروم ہیں: رنگین سرکلر بارڈر جو ہماری تصاویر کے گرد گھومتا ہے۔ ہم پر ایک چھدم عنصر استعمال کر سکتے ہیں .gallery اسے بنانے کے لیے ریپر:

.gallery {
  padding: calc(var(--s) / 20); /* the padding is needed here */
  position: relative;
}
.gallery::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: inherit; /* Inherits the same padding */
  border-radius: 50%;
  background: repeating-conic-gradient(#789048 0 30deg, #DFBA69 0 60deg);
  mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.gallery::after,
.gallery >img {
  animation: m 8s infinite cubic-bezier(.5, -0.2, .5, 1.2);
}

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

ہم ہو چکے ہیں! ہمارے پاس ایک ٹھنڈا سرکلر سلائیڈر ہے:

آئیے مزید تصاویر شامل کریں۔

چار امیجز کے ساتھ کام کرنا اچھا ہے، لیکن یہ بہتر ہوگا کہ ہم اسے کسی بھی تعداد میں امیجز تک پیمانہ کرسکیں۔ سب کے بعد، یہ ایک تصویر سلائیڈر کا مقصد ہے. ہمیں غور کرنے کے قابل ہونا چاہئے۔ N تصاویر

اس کے لیے، ہم Sass متعارف کروا کر کوڈ کو مزید عام بنانے جا رہے ہیں۔ سب سے پہلے، ہم تصاویر کی تعداد کے لیے ایک متغیر کی وضاحت کرتے ہیں ($nاور ہم ہر اس حصے کو اپ ڈیٹ کریں گے جہاں ہم نے تصاویر کی تعداد کو سختی سے کوڈ کیا ہے (4).

آئیے تاخیر کے ساتھ شروع کریں:

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

تاخیر کا فارمولا ہے۔ (1 - $i)*duration/$n، جو ہمیں مندرجہ ذیل Sass لوپ دیتا ہے:

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

اگر ہم واقعی چاہتے ہیں تو ہم مدت کو بھی متغیر بنا سکتے ہیں۔ لیکن آئیے حرکت پذیری کی طرف بڑھتے ہیں:

@keyframes m {
  0%, 3% { transform: rotate(0); }
  22%, 27% { transform: rotate(-90deg); }
  47%, 52% { transform: rotate(-180deg); }
  72%, 77% { transform: rotate(-270deg); }
  98%, 100% {transform: rotate(-360deg); }
}

آئیے پیٹرن کا بہتر نظارہ حاصل کرنے کے لیے اسے آسان بناتے ہیں:

@keyframes m {
  0% { transform: rotate(0); }
  25% { transform: rotate(-90deg); }
  50% { transform: rotate(-180deg); }
  75% { transform: rotate(-270deg); }
  100% { transform: rotate(-360deg); }
}

ہر ریاست کے درمیان قدم برابر ہے۔ 25% - کونسا 100%/4 - اور ہم ایک شامل کرتے ہیں۔ -90deg زاویہ - جو ہے -360deg/4. اس کا مطلب ہے کہ ہم اپنا لوپ اس طرح لکھ سکتے ہیں:

@keyframes m {
  0% { transform: rotate(0); }
  @for $i from 1 to $n {
    #{($i / $n) * 100}% { transform: rotate(#{($i / $n) * -360}deg); }  
  }
  100% { transform: rotate(-360deg); }
}

چونکہ ہر تصویر لیتی ہے۔ 5% حرکت پذیری کے، ہم اسے تبدیل کرتے ہیں:

#{($i / $n) * 100}%

…اس کے ساتھ:

#{($i / $n) * 100 - 2}%, #{($i / $n) * 100 + 3}%

یہ غور کرنا چاہئے کہ 5% ایک صوابدیدی قدر ہے جسے میں اس مثال کے لیے منتخب کرتا ہوں۔ ہم اس کو کنٹرول کرنے کے لیے ایک متغیر بھی بنا سکتے ہیں کہ ہر تصویر کو کتنا وقت نظر آنا چاہیے۔ میں اسے سادگی کی خاطر چھوڑنے جا رہا ہوں، لیکن ہوم ورک کے لیے، آپ اسے کرنے کی کوشش کر سکتے ہیں اور تبصروں میں اپنے عمل درآمد کا اشتراک کر سکتے ہیں!

@keyframes m {
  0%,3% { transform: rotate(0); }
  @for $i from 1 to $n {
    #{($i / $n) * 100 - 2}%, #{($i / $n) * 100 + 3}% { transform: rotate(#{($i / $n) * -360}deg); }  
  }
  98%,100% { transform: rotate(-360deg); }
}

آخری بٹ اپ ڈیٹ کرنا ہے۔ transform-origin. ہمیں جیومیٹری کی کچھ چالوں کی ضرورت ہوگی۔ تصاویر کی تعداد کچھ بھی ہو، ترتیب ہمیشہ ایک جیسی ہوتی ہے۔ ہم نے اپنی تصاویر (چھوٹے دائرے) کو ایک بڑے دائرے کے اندر رکھا ہے اور ہمیں رداس کی قدر تلاش کرنے کی ضرورت ہے، R.

آپ شاید ایک بورنگ جیومیٹری کی وضاحت نہیں چاہتے ہیں لہذا ہم یہاں تلاش کرتے ہیں۔ R:

R = S / (2 * sin(180deg / N))

اگر ہم اسے فیصد کے طور پر ظاہر کرتے ہیں، تو یہ ہمیں دیتا ہے:

R = 100% / (2 * sin(180deg / N)) = 50% / sin(180deg / N)

… جس کا مطلب ہے transform-origin قدر کے برابر ہے:

transform-origin: 50% (50% / math.sin(180deg / $n) + 50%);

ہم کر چکے ہیں! ہمارے پاس ایک سلائیڈر ہے جو کسی بھی نمبر کی تصاویر کے ساتھ کام کرتا ہے!

آئیے وہاں نو امیجز ٹاس کریں:

جتنی تصاویر آپ چاہیں شامل کریں اور اپ ڈیٹ کریں۔ $n تصاویر کی کل تعداد کے ساتھ متغیر۔

اپ ریپنگ

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