ভাসমান প্রভাব
বেসিক আপ-এন্ড-ডাউন ফ্লোটিং ছাড়িয়ে যান। ফ্লোটিং ইফেক্টস এক্সটেনশন আপনাকে যেকোনো উপাদানের জন্য পেশাদার-গ্রেড অ্যানিমেশন নিয়ন্ত্রণ দেয়। স্বাধীনভাবে একটি উপাদানের অবস্থান (অনুবাদ) অ্যানিমেট করুন, এটিকে যেকোনো 3D অক্ষে (রোটেট X, Y, Z) ঘোরান এবং এটিকে প্রসারিত বা স্কোয়াশ করুন (স্কেল X, Y)। একটি লোগো তৈরি করুন যা কাত হয়, একটি ব্যাজ যা স্পন্দিত হয়, বা একটি চিত্র যা আলতোভাবে প্রবাহিত হয় এবং ঘোরে। এটি সবই আপনার এলিমেন্টর এডিটরে সাধারণ সংখ্যা ক্ষেত্র এবং চেকবক্স দ্বারা নিয়ন্ত্রিত। কোন প্লাগইন নেই, কোন কোড নেই এবং আপনার নখদর্পণে শুধুমাত্র শক্তিশালী অ্যানিমেশন।

বহুমুখী আন্দোলন (অনুবাদ)
আপনার উপাদানগুলিকে মৃদু, ভাসমান গতির অনুভূতি দিন। অনুভূমিকভাবে (X-অক্ষ) বা উল্লম্বভাবে (Y-অক্ষ) সরাতে অনুবাদ নিয়ন্ত্রণগুলি ব্যবহার করুন। একটি প্রারম্ভিক বিন্দু এবং একটি শেষ বিন্দু পিক্সেলে সেট করুন একটি পিছনে এবং সামনে বা উপরে এবং নিচে প্রবাহিত প্রভাব তৈরি করতে। মূল বৈশিষ্ট্যগুলির প্রতি মনোযোগ আকর্ষণ বা আপনার ডিজাইনে একটি কৌতুকপূর্ণ স্পর্শ যোগ করার জন্য উপযুক্ত।
- অনুভূমিক ফ্লোট: একটি উপাদানকে বাম থেকে ডানে প্রবাহিত করুন (এক্স অনুবাদ করুন) একটি ধীর গতির মেঘের মতো।
- উল্লম্ব বাউন্স: আইকন বা ব্যাজের জন্য একটি মৃদু আপ-এন্ড-ডাউন বাউন্স (Y অনুবাদ করুন) তৈরি করুন।
- জটিল পথের জন্য একত্রিত করুন: তির্যক বা বৃত্তাকার ভাসমান পথের জন্য X এবং Y উভয়ই একসাথে ব্যবহার করুন।
স্কেলিং, ঘূর্ণন এবং সময়
সাধারণ আপ-ডাউন গতির বাইরে যান। উপাদানগুলিকে স্কেলিং করে শ্বাস নিতে দিন। একটি উপাদানের প্রস্থ এবং উচ্চতা আলাদাভাবে প্রসারিত বা স্কোয়াশ করতে স্বাধীনভাবে স্কেল X এবং স্কেল Y ব্যবহার করুন। একটি ধীর, ক্রমাগত ঘূর্ণনের জন্য ঘূর্ণন যোগ করুন। এটি আপনাকে একটি নরমভাবে স্পন্দিত কল-টু-অ্যাকশন বোতাম থেকে ধীরে ধীরে ঘূর্ণায়মান লোগো পর্যন্ত সবকিছু তৈরি করতে দেয়।
- স্পন্দন প্রভাব: স্কেল X/Y ব্যবহার করুন একটি উপাদানকে ছন্দময়ভাবে বৃদ্ধি এবং সঙ্কুচিত করতে, চোখ আঁকতে।
- স্বাধীন নিয়ন্ত্রণ: অনন্য গতির জন্য উচ্চতা একই রেখে একটি উপাদানের প্রস্থ (স্কেল X) প্রসারিত করুন।
- ক্রমাগত স্পিন: লোগো বা আলংকারিক আইকনগুলিতে ধীর, অবিরাম ঘূর্ণনের জন্য ঘূর্ণন প্রয়োগ করুন।




