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