কিভাবে CSS দিয়ে একটি বাউন্সিং SVG আইকন অ্যানিমেট করবেন

আজ আপনি একটি তীর SVG আইকন উপরে এবং নিচে বাউন্স করতে CSS অ্যানিমেশন ব্যবহার করতে শিখবেন। এছাড়াও আপনি অনেকগুলি CSS অ্যানিমেশন বৈশিষ্ট্যের সাথে অ্যানিমেশনের ধরন, সময় এবং সময়কাল কীভাবে পরিবর্তন করবেন তাও শিখবেন।

কেন এটি দরকারী?

অ্যানিমেশন, যখন সঠিকভাবে করা হয়, তখন করতে পারে:

আপনার ব্যবহারকারীদের গাইড করুন
আপনার ব্যবহারকারীদের পদক্ষেপ নিতে উৎসাহিত করুন
আপনার ব্যবহারকারীদের মনোযোগ আকর্ষণ করুন (যদিও আপনার কাছে এটি রয়েছে)।

প্রয়োজনীয়তা

অনুসরণ করার জন্য আপনাকে একটি পাঠ্য সম্পাদকের প্রয়োজন হবে। যদি আপনার নিজস্ব স্থানীয় উন্নয়ন পরিবেশ না থাকে, তাহলে আমি কোডপেন সুপারিশ করছি। আপনি অবিলম্বে কোডিং শুরু করতে পারেন৷

ঠিক আছে, শুরু করা যাক!

HTML:ধারক এবং তীর যোগ করা হচ্ছে

ডেমো উদাহরণ পুনরায় তৈরি করতে, আপনার চারটি HTML উপাদানের প্রয়োজন:

তীর আইকনের জন্য একটি চিত্র উপাদান
তীরের উপরে পাঠ্য লেবেলের জন্য একটি স্প্যান উপাদান
তীর এবং পাঠ্য লেবেলের চারপাশে মোড়ানোর জন্য একটি কন্টেইনার-ফুটার উপাদান
সমস্ত উপাদানের চারপাশে মোড়ানোর জন্য একটি ধারক উপাদান

আপনার HTML সম্পাদকে যান এবং আপনার <body></body>-এর ভিতরে নিম্নলিখিত মার্কআপ যোগ করুন উপাদান:

<div class="container">
  <div class="container-footer">
    <span class="text-label">Explore</span>
    <svg
      class="arrow-circle-down bounce"
      viewbox="0 0 1792 1792"
      xmlns="https://www.w3.org/2000/svg"
    >
      <path
        d="M1412 897q0-27-18-45l-91-91q-18-18-45-18t-45 18l-189 189v-502q0-26-19-45t-45-19h-128q-26 0-45 19t-19 45v502l-189-189q-19-19-45-19t-45 19l-91 91q-18 18-18 45t18 45l362 362 91 91q18 18 45 18t45-18l91-91 362-362q18-18 18-45zm252-1q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z"
        fill="#fff"
      ></path>
    </svg>
  </div>
</div>

আমরা উপরে যোগ করা তীর কোড SVG ফরম্যাটে। এটি ফন্ট অসাধারন CSS আইকন লাইব্রেরির উপর ভিত্তি করে।

আপনি এই GitHub রেপো থেকে SVG ফরম্যাটে শত শত অসাধারন ফন্ট আইকনগুলির মধ্যে বেছে নিতে পারেন৷

আপনার সম্পদ সংরক্ষণ করুন!

অনেক ওয়েবসাইট তাদের ওয়েবসাইটে সম্পূর্ণ ফন্ট অসাধারন লাইব্রেরি লোড করে, কিন্তু তারা শুধুমাত্র অল্প কিছু আইকন ব্যবহার করে - এটি ব্যান্ডউইথের অপচয়। আপনি SVG ফরম্যাটে যে 5-10টি আইকন প্রয়োজন সেগুলি ডাউনলোড করে আপনি অনেক সম্পদ সংরক্ষণ করতে পারেন৷

এই উদাহরণের জন্য, আমরা সরাসরি HTML মার্কআপে SVG ফাইল এম্বেড করছি। এই পদ্ধতিটিকে ইনলাইন SVG বলা হয় বিভিন্ন উদ্দেশ্যে SVG যোগ করার আরও অনেক উপায় আছে — কিন্তু আমি এটি একটি ভিন্ন টিউটোরিয়ালের জন্য সংরক্ষণ করব।

আমি এই টিউটোরিয়ালে এই SVG আইকনটি ব্যবহার করি৷

