CSS ইনফিনিট এবং সার্কুলার রোটেটিং ইমেজ স্লাইডার

ইমেজ স্লাইডার (ক্যারোসেলও বলা হয়) সর্বত্র রয়েছে। সেখানে সাধারণ স্লাইডার তৈরি করার জন্য অনেক CSS কৌশল যেখানে ছবিগুলি বাম থেকে ডানে স্লাইড হয় (বা বিপরীত)। এটা সঙ্গে একই চুক্তি সেখানে অনেক জাভাস্ক্রিপ্ট লাইব্রেরি আছে যা জটিল অ্যানিমেশন সহ অভিনব স্লাইডার তৈরি করে। আমরা এই পোস্টে যে কিছু করতে যাচ্ছি না.

নিবন্ধগুলির একটি ছোট সিরিজের মাধ্যমে, আমরা কিছু অভিনব এবং অস্বাভাবিক সিএসএস-শুধু স্লাইডারগুলি অন্বেষণ করতে যাচ্ছি। আপনি যদি একই ওল' ক্লাসিক স্লাইডার দেখে ক্লান্ত হয়ে পড়েন, তাহলে আপনি সঠিক জায়গায় আছেন!

এই প্রথম নিবন্ধটির জন্য, আমরা এমন কিছু দিয়ে শুরু করব যাকে আমি "বৃত্তাকার ঘূর্ণায়মান চিত্র স্লাইডার" বলি:

কুল ডান? এর কোড ব্যবচ্ছেদ করা যাক!

এইচটিএমএল মার্কআপ

আপনি যদি আমার সিরিজ অনুসরণ করেন অভিনব ইমেজ সজ্জা or CSS গ্রিড এবং কাস্টম আকার, তাহলে আপনি জানেন যে আমার প্রথম নিয়ম হল সবচেয়ে ছোট HTML এর সাথে কাজ করা। আমি সবসময় আমার কোডকে প্রচুর বিশৃঙ্খল করার আগে CSS সমাধানগুলি খুঁজে বের করার জন্য কঠোর চেষ্টা করি

s এবং অন্যান্য জিনিস.

একই নিয়ম এখানে প্রযোজ্য — আমাদের কোড একটি পাত্রে থাকা ছবির তালিকা ছাড়া আর কিছুই নয়।

ধরা যাক আমরা চারটি ছবি নিয়ে কাজ করছি:

এটাই! এখন কোডের আকর্ষণীয় অংশে যাওয়া যাক। কিন্তু প্রথমে, আমরা আমাদের স্লাইডার কিভাবে কাজ করে তার যুক্তি বোঝার জন্য এটিতে ডুব দিতে যাচ্ছি।

এটা কিভাবে কাজ করে?

এখানে একটি ভিডিও যেখানে আমি সরান overflow: hidden সিএসএস থেকে যাতে আমরা আরও ভালভাবে বুঝতে পারি যে ছবিগুলি কীভাবে চলছে:

এটি আমাদের চারটি চিত্রের মতো একটি বড় বৃত্তের উপর স্থাপন করা হয়েছে যা ঘড়ির কাঁটার বিপরীত দিকে ঘোরে।

সমস্ত চিত্রের আকার একই (এর দ্বারা চিহ্নিত করা হয়েছে S চিত্রে)। নীল বৃত্তটি লক্ষ্য করুন যেটি বৃত্ত যা সমস্ত চিত্রের কেন্দ্রের সাথে ছেদ করে এবং একটি ব্যাসার্ধ রয়েছে (R) আমাদের অ্যানিমেশনের জন্য পরে এই মানটির প্রয়োজন হবে। R সমান 0.707 * S. (আমি জ্যামিতি বাদ দিতে যাচ্ছি যা আমাদের সেই সমীকরণ দেয়।)

আসুন কিছু CSS লিখি!

আমরা ব্যবহার করব সিএসএস গ্রিড একই এলাকায় সমস্ত ছবি একে অপরের উপরে স্থাপন করতে:

.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 মাস্কিং কৌশল যে শুধুমাত্র প্যাডেড এলাকা দেখায়. তারপর আমি এটিতে একই অ্যানিমেশন প্রয়োগ করি যা আমরা চিত্রগুলির জন্য সংজ্ঞায়িত করেছি।

আমরা করেছি! আমাদের কাছে একটি দুর্দান্ত বৃত্তাকার স্লাইডার রয়েছে:

এর আরো ছবি যোগ করা যাক

চারটি চিত্র নিয়ে কাজ করা ভাল, তবে এটি আরও ভাল হবে যদি আমরা এটিকে যে কোনও সংখ্যক চিত্রে স্কেল করতে পারি। সর্বোপরি, এটি একটি ইমেজ স্লাইডারের উদ্দেশ্য। আমরা বিবেচনা করতে সক্ষম হওয়া উচিত 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 ছবির মোট সংখ্যা সহ পরিবর্তনশীল।

মোড়ক উম্মচন

CSS রূপান্তর এবং স্ট্যান্ডার্ড জ্যামিতি ব্যবহার করে কয়েকটি কৌশলের মাধ্যমে, আমরা একটি সুন্দর বৃত্তাকার স্লাইডার তৈরি করেছি যার জন্য অনেক কোডের প্রয়োজন নেই। এই স্লাইডারটি সম্পর্কে যা দুর্দান্ত তা হ'ল আমাদের একটি বৃত্ত থাকায় অসীম অ্যানিমেশন রাখতে চিত্রগুলির নকল করার জন্য আমাদের বিরক্ত করার দরকার নেই। একটি সম্পূর্ণ ঘূর্ণন পরে, আমরা প্রথম চিত্র ফিরে পেতে হবে!