প্যারালাক্স হল এমন একটি প্রভাব যেখানে একটি পৃষ্ঠার বিভিন্ন অংশ বিভিন্ন গতিতে স্ক্রোল করে, তাই পটভূমিটি অগ্রভাগের চেয়ে ধীর গতিতে চলে যায় এবং বিভাগটি গভীরতার অনুভূতি গ্রহণ করে। দ্য রিলাক্স এক্সটেনশন মধ্যে মাস্টার অ্যাডনস প্রো যে যোগ এলিমেন্টর প্যারালাক্স স্ক্রলিং জাভাস্ক্রিপ্টের একটি লাইন স্পর্শ না করে Rellax।js লাইব্রেরি ব্যবহার করে একটি চিত্র বা শিরোনামের মতো উইজেটগুলিতে প্রভাব৷ এটি গতি, চলাচলের শতাংশ, z-সূচক এবং দিকনির্দেশের নিয়ন্ত্রণ সহ উপাদানের উন্নত ট্যাবে একটি বিভাগ হিসাবে দেখায়।
এখানে Rellax কোথায় থাকে, প্রতিটি সেটিং কী করে এবং পৃষ্ঠাটি লাইভ হয়ে গেলে প্রভাবটি কেমন দেখায়।
Rellax এক্সটেনশন কি করে #
Rellax একটি স্ক্রোল-ভিত্তিক অ্যানিমেশন পিন করে যেটি আপনি নির্বাচন করুন। ভিজিটর স্ক্রোল করার সাথে সাথে, আপনার সেট করা গতির উপর নির্ভর করে সেই উপাদানটি পৃষ্ঠার বাকি অংশের তুলনায় দ্রুত বা ধীর গতিতে চলে। এটি একটি হিরো ইমেজ এবং ব্যাকগ্রাউন্ড গ্লাইড এ নির্দেশ করুন; এটি একটি শিরোনামের দিকে নির্দেশ করুন এবং পাঠ্যটি তার চারপাশের সবকিছুর আগে ভাসতে থাকে। যেহেতু এটি উপাদান প্রতি কাজ করে, আপনি একই বিভাগে কয়েকটি ভিন্ন গতি মিশ্রিত করতে পারেন এবং একটি ডেডিকেটেড প্যারালাক্স প্লাগইন ছাড়াই একটি স্তরযুক্ত স্ক্রোল তৈরি করতে পারেন।
এটিকে অন্য দুটি মাস্টার অ্যাডনস মোশন টুলের স্ক্রোল-ভিত্তিক কাজিন হিসাবে ভাবুন: ভাসমান প্রভাব, যা কোনো স্ক্রলিং ছাড়াই একটি উপাদানকে নিজে থেকে অ্যানিমেট করে, এবং রূপান্তরিত করে, যা ঘোরানো, স্কেল এবং তির্যক পরিচালনা করে।
আপনি শুরু করার আগে #
- ওয়ার্ডপ্রেস সঙ্গে এলিমেন্টর ইনস্টল এবং সক্রিয়।
- মাস্টার অ্যাডনস প্রো একটি সক্রিয় লাইসেন্স সহ ইনস্টল করা হয়েছে, যেহেতু Rellax একটি প্রো এক্সটেনশন। আপনি যদি এটি এখনও ইনস্টল না করে থাকেন তবে অনুসরণ করুন ইনস্টলেশন গাইড.
- মাস্টার অ্যাডঅন অপশন প্যানেলে Rellax এক্সটেনশন সক্রিয় করা হয়েছে।
- অ্যানিমেট করার জন্য একটি উইজেট, যেমন একটি চিত্র, একটি আইকন বা একটি৷ গ্রেডিয়েন্ট হেডলাইন। Rellax পুরো উইজেটটি সরিয়ে দেয়, একটি বিভাগের পটভূমি চিত্র নয়।
এলিমেন্টরে প্যারালাক্স প্রভাব কীভাবে যুক্ত করবেন #
আপনি সরাতে চান উপাদান নির্বাচন করুন। খুলুন উন্নত এলিমেন্টর প্যানেলে ট্যাব করুন এবং নিচে স্ক্রোল করুন রেলাক্স বিভাগ (এটি বেগুনি মাস্টার অ্যাডঅন ব্যাজ বহন করে)। এটি প্রসারিত করুন এবং উল্টান Rellax সক্ষম প্রতি হ্যাঁ। সেই টগলটি পুরো প্রভাবের জন্য সুইচ, তাই এটি চালু না হওয়া পর্যন্ত কিছুই ঘটে না।
একটি জিনিস যা লোকেদের উপরে নিয়ে যায়: প্যারালাক্স শুধুমাত্র লাইভ পৃষ্ঠায় বা প্রিভিউতে চলে, আপনি ক্যানভাসে সম্পাদনা করার সময় কখনই নয়। তাই উপাদানটি সম্পাদকের ভিতরে যাওয়ার জন্য অপেক্ষা করবেন না, এটি দেখতে পূর্বরূপ টিপুন।
Rellax সেটিংস ব্যাখ্যা করা হয়েছে #
সক্রিয় Rellax চালু থাকলে, বাকি নিয়ন্ত্রণগুলি উপাদানটি কীভাবে ভ্রমণ করে তা আকার দেয়:
- গতি: স্ক্রলের সাপেক্ষে উপাদানটি কত দ্রুত চলে। উচ্চতর ধনাত্মক সংখ্যাগুলি এটিকে দ্রুত উপরে নিয়ে যায় যখন আপনি নীচে স্ক্রোল করেন; নেতিবাচক সংখ্যা এটিকে অন্যভাবে ঠেলে দেয়। ডেমো ব্যবহার করে 6। 4 থেকে 6 এর কাছাকাছি শুরু করুন এবং সেখান থেকে সামঞ্জস্য করুন, যেহেতু বড় মানগুলি একটি উপাদানকে তার বিভাগ থেকে পরিষ্কার করতে পারে।
- শতাংশ: অ্যানিমেশনের সূচনা বিন্দু, 0 থেকে 1 পর্যন্ত, উপাদানটি ভিউপোর্টে কোথায় বসে তার উপর ভিত্তি করে। ডেমো এটি সেট করে 0.4। যখন প্রভাব খুব তাড়াতাড়ি বা খুব দেরিতে শুরু হয় তখন এটিকে নাজ করুন।
- জেড-সূচক: স্ট্যাকিং অর্ডার, CSS z-সূচকের মতো একই ধারণা। এটি বাড়ান (ডেমো ব্যবহার করে 3) যখন একটি প্যারালাক্স উপাদান একটি প্রতিবেশীর উপরে বা নীচে বসতে হয় তখন এটি মধ্য-স্ক্রোলকে ওভারল্যাপ করে।
- উল্লম্ব: পৃষ্ঠা স্ক্রোল করার সাথে সাথে উপাদানটিকে উপরে এবং নীচে সরান। এটি স্বাভাবিক প্যারালাক্স দিক।
- অনুভূমিক: পরিবর্তে উপাদানটি বাম এবং ডানে সরান। আপনি পাশ থেকে স্লাইড করতে চান এমন উপাদানগুলির জন্য সহজ।
গতি এবং শতাংশ উভয়েরই পাশে প্রতিক্রিয়াশীল আইকন রয়েছে, তাই আপনি ডেস্কটপ, ট্যাবলেট এবং মোবাইলের জন্য বিভিন্ন মান সেট করতে পারেন। এটি শোনার চেয়ে বেশি গুরুত্বপূর্ণ। একটি প্রশস্ত ডেস্কটপে দুর্দান্ত দেখায় এমন একটি গতি একটি ফোনে ঝাঁকুনি অনুভব করতে পারে, যেখানে স্ক্রীনটি ছোট এবং উপাদানটি একটি ছোট জায়গায় অনেক জায়গা জুড়ে থাকে। মোবাইলের গতি কম ডায়াল করা সাধারণত ফিক্স।
লাইভ পৃষ্ঠায় প্যারালাক্স প্রভাব দেখুন #
পৃষ্ঠাটি প্রকাশ করুন (বা পূর্বরূপ খুলুন) এবং স্ক্রোল করুন। আপনি যে উপাদানটি Rellax কে তার নিজস্ব গতিতে চালনা করতে সক্ষম করেছেন যখন বাকি পৃষ্ঠাটি স্বাভাবিকভাবে স্ক্রোল করে এবং সেই গতির পার্থক্যই গভীরতা বিক্রি করে। এখানে ডেমো হিরো, একটি প্যারালাক্স ইমেজ সহ একটি "স্ক্রোল UP”" শিরোনামের বিপরীতে স্ক্রোল করা হচ্ছে:
যদি আন্দোলনটি খুব শক্তিশালী বা খুব সূক্ষ্ম মনে হয়, তবে গতি নিয়ন্ত্রণে ফিরে যান এবং এটিকে পরিবর্তন করুন। প্যারালাক্স সেই প্রভাবগুলির মধ্যে একটি যেখানে একটি ছোট সংখ্যা সাধারণত একটি বড় সংখ্যার চেয়ে ভাল পড়ে।
সাধারণ ব্যবহারের ক্ষেত্রে #
- নায়কের ছবি: একটি ল্যান্ডিং-পেজ হিরোতে একটি ইমেজ উইজেট দিন যাতে কেউ স্ক্রোল করার মুহুর্তে বিভাগটি জীবন্ত বোধ করে।
- ভাসমান শিরোনাম: একটি শিরোনামে Rellax রাখুন যাতে এটি নীচের বিষয়বস্তুর থেকে এগিয়ে যায়।
- স্তরযুক্ত বিভাগ: একটি স্ট্যাক করা, বহু-গভীর স্ক্রলের জন্য একই বিভাগে দুটি বা তিনটি উপাদানকে বিভিন্ন গতিতে সেট করুন।
- বৈশিষ্ট্য কলআউট: ভিজিটর পৌঁছানোর সাথে সাথে অনুভূমিকভাবে একটি আইকন বা ব্যাজ স্লাইড করুন।
- গল্প বলার পাতা: একটি দীর্ঘ স্ক্রোল সমতল বোধ থেকে রক্ষা করতে ব্লকগুলির মধ্যে মৃদু প্যারালাক্স ব্যবহার করুন।
গতির জন্য যা স্ক্রলিংয়ের সাথে আবদ্ধ নয়, রেলাক্সের সাথে যুক্ত করুন প্রবেশ অ্যানিমেশন সুতরাং উপাদানগুলি উপস্থিত হওয়ার সাথে সাথে অ্যানিমেট করে, তারপর স্ক্রোলটি চলতে থাকলে প্যারালাক্সের সাথে চলতে থাকে। সম্পূর্ণ ব্রাউজ করুন উইজেট এবং এক্সটেনশন মোশন টুলকিটের বাকি অংশ দেখতে তালিকা করুন।
ভিডিও টিউটোরিয়াল #
দেখতে পছন্দ করেন? এই ভিডিওটি Rellax এক্সটেনশনের শেষ থেকে শেষ পর্যন্ত চলে, এটিকে একটি উপাদানে সক্ষম করা থেকে লাইভ পৃষ্ঠায় প্যারালাক্স স্ক্রোল পর্যন্ত:
প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী #
আমি কিভাবে এলিমেন্টরে প্যারালাক্স স্ক্রলিং প্রভাব যোগ করব?
একটি উপাদান নির্বাচন করুন, উন্নত ট্যাব খুলুন, মাস্টার অ্যাডঅন রিলাক্স বিভাগটি প্রসারিত করুন এবং সক্ষম রেলাক্সকে হ্যাঁ সেট করুন। তারপর গতি এবং শতাংশ সেট করুন। উপাদানটি লাইভ পৃষ্ঠায় তার নিজস্ব গতিতে স্ক্রোল করে, কোন কোডের প্রয়োজন নেই।
কেন আমি এলিমেন্টর এডিটরে প্যারালাক্স প্রভাব দেখতে পাচ্ছি না?
Rellax শুধুমাত্র সামনের প্রান্তে চলে। আপনি ক্যানভাসে সম্পাদনা করার সময় উপাদানটি স্থির থাকে, তাই প্রিভিউ খুলুন বা প্যারালাক্স গতি দেখতে প্রকাশিত পৃষ্ঠাটি দেখুন।
রিলাক্সে স্পিড সেটিং কী করে?
পৃষ্ঠা স্ক্রলের তুলনায় উপাদানটি কত দ্রুত চলে তা গতি নিয়ন্ত্রণ করে। উচ্চতর ইতিবাচক মানগুলি আপনি নীচে স্ক্রোল করার সাথে সাথে এটিকে দ্রুত উপরে নিয়ে যায় এবং নেতিবাচক মানগুলি দিকটিকে বিপরীত করে। 4 থেকে 6 এর কাছাকাছি মানগুলি বেশিরভাগ হিরো বিভাগের জন্য ভাল কাজ করে।
আমি কি মোবাইলে একটি ভিন্ন প্যারালাক্স গতি ব্যবহার করতে পারি?
হ্যাঁ। গতি এবং শতাংশ নিয়ন্ত্রণগুলি প্রতিক্রিয়াশীল, তাই আপনি ডেস্কটপ, ট্যাবলেট এবং মোবাইলের জন্য পৃথক মান সেট করতে পারেন। মোবাইলে গতি কমানো প্রভাবকে ছোট পর্দায় খুব বেশি আক্রমণাত্মক বোধ করা থেকে বিরত রাখে।
Rellax এক্সটেনশন কি আমার সাইটের গতি কমিয়ে দেয়?
Rellax প্রতি উপাদানে একটি স্ক্রোল-ভিত্তিক অ্যানিমেশন চালায়, তাই প্রভাব ছোট থাকে। পৃষ্ঠার প্রতিটি ব্লকের পরিবর্তে শুধুমাত্র যে উপাদানগুলির প্রয়োজন সেখানে এটি প্রয়োগ করুন এবং জিনিসগুলি মসৃণ থাকে৷।
মোড়ানো #
Rellax এক্সটেনশন হল একটি যোগ করার দ্রুততম উপায় এলিমেন্টর প্যারালাক্স স্ক্রলিং একটি পৃথক প্লাগইন বা কাস্টম কোড ছাড়া প্রভাব। যেকোনো উপাদানে এটি সক্ষম করুন, গতি, শতাংশ, z-সূচক এবং দিকনির্দেশ সেট করুন এবং উপাদানটি লাইভ পৃষ্ঠায় প্রকৃত গভীরতার সাথে স্ক্রোল করে। স্ক্রিনের চারপাশে জিনিসগুলি সরানোর আরও উপায়ের জন্য, একবার দেখুন রূপান্তরিত করে এবং ভাসমান প্রভাব, এবং দেখুন Rellax প্যারালাক্স এক্সটেনশন পৃষ্ঠা এলিমেন্টর প্রো মোশন ইফেক্টের সাথে তুলনা করার জন্য।
