প্রবেশ অ্যানিমেশন
প্রথম ইমপ্রেশন স্টিক। আপনার বিষয়বস্তু শুধু প্রদর্শিত হতে দেওয়ার পরিবর্তে, এটি পৌঁছান। দ্য প্রবেশ অ্যানিমেশন এক্সটেনশন যেকোন এলিমেন্টর এলিমেন্টে গতি যোগ করে যে মুহূর্তে এটি ভিউতে স্ক্রোল করে 70+ প্রভাব থেকে বাছাই করতে: ফেইড, স্লাইড, বাউন্স, ফ্লিপ এবং জুম। আপনি গতি, বিলম্ব এবং সহজীকরণ সেট করেছেন, যাতে একটি শিরোনাম আলতোভাবে প্রবাহিত হতে পারে যখন একের পর এক বৈশিষ্ট্য আইকনগুলির একটি সারি পপ হয়৷ কোন CSS নেই, কোন কীফ্রেম নেই, উন্নত ট্যাবে মাত্র কয়েকটি সেটিংস।
এটি ভালভাবে ব্যবহার করুন এবং একটি প্রবেশদ্বার অ্যানিমেশন পৃষ্ঠার নীচে চোখ টেনে আনে এবং প্রথম স্ক্রলে সাইটটিকে জীবন্ত অনুভব করে। সবকিছুতে এটি ব্যবহার করুন এবং এটি শব্দে পরিণত হয়। নীচের ভিডিওটি মৌলিক বিষয়গুলিকে কভার করে, এবং আরও নীচে আমি সম্পূর্ণ প্রভাব তালিকায় প্রবেশ করি, কীভাবে একটি সম্পূর্ণ বিভাগে একটি অ্যানিমেশন প্রয়োগ করতে হয় এবং কীভাবে সঠিক সময় পেতে হয়।
একটি প্রবেশ অ্যানিমেশন কি?
একটি প্রবেশদ্বার অ্যানিমেশন হল একটি উপাদান যা স্ক্রিনে আসার সাথে সাথে তৈরি করে। ভিজিটর স্ক্রোল করে, একটি শিরোনাম বা চিত্র বা বোতাম ভিউপোর্টে আঘাত করে এবং এটি পুরো সময় সেখানে বসে থাকার পরিবর্তে বিবর্ণ, স্লাইড বা বাউন্স হয়ে যায়। আপনি তাদের প্রবেশদ্বার প্রভাব, স্ক্রোল অ্যানিমেশন, বা একটি ওয়েবসাইট এন্ট্রি অ্যানিমেশন নামে পরিচিত দেখতে পাবেন। প্রতিবার একই ধারণা: একটি স্ট্যাটিক পৃষ্ঠা যা আপনি এটির নিচে যাওয়ার সাথে সাথে প্রতিক্রিয়া শুরু করে।
আপনি সিএসএস অ্যানিমেশন দিয়ে এই সব নিজেই লিখতে পারেন। তারপর কীফ্রেমগুলি বজায় রাখার জন্য আপনার, এবং তাই প্রতিটি স্ক্রিনের আকারে প্রতিক্রিয়াশীল আচরণ। মাস্টার অ্যাডঅন অ্যানিমেশন টুলকিট এটিকে উপাদান সেটিংসে নিয়ে যায়, তাই আপনি একটি ড্রপডাউন থেকে একটি প্রভাব বেছে নিন এবং কোডটি এড়িয়ে যান।
70+ এন্ট্রান্স ইফেক্টের একটি লাইব্রেরি
70 টিরও বেশি প্রিসেট সহ, প্রায় কোনও বিভাগ চালু করার একটি উপযুক্ত উপায় রয়েছে। এটা শান্ত চান? বিবর্ণ। শক্তি চান? বাউন্স বা রাবার ব্যান্ড। আরো ইচ্ছাকৃত কিছু পরে? ফ্লিপ বা স্লাইড। এই স্প্রেডটি সহজ কারণ এটি আপনাকে বিভাগগুলিকে তাদের নিজস্ব চরিত্র দিতে দেয়: একটি মিশন স্টেটমেন্টের জন্য শান্ত এবং মসৃণ, বৈশিষ্ট্য সারির জন্য কিছুটা কৌতুকপূর্ণ।
- বিবর্ণ: ফেইড ইন, ফেইড ইন আপ, ফেইড ইন ডাউন এবং বাকিটা শান্ত আগমনের জন্য।
- স্লাইড: উপাদানগুলি বাম, ডান, উপরে বা নীচে থেকে গ্লাইড করে।
- বাউন্স: একটি বিভাগের জন্য বাউন্স এবং রাবার ব্যান্ড যা লক্ষ্য করা দরকার।
- ঘূর্ণন এবং ফ্লিপ: আপনি যখন একটু গভীরতা চান তখন ফ্লিপ করুন এবং ঘোরান।
- জুম এবং বিশেষ প্রভাব: জুম ইন, হালকা গতি, এবং নায়ক বা CTA-এর জন্য অন্যান্য স্ট্যান্ডআউট।
- কাজের সাথে প্রভাব মেলে: অ্যাকশনের আহ্বানে উচ্চস্বরে, বডি টেক্সটে নরম বিবর্ণ।
- আপনি প্রতিশ্রুতি আগে পূর্বরূপ: আপনি তালিকায় এটির উপর ঘোরাঘুরি করার সাথে সাথে সম্পাদক অ্যানিমেশনটি চালান।
সময়কাল, বিলম্ব, এবং নিয়ন্ত্রণ সহজ করা
টাইমিং হল যেখানে বেশিরভাগ অ্যানিমেশন জিতে বা হারিয়ে যায় এবং এটি একটি অন/অফ টগলের চেয়ে বেশি। সেট করুন সময়কাল মিলিসেকেন্ডে একটি পদক্ষেপ দ্রুত এবং চটকদার বা ধীর এবং টানা-আউট করতে। একটি যোগ করুন বিলম্ব তাই একের পর এক আইটেমের সারি একের পর এক আসে। একটি বাছাই সহজ করা বক্ররেখা যাতে একটি সমতল, রোবোটিক গতিতে স্লাইড করার পরিবর্তে একটি বাস্তব বস্তুর গতি বাড়ে এবং ধীর করে দেয়।
- গতি সেট করুন: 500ms দ্রুত বোধ করে, 1500ms শিথিল বোধ করে। যে একটি সংখ্যা পুরো মেজাজ পরিবর্তন।
- একটি ক্রম স্তব্ধ: একটি সারিতে প্রতিটি আইকনে একটি খাঁজ পর্যন্ত বিলম্বকে বাম্প করুন এবং তারা একে একে পপ করুন।
- সহজীকরণ চয়ন করুন: ইজ-আউট (দ্রুত শুরু, মৃদু স্টপ) বেশিরভাগ প্রবেশপথের জন্য স্বাভাবিক হিসাবে পড়ে। এটা আমি প্রথম জন্য পৌঁছানোর এক।
কিভাবে সমস্ত উপাদানের জন্য একটি ডিফল্ট এন্ট্রান্স অ্যানিমেশন সেট করবেন?
লোকেরা এটিকে অনেক জিজ্ঞাসা করে: আপনি কি এলিমেন্টরে একবারে একটি প্রবেশদ্বার অ্যানিমেশন প্রয়োগ করতে পারেন? সোজা উত্তর, এলিমেন্টর কোরের কোনো একক গ্লোবাল সুইচ নেই যা সাইটের প্রতিটি উপাদানকে অ্যানিমেট করে। অনুশীলনে যা কাজ করে তা হল কন্টেইনার বা বিভাগ স্তরে অ্যানিমেট করা, তারপর সেই সেটিংস পুনরায় ব্যবহার করা।
- নির্বাচন করুন বিভাগ বা ধারক এর ভিতরে প্রতিটি উইজেটের পরিবর্তে। খোলা উন্নত → মাস্টার অ্যাডনস এন্ট্রান্স অ্যানিমেশন এবং আপনার প্রভাব চয়ন করুন। পুরো ব্লকটি স্ক্রোল করার সাথে সাথে একসাথে আসে।
- একই গতি পুনরায় ব্যবহার করতে, উপাদানটিতে ডান-ক্লিক করুন, আঘাত করুন কপি, তারপর পেস্ট শৈলী পরবর্তী বিভাগে। অ্যানিমেশন সেটিংস শৈলীর সাথে রাইড করে, তাই আপনি এটি একবার সেট করুন এবং পৃষ্ঠায় পেস্ট করুন।
- একটি ক্যাসকেডের জন্য সবকিছু একসাথে গুলি করার পরিবর্তে, প্রভাব একই রাখুন এবং বাড়ান বিলম্ব আপনি নিচে যেতে প্রতিটি বিভাগে একটু।
এটি আপনাকে কোড স্পর্শ না করেই আপনার সমস্ত উপাদান জুড়ে একটি সামঞ্জস্যপূর্ণ প্রবেশদ্বার অ্যানিমেশন পায়, যা এলিমেন্টর আপনাকে দেওয়ার মতো ডিফল্টের কাছাকাছি। সম্পূর্ণ প্রবেশদ্বার অ্যানিমেশন ডকুমেন্টেশন প্রতিটি সেটিং কভার করে।
কোথায় প্রবেশ অ্যানিমেশন সবচেয়ে সাহায্য?
- হিরো বিভাগ: শিরোনামে একটি ফেইড ইন আপ, তারপর এটির নীচে বোতামে একটি ছোট বিলম্ব।
- বৈশিষ্ট্য সারি: আইকনগুলিকে স্তব্ধ করুন যাতে তারা একে একে অবতরণ করে।
- পরিসংখ্যান এবং কাউন্টার: সংখ্যাগুলি দেখার জন্য স্ক্রোল করার সাথে সাথে একটি জুম ইন করুন৷।
- প্রশংসাপত্র এবং লোগো: একটি নরম বিবর্ণ যাতে তারা হঠাৎ স্ন্যাপ না করে।
- কর্মের আহ্বান: একটি বাউন্স বা রাবার ব্যান্ড যেখানে কেউ সিদ্ধান্ত নেয়।
এক্সটেনশনটি প্রশস্তের সাথে আসে মাস্টার অ্যাডঅন উইজেট এবং এক্সটেনশন. দ্য মূল্য পৃষ্ঠা এটি কোন পরিকল্পনায় অবতরণ করে তা দেখায়।
এন্ট্রান্স অ্যানিমেশনের জন্য প্রায়শই জিজ্ঞাসিত প্রশ্ন
অনেক প্রবেশ অ্যানিমেশন কি আমার ওয়েবসাইটকে ধীর করে দেবে?
কয়েক ডজন অ্যানিমেটেড উপাদান সহ একটি পৃষ্ঠায় এটি কিছু ওজন যোগ করতে পারে, তবে প্রভাবগুলি শুরুতে হালকা। আসল সমাধান হল সংযম: মূল বিভাগ এবং শিরোনাম অ্যানিমেট করুন, প্রতিটি অনুচ্ছেদ নয়। কিছু ভাল স্থাপন করা সবে নিবন্ধন। লোড সময় আপনার মনে হয়, এই এলিমেন্টর সাইটের গতি বাড়ানোর টিপস সাহায্য করা।
কেন আমার Elementor প্রবেশদ্বার অ্যানিমেশন কাজ করছে না?
এটি সাধারণত তিনটি জিনিসের মধ্যে একটি। উপাদানটি ভিউপোর্টে প্রবেশ করার সময় অ্যানিমেশনটি শুধুমাত্র প্রথমবার ফায়ার করে, তাই ব্যাক আপ স্ক্রোল করার পরিবর্তে এটি পরীক্ষা করার জন্য তাজা নিচে স্ক্রোল করুন। নিশ্চিত করুন যে প্রভাবটি প্রকৃত উপাদানের উপর রয়েছে এবং এটির চারপাশে একটি খালি মোড়ক নয়। এবং আপনি প্রকাশ করার পরে আপনার ক্যাশিং প্লাগইনটি সাফ করুন, যেহেতু একটি ক্যাশে করা পৃষ্ঠা অ্যানিমেশন ছাড়াই পুরানো সংস্করণটি পরিবেশন করবে।
আমি কি ডেস্কটপ এবং মোবাইলে বিভিন্ন অ্যানিমেশন ব্যবহার করতে পারি?
না। আপনি Elementor-এ ডেস্কটপ, ট্যাবলেট এবং মোবাইলের জন্য স্বাধীনভাবে অ্যানিমেশন সেট করতে পারবেন না। আপনি যে প্রভাবটি চয়ন করুন তা প্রতিটি ব্রেকপয়েন্টে প্রযোজ্য, তাই এমন একটি বেছে নিন যা এখনও একটি ছোট স্ক্রিনে সঠিক দেখায়।
ইজিং সেটিং কি এবং কোনটি আমার ব্যবহার করা উচিত?
সহজীকরণ গতির গতি নিয়ন্ত্রণ করে। লিনিয়ার একটি ধ্রুবক গতি ধারণ করে এবং রোবোটিক অনুভব করতে পারে। ইজ-আউট দ্রুত শুরু হয় এবং ধীরে ধীরে শেষ হয়, যেমন একটি মৃদু স্টপে ঘূর্ণায়মান কিছু, যা স্বাভাবিক মনে হয়। ইজ-ইন বিপরীত করে। বেশিরভাগ প্রবেশদ্বার অ্যানিমেশনের জন্য, ইজ-আউটের সাথে যান।
ট্রেন্ডিং এলিমেন্টর উইজেট এবং এক্সটেনশন
কম সময়ে অত্যাধুনিক ওয়েবসাইট তৈরি করুন।
গ্লাসমরফিজম
ধারক অতিরিক্ত
নিদর্শন
পোস্ট/পেজ ডুপ্লিকেটর