আপনি যদি উপরের HTML মার্কআপে দেখেন মূল SVG উৎসের সাথে তুলনা করেন, আপনি দেখতে পাবেন যে আমি কিছু পরিবর্তন করেছি:

আমি প্রস্থ এবং উচ্চতার বৈশিষ্ট্যগুলি সরিয়ে দিয়েছি (মূল ফাইলটি অনেক বড়)
একটি ক্লাস যোগ করা হয়েছে:arrow-circle-down যা আমাদের CSS বিভাগে প্রয়োজন।

ঠিক আছে, আসুন একটু স্টাইলিং যোগ করি, এবং তারপরে আমরা CSS অ্যানিমেশন সহ মজার অংশে চলে যাব!

CSS দিয়ে কন্টেইনার এবং তীর স্টাইল করা

আপনার CSS স্টাইলশীটের ভিতরে, নিম্নলিখিত নিয়ম-সেটগুলি যোগ করুন (শ্রেণী, বৈশিষ্ট্য এবং মান):

* {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  background-color: #26a1ff;
  height: 100vh;
}

.container-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: auto auto 1rem auto;
}

.text-label {
  text-transform: uppercase;
  font-family: helvetica;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  color: #fff;
}

.arrow-circle-down {
  display: block;
  width: 40px;
  height: 40px;
  margin: 16px 0;
}

এখন আপনি যদি আপনার ব্রাউজার উইন্ডোটি রিফ্রেশ করেন তবে এটি এইরকম হওয়া উচিত:

CSS এ কি হচ্ছে:

প্রথমে, আমরা প্যারেন্ট ডিভ এলিমেন্টের .container দিই 100vh এর উচ্চতার মান শ্রেণী। এটি ডিভাইসটি নির্বিশেষে সম্পূর্ণ ভিউপোর্টকে গ্রহণ করে। আমরা display: flex; ব্যবহার করি এটিকে একটি ফ্লেক্স কন্টেইনার করার জন্য সম্পত্তি, যা আমাদের তীর এবং টেক্সটলেবেলের জন্য প্রয়োজন। আমরা এটিকে একটি সুন্দর হালকা নীল পটভূমির রঙও দিই৷
তারপর আমরা .arrow-circle-down দিই একটি নির্দিষ্ট প্রস্থ এবং 40px উচ্চতার ক্লাস করুন যাতে এটি খুব বেশি জায়গা নেয় না। এটি লক্ষণীয় হওয়া উচিত, তবে বিভ্রান্তিকর নয়৷
.text-label বড় হাতের সম্পত্তি এবং কিছু অক্ষর-ব্যবধান সহ প্রসাধনী স্টাইলিং একটি বিট পায়। আপনার নিজের পছন্দ অনুযায়ী এটি পরিবর্তন করতে দ্বিধা বোধ করুন৷
আমরা .container-footer দিই উপরে, ডান এবং বামে একটি মার্জিন স্বয়ংক্রিয় সম্পত্তি। এটি কন্টেইনার ফুটার এবং এর বাচ্চাদের (আইকন এবং পাঠ্য) প্যারেন্ট কন্টেইনারের নীচে জোর করে, যেখানে আমরা এটি চাই৷ নীচের প্রান্তটি একটি 1rem; তীর বাউন্স হলে সবকিছু ভিউপোর্টের মধ্যে থাকে তা নিশ্চিত করার জন্য মান।
.container-footer ক্লাস কিছু ফ্লেক্স বৈশিষ্ট্যও পায়, flex-direction: column; এবং align-items: center; . এই বৈশিষ্ট্যগুলি পাঠ্য এবং আইকন উপাদানগুলিকে একে অপরের উপরে স্ট্যাক করে এবং কন্টেইনার ফুটারের কেন্দ্রে ঠিকভাবে থিম সারিবদ্ধ করে৷

স্পষ্টীকরণের জন্য, margin: auto auto 1rem auto ডিক্লারেশন হল আরও ভার্বস এর জন্য একটি সুন্দর সংক্ষিপ্ত বিবরণ:

margin-top: auto;
margin-right: auto;
margin-bottom: 1rem;
margin-left: auto;

পরবর্তীতে, CSS অ্যানিমেশনের সাথে আপনার তীর বাউন্স করার সময়!

CSS দিয়ে স্ক্রোল ডাউন অ্যারো অ্যানিমেট করা

CSS, JavaScript এবং একটি সংমিশ্রণ উভয়ের মাধ্যমেই অ্যানিমেট করার অনেক উপায় রয়েছে। এই উদাহরণের জন্য, আমরা CSS-এ বিশুদ্ধভাবে অ্যানিমেট করতে যাচ্ছি।

