মাস্টার অ্যাডঅন দ্বারা ফ্লোটিং ইফেক্ট এলিমেন্টর এক্সটেনশন কীভাবে ব্যবহার করবেন

 মাস্টার অ্যাডঅন থেকে ফ্লোটিং ইফেক্ট এলিমেন্টর এক্সটেনশন আপনাকে আপনার ওয়েবসাইটের যেকোনো উপাদানে মসৃণ, ইন্টারেক্টিভ অ্যানিমেশন যোগ করতে দেয়। অনুবাদ, ঘূর্ণন এবং স্কেলিং এর মত সহজ কাস্টমাইজেশনের মাধ্যমে আপনি সূক্ষ্ম তৈরি করতে পারেন ভাসমান গতি বা গতিশীল 3D প্রভাব।

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

ফ্লোটিং ইফেক্ট এলিমেন্টর এক্সটেনশন কীভাবে ব্যবহার করবেন

ভাসমান প্রভাবগুলির বিকল্পগুলিতে যাওয়ার আগে আপনাকে অবশ্যই নিশ্চিত করতে হবে যে এক্সটেনশনটি সক্ষম করা আছে।

শুধু আপনার ড্যাশবোর্ডে মাস্টার অ্যাডঅনগুলিতে যান। এক্সটেনশন ট্যাবে যান এবং ফ্লোটিং ইফেক্ট এক্সটেনশন টগল করুন। সরল!

আপনি এটি সক্ষম করার পরে, আপনি আপনার সাইটের যেকোনো উপাদানের উন্নত ট্যাবে নেভিগেট করতে পারেন এবং "ভাসমান প্রভাব" এক্সটেনশন খুঁজে পেতে নিচে স্ক্রোল করতে পারেন। এটি টগল করুন এবং, আপনি নিম্নলিখিত কাস্টমাইজেশন বিকল্পগুলি দেখতে পাবেন।

1. অনুবাদ
এটি আপনাকে X এবং Y অক্ষ বরাবর একটি উপাদান সরাতে দেয়। X অক্ষের অনুবাদ সামঞ্জস্য করে, উপাদানটি বাম এবং ডানে সরে যাবে। একইভাবে, Y অক্ষ সামঞ্জস্য করা উপাদানটিকে উপরে এবং নীচে নিয়ে যায়। উভয় অক্ষকে একত্রিত করলে একটি 3D ভাসমান প্রভাব তৈরি হয়, আপনার উপাদানগুলিতে গভীরতা এবং গতি যোগ করে।

2। ঘোরান
এই বিকল্পের সাহায্যে, আপনি X, Y, এবং Z অক্ষ বরাবর উপাদানগুলি ঘোরাতে পারেন। এটি আপনার উপাদানগুলিকে আরও গতিশীল, স্পিনিং প্রভাব দেয়।
আপনি ঘূর্ণনের সময়কাল এবং বিলম্ব সামঞ্জস্য করতে পারেন, মসৃণ বা আরও নাটকীয় রূপান্তরের অনুমতি দেয়।

3. স্কেল
স্কেল প্রভাব আপনাকে X এবং Y অক্ষ বরাবর একটি উপাদান প্রসারিত বা সঙ্কুচিত করতে দেয়। এটি একটি বৃদ্ধি/সঙ্কুচিত অ্যানিমেশন তৈরি করে, যার ফলে আপনার উপাদানগুলি প্রসারিত বা সংকুচিত হতে দেখা যায়। অন্যান্য প্রভাবগুলির মতো, আপনি অ্যানিমেশনের সময় নিয়ন্ত্রণ করতে সময়কাল এবং বিলম্ব সামঞ্জস্য করতে পারেন।

এই তিনটি কাস্টমাইজেশন বিকল্পগুলিকে একত্রিত করে, আপনি সূক্ষ্ম নড়াচড়া থেকে আরও জটিল, নজরকাড়া অ্যানিমেশন পর্যন্ত ভাসমান প্রভাবগুলির অবিরাম বৈচিত্র তৈরি করতে পারেন।

আমরা আপনাকে চেক করার পরামর্শ দিই outElementor Pro বৈশিষ্ট্য যেমন। আপনি Elementor pro এবং একত্রিত করতে পারেন মাস্টার অ্যাডঅন আপনি চান যে কোনো ধরনের ওয়েবসাইট তৈরি করতে।

প্রভাব সমন্বয়

এর অন্যতম শক্তিশালী বৈশিষ্ট্য ভাসমান প্রভাব এক্সটেনশন হল অনন্য এবং গতিশীল অ্যানিমেশনের জন্য অনুবাদ, ঘূর্ণন এবং স্কেলিংকে একত্রিত করার ক্ষমতা। এই প্রভাবগুলিকে স্তরিত করে, আপনি সূক্ষ্ম ভাসমান গতি থেকে সম্পূর্ণ 3D ইন্টারেক্টিভ উপাদান পর্যন্ত যে কোনও কিছু তৈরি করতে পারেন।

অনুবাদ এবং ঘোরান একত্রিত করুন: ঘূর্ণনের সাথে অনুবাদ যুক্ত করা একটি তরল তৈরি করে, স্ক্রীন জুড়ে নড়াচড়ার সাথে ঘূর্ণায়মান প্রভাব। উদাহরণস্বরূপ, আরও গতিশীল, 3D বিভ্রমের জন্য জায়গায় ঘোরানোর সময় আপনি একটি উপাদানকে তির্যকভাবে ভাসতে পারেন।

