একটি স্ট্যাটিক বিভাগ একটি সমতল চিত্রের মত পড়ে। এটি একটি মৃদু, লুপিং ড্রিফট দিন এবং একই উপাদান জীবন্ত অনুভব করে। দ্য ভাসমান প্রভাব মধ্যে এক্সটেনশন এলিমেন্টরের জন্য মাস্টার অ্যাডঅন যে কোনো উপাদানে ক্রমাগত গতি যোগ করে, লেখার জন্য কোনো কীফ্রেম বা কাস্টম CSS নেই। এই নির্দেশিকাটি ব্যাখ্যা করে যে এক্সটেনশনটি কী করে, আপনি কী অ্যানিমেট করতে পারেন এবং কীভাবে এটি প্রয়োগ করতে হয়।
ফ্লোটিং ইফেক্ট এক্সটেনশন কি? #
দ্য ভাসমান প্রভাব এক্সটেনশন হল এলিমেন্টর মোশন টুলের জন্য একটি মাস্টার অ্যাডঅন যা যেকোনো এলিমেন্টর এলিমেন্ট, বিভাগ, কলাম বা উইজেটে একটি ক্রমাগত, লুপিং অ্যানিমেশন যোগ করে। এটি দিয়ে উপাদানটিকে অ্যানিমেট করে অনুবাদ করা, ঘোরান, এবং স্কেল রূপান্তর করে, এবং আপনাকে নিয়ন্ত্রণ করতে দেয় সময়কাল, বিলম্ব, এবং অভিমুখ আন্দোলনের। যেহেতু প্রভাবটি CSS-ভিত্তিক, উপাদানটি একটি ভারী জাভাস্ক্রিপ্ট অ্যানিমেশন লাইব্রেরি ছাড়াই নিজের উপর প্রবাহিত হতে থাকে।
আপনি কি অ্যানিমেট করতে পারেন #
ফ্লোটিং ইফেক্ট তিনটি ট্রান্সফর্ম টাইপের মাধ্যমে কাজ করে এবং আপনি গতিকে আকার দিতে সময় নিয়ন্ত্রণের সাথে তাদের একত্রিত করেন:
- অনুবাদ করা ant উপাদানটিকে X বা Y অক্ষ বরাবর নিয়ে যায়, ক্লাসিক আপ-এন্ড-ডাউন বা সাইড-টু-সাইড ফ্লোট।
- আবর্তিত করা ant একটি মৃদু দোলা জন্য উপাদান সামান্য সামনে এবং পিছনে বাঁক।
- স্কেল একটি নরম স্পন্দন প্রভাবের জন্য উপাদানটি বৃদ্ধি পায় এবং সঙ্কুচিত করে।
- সময়কাল, বিলম্ব এবং দিকনির্দেশ একটি চক্র কতক্ষণ সময় নেয়, এটি শুরু হওয়ার আগে কতক্ষণ অপেক্ষা করতে হবে এবং গতি কোন পথে চলে তা সেট করতে হবে, তাই অ্যানিমেশনটি বিভাগের গতির সাথে মেলে।
এলিমেন্টরে ফ্লোটিং ইফেক্ট কিভাবে যোগ করবেন #
মাস্টার অ্যাডঅনগুলিতে এক্সটেনশন সক্রিয় হয়ে গেলে এলিমেন্টর এডিটর থেকে ফ্লোটিং ইফেক্টস প্রতি উপাদান প্রয়োগ করা হয়। সংক্ষেপে: আপনি যে উপাদানটি অ্যানিমেট করতে চান তা নির্বাচন করুন, এর সেটিংস খুলুন, ফ্লোটিং ইফেক্ট চালু করুন এবং এর সময় সহ একটি রূপান্তর চয়ন করুন।
- নিশ্চিত করা এলিমেন্টরের জন্য মাস্টার অ্যাডঅন ইনস্টল এবং সক্রিয়, এবং ফ্লোটিং ইফেক্ট এক্সটেনশনটি মাস্টার অ্যাডঅন প্যানেলে সক্ষম করা আছে।
- এলিমেন্টর এডিটরে, আপনি যে বিভাগ, কলাম বা উইজেটটি অ্যানিমেট করতে চান সেটি নির্বাচন করুন।
- উপাদানের সেটিংস খুলুন এবং মাস্টার অ্যাডঅনগুলি খুঁজুন ভাসমান প্রভাব নিয়ন্ত্রণ, তারপর প্রভাব সুইচ।
- একটি রূপান্তর চয়ন করুন অনুবাদ করা, আবর্তিত করা, বা স্কেল এবং সেট সময়কাল, বিলম্ব, এবং অভিমুখ.
- লাইভ সাইটে উপাদান প্রবাহ দেখতে পৃষ্ঠাটির পূর্বরূপ দেখুন বা প্রকাশ করুন।
ভাসমান প্রভাব ব্যবহার করার জন্য টিপস #
- গতি সূক্ষ্ম রাখুন। একটি ছোট অনুবাদ দূরত্ব এবং একটি ধীর সময়কাল পালিশ হিসাবে পড়া; বড়, দ্রুত আন্দোলন বিভ্রান্তিকর দেখায়।
- প্রতি ভিউ এক বা দুটি উপাদানে এটি ব্যবহার করুন। একটি একক ভাসমান নায়ক ইমেজ বা আইকন চোখ টানে; গতিশীল একটি পুরো পৃষ্ঠা নিজের সাথে প্রতিযোগিতা করে।
- প্রবেশদ্বার গতির সাথে এটি জোড়া। এর সাথে ভাসমান প্রভাব একত্রিত করুন প্রবেশ অ্যানিমেশন এক্সটেনশন যাতে একটি উপাদান প্রথমে সহজ হয়, তারপর তার মৃদু ভাসমান রাখে।
- মোবাইলে চেক করুন। নিশ্চিত করুন যে আন্দোলনটি এখনও ছোট স্ক্রিনে ভাল দেখায় এবং কাছাকাছি বিষয়বস্তুকে চারপাশে ঠেলে দেয় না।
প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী #
মাস্টার অ্যাডঅনগুলিতে ফ্লোটিং ইফেক্ট এক্সটেনশন কী?
ফ্লোটিং ইফেক্টস হল এলিমেন্টর মোশন এক্সটেনশনের জন্য একটি মাস্টার অ্যাডঅন যা যেকোনো এলিমেন্টর এলিমেন্টে একটানা, লুপিং অ্যানিমেশন যোগ করে। এটি অনুবাদ, ঘোরানো এবং স্কেল রূপান্তর ব্যবহার করে এবং আপনাকে কাস্টম CSS বা কীফ্রেম না লিখেই আন্দোলনের সময়কাল, বিলম্ব এবং দিক নিয়ন্ত্রণ করতে দেয়।
ফ্লোটিং ইফেক্ট কি ধরনের অ্যানিমেশন তৈরি করতে পারে?
এটি তিনটি রূপান্তর প্রকারকে সমর্থন করে: একটি উপাদানকে উপরে এবং নীচে বা পাশে সরাতে অনুবাদ করুন, একটি মৃদু পিছনে এবং সামনের দিকে ঘোরান এবং একটি নরম স্পন্দন প্রভাবের জন্য স্কেল করুন৷ আপনি সঠিক গতি আকৃতি দিতে সময় সেটিংস সঙ্গে একটি রূপান্তর একত্রিত করতে পারেন।
আমি কি ভাসমান অ্যানিমেশনের গতি এবং দিক নিয়ন্ত্রণ করতে পারি?
হ্যাঁ। প্রতিটি প্রভাব সময়কাল, বিলম্ব এবং দিক নিয়ন্ত্রণ প্রকাশ করে। সময়কাল নির্ধারণ করে যে একটি চক্র কতক্ষণ সময় নেয়, বিলম্ব সেট করে যে গতি শুরু হওয়ার আগে কতক্ষণ অপেক্ষা করতে হবে এবং অ্যানিমেশনটি কোন দিকে চলে তা নির্দেশ করে, যাতে আপনি বিভাগের গতির সাথে ফ্লোটকে মেলাতে পারেন।
ফ্লোটিং ইফেক্ট কি কোনো এলিমেন্টর এলিমেন্টে কাজ করে?
হ্যাঁ। এক্সটেনশনটি এলিমেন্টর বিভাগ, কলাম এবং উইজেটগুলিতে প্রযোজ্য, যাতে আপনি একটি চিত্র, একটি আইকন, একটি শিরোনাম, একটি বোতাম বা একটি সম্পূর্ণ বিভাগ ভাসতে পারেন৷ মাস্টার অ্যাডঅন প্যানেলে এক্সটেনশনটি চালু হয়ে গেলে আপনি এলিমেন্টর এডিটর থেকে প্রতি উপাদানে এটি সক্ষম করুন৷।
ভাসমান অ্যানিমেশন কি আমার ওয়েবসাইটকে ধীর করে দেবে?
প্রভাবটি CSS-ভিত্তিক, তাই এটি ভারী জাভাস্ক্রিপ্ট অ্যানিমেশন লাইব্রেরির তুলনায় হালকা। পৃষ্ঠাগুলিকে মসৃণ রাখতে, প্রতি ভিউতে মাত্র এক বা দুটি উপাদানে এটি ব্যবহার করুন এবং পৃষ্ঠার সবকিছু একবারে অ্যানিমেট করার পরিবর্তে আন্দোলনকে সূক্ষ্ম রাখুন৷।