আমরা ইতিমধ্যেই একটি .bounce যোগ করেছি SVG তীর ধারণকারী ইমেজ উপাদানের ক্লাস। এখনও পর্যন্ত এটি কিছুই করে না কারণ আমরা এখনও CSS-এ ক্লাস সংজ্ঞায়িত বা স্টাইল করিনি।

আপনার CSS স্টাইলশীটে নিম্নলিখিত যোগ করুন:

.bounce {
  animation: bounce 2s;
}

@keyframes bounce {
  0%,
  25%,
  50%,
  75%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-20px);
  }
  60% {
    transform: translateY(-12px);
  }
}

এবং এখন, আপনার কাছে একটি বাউন্সিং তীর রয়েছে:

সিএসএস কোডে কী ঘটছে

আমাদের তীর সহ SVG উপাদানে, আমাদের .bounce নামে একটি ক্লাস আছে . এই ক্লাসে animation নামে একটি সম্পত্তি আছে .

অ্যানিমেশন সম্পত্তির দুটি মান আছে, bounce এবং2s .

bounce মান হল একটি ফাংশন যা @keyframe অ্যানিমেশন@keyframes bounce ট্রিগার করে যা আমি কিছুক্ষণের মধ্যে পেয়ে যাব।

2s মান (দুই সেকেন্ড) হল আমাদের @keyframe অ্যানিমেশন চালানোর মোট সময়।

@keyframe অ্যানিমেশন:

মোট সময়কাল দুই সেকেন্ড (animation property. দ্বারা সেট করা হয়েছে। )
মোট সাতটি ভিন্ন কীফ্রেম আছে। 0%, 25%, 40% 50%, 60% 75%, এবং 100%৷
তিনটি ভিন্ন Y স্থানাঙ্কের অবস্থান:Y(0), Y(-20px) এবং Y(-12px)। এই স্থানাঙ্কগুলিই নির্দেশ করে যে তীর উপাদানটি সময়মতো বিভিন্ন পয়েন্টে (কীফ্রেম) উপরে বা নিচে চলে যায়।

প্রথম @keyframe ব্লক {..} বলে যে ঠিক এই পাঁচটি কীফ্রেমে:0%, 25%, 50%, 75%, এবং 100%, — তীরটি শুরুর অবস্থানে থাকা উচিত, যা Y(0px)।

0%,
25%,
50%,
75%,
100% {
  transform: translateY(0);
}

দ্বিতীয় @keyframe ব্লক বলে যে 40% চিহ্নে, তীরটিকে Y(-20px) এর অবস্থান দিয়ে উপরে উঠতে হবে।

40% {
  transform: translateY(-20px);
}

তৃতীয় কীফ্রেম ব্লক বলে যে 60% চিহ্নে, তীরটি আবার উপরে উঠতে হবে। এবার আমরা তীরটিকে Y(-12px) এর অবস্থান দিয়ে, প্রথমবারের মতো অর্ধেক উপরে নিয়ে যাচ্ছি।

60% {
  transform: translateY(-12px);
}

লক্ষ্য করুন যেএর মধ্যে দুটি কীফ্রেম যেখানে তীরটি উপরে চলে যায় (40% এবং 60%) এটি 50% কীফ্রেমে Y(0) এ ফিরে যায়। এটিই তীরটিকে দুবার উপরে এবং নীচে যেতে দেয়, অল্প সময়ের মধ্যে তুলনামূলকভাবে দ্রুত।

আমি তৃতীয় অবস্থানে শুধুমাত্র -12px দ্বারা তীর সরানোর সিদ্ধান্ত নিয়েছি কারণ এটি একটি বাস্তব জীবনের বাউন্সিং বলকে অনুকরণ করে৷ একটি বল মাটিতে আঘাত করলে এটি প্রথমবারের চেয়ে কম উপরে উঠবে। একটি বল কতটা বাউন্স করে (এবং কতটা উঁচু) অবশ্যই একাধিক কারণ দ্বারা নির্ধারিত হয়, যেমন ওজন, গতি, উপাদানের ধরন ইত্যাদি কিন্তু এটি কেবলমাত্র আমাদের আরও বেশি নড়বড়ে জায়গা দেয়, যেহেতু একটি উপায় নেই। এটা করতে