অনুবাদ এবং স্কেল একত্রিত করুন: অনুবাদ এবং স্কেলিং উভয় ব্যবহার করে একটি উপাদান একই সময়ে সরানো এবং আকার পরিবর্তন করতে দেয়। উপাদানটি স্ক্রীন জুড়ে প্রবাহিত হওয়ার সাথে সাথে এটি একটি প্রসারিত বা সঙ্কুচিত ভাসমান প্রভাব তৈরি করতে পারে।

তিনটিই একত্রিত করুন: চূড়ান্ত ভাসমান প্রভাবের জন্য, অনুবাদ, ঘোরানো এবং স্কেল একত্রিত করুন। এটি জটিল অ্যানিমেশনগুলির জন্য অনুমতি দেয় যেখানে উপাদানটি একবারে নড়াচড়া করে, ঘোরে এবং বৃদ্ধি/সঙ্কুচিত করে, এটিকে একটি আকর্ষক, বহুমাত্রিক চেহারা দেয়।

আপনি যখন এই সংমিশ্রণগুলির সাথে পরীক্ষা করেন তখন সম্ভাবনাগুলি অফুরন্ত। গতি এবং সময় সামঞ্জস্য করতে সময়কাল এবং বিলম্বের জন্য বিভিন্ন মান নিয়ে খেলুন, যে কোনও উপাদানের জন্য সত্যিকারের কাস্টম ফ্লোটিং অ্যানিমেশন তৈরি করুন৷।

একটি চিত্রের উপর একটি ভাসমান প্রভাব তৈরি করা

আমরা আশা করি, এখন পর্যন্ত আপনি জানেন কিভাবে ফ্লোটিং ইফেক্ট এক্সটেনশনের জন্য বিভিন্ন সেটিংস পরিবর্তন করতে হয়।

একটি বোনাস হিসাবে আমরা আপনাকে দেখাব কিভাবে কিছু ছবি সহ একটি দুর্দান্ত বিভাগ তৈরি করতে হয়, ভাসমান প্রভাব এবং পজিশনিং এক্সটেনশন:

আপনি নীচের ভিডিওটি অনুসরণ করতে পারেন যেখানে আমরা আপনাকে সম্পূর্ণ প্রক্রিয়াটি দেখাই৷।

প্রথমত, পিক কিছু ছবি বাছাই করা যাক যা আমরা আমাদের বিভাগ তৈরি করতে ব্যবহার করব।

তারপরে, আমরা 3টি কলাম এবং 2টি সারির জন্য একটি পূর্ণ প্রস্থের ফ্লেক্সবক্স বা গ্রিড যোগ করি এবং উপযুক্ত বাক্সের ভিতরে নিম্নলিখিত স্ক্রিনশটের মতো সমস্ত ছবি সাজাই।

এখন, আসুন অবস্থান এবং ভাসমান প্রভাবের উপর ফোকাস করি। আমরা পজিশনিং দিয়ে শুরু করার পরামর্শ দিই। ভাসমান প্রভাব বাস্তবায়নের আগে আপনার নকশা এবং সমস্ত চিত্র এবং কণার অবস্থান সাবধানে পর্যালোচনা করুন।

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

আমরা সমস্ত ছবির জন্য অবস্থান সম্পন্ন করেছি, এবং সংযুক্ত স্ক্রিনশট বর্তমান বিন্যাসকে চিত্রিত করে।

অবশেষে, আসুন পছন্দসই চিত্রগুলিতে ভাসমান প্রভাব প্রয়োগ করি। আমরা প্রথম এবং তৃতীয় কলামের চিত্রগুলিতে X এবং Y প্রভাবগুলি অনুবাদ করেছি৷ রোটেট জেড প্রভাব একচেটিয়াভাবে প্রোফাইল ছবিতে প্রয়োগ করা হয়েছে। বর্তমান ভিজ্যুয়াল ফলাফল দেখতে অনুগ্রহ করে নিম্নলিখিত GIF ফাইলটি পড়ুন।

দ্য ভাসমান প্রভাব এক্সটেনশন আপনার ওয়েবসাইটে অ্যানিমেটিং উপাদানগুলির জন্য অফুরন্ত সম্ভাবনা অফার করে। অনুবাদ, ঘূর্ণন এবং স্কেলিং এর জন্য সহজ কিন্তু শক্তিশালী কাস্টমাইজেশন বিকল্পগুলির সাথে, আপনি গতিশীল, নজরকাড়া ভাসমান প্রভাব তৈরি করতে পারেন যা দর্শকদের জড়িত করে। সঙ্গে মিলিত হলে পজিশনিং এক্সটেনশন, সত্যিকারের কাস্টমাইজড ডিজাইনের জন্য উপাদানগুলির গতিবিধি এবং বসানো উভয়ের উপর আপনার সম্পূর্ণ নিয়ন্ত্রণ রয়েছে।

আপনার সাইটের জন্য নিখুঁত ভাসমান প্রভাব খুঁজে পেতে বিভিন্ন সেটিংস এবং সংমিশ্রণ নিয়ে পরীক্ষা করতে ভয় পাবেন না। একটু সৃজনশীলতার সাথে, আপনি আপনার ওয়েব ডিজাইনকে উন্নত করতে পারেন এবং আরও ইন্টারেক্টিভ ব্যবহারকারীর অভিজ্ঞতা তৈরি করতে পারেন।

আপনি যদি এই এক্সটেনশনের সাথে কোন সমস্যার সম্মুখীন হন, তাহলে নির্দ্বিধায় এখানে মন্তব্য করুন বা আমাদের মাধ্যমে আমাদের সাথে যোগাযোগ করুন ওয়েবসাইট যোগাযোগ ফর্ম.