ভাসমান প্রভাবের জন্য প্রায়শই জিজ্ঞাসিত প্রশ্ন
এই জটিল দেখায়। এটা ব্যবহার করা কঠিন?
একদমই না! প্যানেলটি বিস্তারিত দেখতে পারে কারণ এটি শক্তিশালী, কিন্তু আপনি সহজ শুরু করেন। শুধু একটি প্রভাব সক্ষম করুন (যেমন অনুবাদ Y), একটি ছোট “To” মান সেট করুন (যেমন 20px), এবং আপনার কাছে একটি ভাসমান অ্যানিমেশন আছে। আপনি যখন আরও সৃজনশীল হতে চান তখন অন্যান্য নিয়ন্ত্রণগুলি রয়েছে৷ আপনি যেতে যেতে শিখুন।
আমি কি মোবাইলে এই 3D ঘূর্ণনগুলি ব্যবহার করতে পারি?
ভিজ্যুয়াল ইফেক্ট কাজ করবে, কিন্তু এটি একটি "সত্য" 3D পরিবেশ নয়। এটি CSS ব্যবহার করে 3D ঘূর্ণন অনুকরণ করে, যা সমস্ত আধুনিক মোবাইল ব্রাউজারে সমর্থিত। এটি দুর্দান্ত দেখাবে, তবে তীব্র 3D এর জন্য, আপনার একটি ভিন্ন সরঞ্জামের প্রয়োজন হবে। টিল্টিং এবং টার্নিং ইফেক্টের জন্য এটি ডিজাইন করা হয়েছে, এটি নিখুঁত।
পৃথক স্কেল X এবং স্কেল Y এর জন্য একটি ভাল বাস্তব-বিশ্বের ব্যবহার কী?
একটি "আমাকে অবহিত করুন" বোতাম কল্পনা করুন৷ আপনি স্কেল Y ব্যবহার করতে পারেন যাতে এটি দ্রুত স্কোয়াশ হয় (স্পৃশ্য প্রতিক্রিয়া প্রদান করে), তারপর স্বাভাবিক অবস্থায় ফিরে আসে। অথবা, একটি মিউজিক প্লেয়ারের জন্য, একটি সাউন্ড ওয়েভ গ্রাফিক প্রতিটি বারে স্কেল Y ব্যবহার করে এটিকে ছন্দে নিয়ে যেতে পারে।
এক পৃষ্ঠায় এই প্রভাবগুলির অনেকগুলি ব্যবহার করা কি কর্মক্ষমতাকে আঘাত করবে?
আপনি যদি ওভারবোর্ডে যান, হ্যাঁ em যেকোনো কিছুর মতো। এক ডজন উপাদানে 10-20টি ভিন্ন জটিল অ্যানিমেশন প্রয়োগ করলে ধীরগতির ডিভাইসে জ্যাঙ্ক হতে পারে। মূলটি সূক্ষ্মতা। প্রতি বিভাগে 1-2টি প্রাথমিক প্রভাব ব্যবহার করুন। একটি মৃদু ফ্লোট এবং একটি সামান্য ঘূর্ণন আপনার সাধারণত একটি পেশাদার, প্রাণবন্ত প্রভাবের জন্য প্রয়োজন।
ট্রেন্ডিং এলিমেন্টর উইজেট এবং এক্সটেনশন
কম সময়ে অত্যাধুনিক ওয়েবসাইট তৈরি করুন।

গ্লাসমরফিজম

ধারক অতিরিক্ত

নিদর্শন

পোস্ট/পেজ ডুপ্লিকেটর