যদি অ্যানিমেশনের জন্য CSS বিভ্রান্তিকর হয়, তাহলে সময়কাল এবং CSSট্রান্সফর্ম ট্রান্সলেট নিয়ে তালগোল পাকানোর চেষ্টা করুন সম্পত্তি একটু অনুশীলনের সাথে, বিন্দুগুলিকে সংযুক্ত করা অনেক সহজ হবে।

40% কীফ্রেমকে -48px-এর ট্রান্সফর্ম ট্রান্সলেট প্রপার্টি দেওয়ার চেষ্টা করুন এবং দেখুন কি হয়।
CSS animation দেওয়ার চেষ্টা করুন সম্পত্তি 2 এর পরিবর্তে 5 সেকেন্ডের সময়কাল। তারপর এটিকে 100ms এর মান দেওয়ার চেষ্টা করুন (আপনি সেকেন্ডের পরিবর্তে মিলিসেকেন্ড ব্যবহার করতে পারেন)।

আপনি যদি চরমের সাথে পরীক্ষা করেন তবে একটি ধারণা বাড়িতে চালানো প্রায়শই সহজ। এখানেই সাধারণত আমার "আহা" মুহূর্ত থাকে।

পরীক্ষা!

CSS অ্যানিমেশনের অগণিত সম্ভাবনা রয়েছে। আসুন সংক্ষিপ্তভাবে আমরা আমাদের বিদ্যমান অ্যানিমেশনে তৈরি করতে পারি এমন কয়েকটি বৈচিত্র্য পরীক্ষা করে দেখি।

অ্যানিমেশন-বিলম্ব সম্পত্তি

এই মুহূর্তে আপনার ওয়েবপৃষ্ঠা লোড হওয়ার সাথে সাথে আপনার তীরটি বাউন্স হবে। আপনি এটিকে কিছুটা বিলম্ব করতে চাইতে পারেন, যাতে আপনার ব্যবহারকারীরা আপনার সাইটে প্রবেশ করার কয়েক সেকেন্ডের মধ্যে বিভ্রান্ত না হয়।

আপনি animation delay যোগ করে এটি করতে পারেন আপনার .bounce এ সম্পত্তি ক্লাস, এই মত:

.bounce {
  animation: bounce 2s;
  animation-delay: 5s;
}

এখন আপনার দুই-সেকেন্ডের কীফ্রেম অ্যানিমেশন আপনার পৃষ্ঠা লোড হওয়ার ঠিক পাঁচ সেকেন্ড না হওয়া পর্যন্ত চলতে শুরু করবে না।

অ্যানিমেশন পুনরাবৃত্তি গণনা সম্পত্তি

কখনও কখনও আপনি একটি অ্যানিমেশন বার কয়েক পুনরাবৃত্তি করতে চান. অ্যানিমেশনের পুনরাবৃত্তি করতে আমরা animation-iteration-count ব্যবহার করি সম্পত্তি, এই মত:

.bounce {
  animation: bounce 2s;
  animation-delay: 5s;
  animation-iteration-count: 2;
}

এখন আপনার তীরটি পাঁচ সেকেন্ড পরে বাউন্স করা শুরু করে, কিন্তু এইবার এটি আরও একবার কীফ্রেম অ্যানিমেশনের পুনরাবৃত্তি করে৷

অসীম CSS অ্যানিমেশন

কখনও কখনও, বিরল ক্ষেত্রে, আপনি একটি CSS অ্যানিমেশন অসীমভাবে চালাতে চান। এটি করতে আপনি অ্যানিমেশন পুনরাবৃত্তির সংখ্যা পরিবর্তন করে infinite; করুন এই মত:

.bounce {
  animation: bounce 2s;
  animation-iteration-count: infinite;
}

কিন্তু অসীম অ্যানিমেশনের সাথে সাবধানে চলাফেরা করুন। চিরকাল ঘুরতে থাকা অ্যানিমেশন কেউ পছন্দ করে না।

একটি ব্যতিক্রম হতে পারে যদি আপনার কাছে সূক্ষ্ম মিটমিট করে অ্যানিমেশন সহ একগুচ্ছ ক্ষুদ্র তারার সাথে কিছু ধরণের জীবন্ত স্থানের পটভূমি থাকে। বায়ুমণ্ডলকে গতিশীল রাখতে আপনি সেই ধরনের উদ্দেশ্যে একটি অ্যানিমেশন লুপ/পুনরাবৃত্তি করতে চাইতে পারেন।

অটোপ্রিফিক্সার

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

সিএসএস অ্যানিমেশন সম্পদ

MDN ওয়েব ডক্স:CSS অ্যানিমেশন