কী টেকঅ্যাওয়ে
- স্টক এডিটরে এলিমেন্টর স্ক্রোল ইফেক্ট হল অ্যাডভান্সড > মোশন ইফেক্টস > স্ক্রলিং ইফেক্টস (উল্লম্ব স্ক্রোল, অনুভূমিক স্ক্রোল, স্বচ্ছতা, ব্লার, রোটেট এবং স্কেল) এর অধীনে ছয়টি নিয়ন্ত্রণ এবং প্রতিটি একটি একক উপাদান নিয়ে যায়।
- স্ক্রোলিং ইফেক্ট কন্ট্রোল হল একটি এলিমেন্টর প্রো বৈশিষ্ট্য, এবং ফ্রি এলিমেন্টর 4.3।2 প্লাগইনে সেগুলি থাকে না।
- এই পৃষ্ঠায় 16টি ইমেজ স্ক্রোল ইফেক্ট হল মাস্টার অ্যাডনস উইজেট বিল্ডার উইজেট যা একটি পূর্ণ-স্ক্রীন স্টেজ পিন করে এবং একটি 3D কিউব, একটি পৃষ্ঠা-বাঁকানো বই এবং একটি স্ট্যাকিং কার্ড ডেক সহ স্ক্রোল অবস্থানের বিপরীতে চিত্রগুলির একটি সম্পূর্ণ সেট অ্যানিমেট করে।
- 16টি স্ক্রোল উইজেটের প্রতিটির নিজস্ব জিপ ডাউনলোড রয়েছে যার মধ্যে একটি JSON ফাইল এবং একটি README রয়েছে এবং JSON মাস্টার অ্যাডনস > উইজেট বিল্ডার > আমদানি উইজেটের মাধ্যমে আমদানি করা হয়, যা শুধুমাত্র ।json ফাইল গ্রহণ করে।
- 16টি উইজেটের প্রতিটিতে একটি পছন্দ-হ্রাস-গতির নিয়ম রয়েছে, তাই যে দর্শকরা তাদের অপারেটিং সিস্টেমে গতি বন্ধ করে তারা অ্যানিমেশনের পরিবর্তে একটি স্থির বিন্যাস পায়৷।
এলিমেন্টর স্ক্রোল ইফেক্ট, যেহেতু বেশিরভাগ লোক তাদের সাথে দেখা করে, মোশন ইফেক্ট প্যানেলে স্ক্রলিং ইফেক্ট কন্ট্রোল: উল্লম্ব স্ক্রোল, অনুভূমিক স্ক্রোল, স্বচ্ছতা, ঝাপসা, ঘোরানো এবং স্কেল। প্রতিটি একটি একক চিত্র বা শিরোনাম ধাক্কা দেয় যখন পৃষ্ঠাটি সরে যায় এবং এটি যতদূর যায়। একটি কিউব ভিতরে ঘুরলে একটি বিভাগ পিন করা তাদের বাইরে।
এই পোস্টটি 16টি ইমেজ স্ক্রোল অ্যানিমেশন দেখায় যা সেই বড় স্কেলে কাজ করে। প্রতিটি একটি লাইভ ডেমো সহ মাস্টার অ্যাডনস উইজেট বিল্ডারের জন্য একটি রেডিমেড উইজেট যা আপনি কিছু ইনস্টল করার আগে খুলতে পারেন। নীচে আপনি প্রতিটি প্রভাব কী করে, এটি কোন ধরণের সাইটের জন্য উপযুক্ত, সেটটি কীভাবে আমদানি করতে হয় এবং গতি এবং অ্যাক্সেসযোগ্যতার জন্য কী পরীক্ষা করতে হয় তা পাবেন।
বিষয়বস্তুর সারণী
এলিমেন্টর স্ক্রোল প্রভাবগুলি নিজেরাই কী করতে পারে
এলিমেন্টরের নিজস্ব স্ক্রলিং প্রভাব ভিজিটর স্ক্রোল করার সাথে সাথে একটি উপাদানের একটি বৈশিষ্ট্য পরিবর্তন করে। আপনি একটি উইজেট বা ধারক নির্বাচন করুন, খুলুন উন্নত > মোশন ইফেক্ট, চালু কর স্ক্রোলিং প্রভাব, এবং ছয়টি বিকল্প থেকে বেছে নিন। Elementor এর গতি প্রভাব সাহায্য পৃষ্ঠা উল্লম্ব স্ক্রোল, অনুভূমিক স্ক্রোল, স্বচ্ছতা, অস্পষ্ট, ঘোরানো এবং স্কেল হিসাবে তাদের তালিকাভুক্ত করে।
এই নিয়ন্ত্রণগুলি Elementor Pro এর অন্তর্গত। আমরা বিনামূল্যে Elementor 4.3।2 প্লাগইন চেক করেছি এবং স্ক্রোলিং নিয়ন্ত্রণগুলি এতে নেই৷।
একটি স্ক্রলিং প্রভাব শুধুমাত্র তার নিজস্ব উপাদান এবং ভিউপোর্ট সম্পর্কে জানে। এটির ভিতরের বিষয়বস্তু পরিবর্তিত হওয়ার সময় একটি বিভাগকে জায়গায় রাখার কোন উপায় নেই এবং এটি দশটি চিত্রকে সমন্বয় করতে পারে না যাতে তারা ক্রমানুসারে পৌঁছায়। একটি হিরো ইমেজের প্যারালাক্স এইভাবে সেট আপ করা সহজ। একটি ফটো যা ধাঁধার টুকরো টুকরো হয়ে যায় এবং আপনি পড়ার সাথে সাথে পুনরায় একত্রিত হয় তার জন্য একটি কাস্টম উইজেট প্রয়োজন, যা এই পোস্টের বাকি অংশটি কভার করে।
যদি প্লেইন প্যারালাক্স আপনার প্রয়োজন হয়, রিলাক্স এক্সটেনশন মাস্টার অ্যাডনস এটি পরিচালনা করে, এবং আমাদের অ্যানিমেশন ওভারভিউ প্রবেশদ্বার এবং ভাসমান প্রভাব কভার করে।
এই উইজেটগুলি চালানোর জন্য আপনার যা দরকার
আপনার এলিমেন্টর, মাস্টার অ্যাডঅন এবং উইজেট বিল্ডার দরকার। এলিমেন্টরের দিকে ফ্রি এলিমেন্টর প্লাগইন যথেষ্ট, কারণ এই ডিজাইনগুলির কোনোটিই এলিমেন্টর প্রো উইজেট বা এর মোশন ইফেক্ট প্যানেল ব্যবহার করে না।
উইজেটগুলি আমদানি এবং সম্পাদনা করা হয় উইজেট নির্মাতা, যা একটি মাস্টার অ্যাডঅন প্রো বৈশিষ্ট্য। পরিকল্পনা আছে মূল্য পৃষ্ঠা। নীচের প্রতিটি ডিজাইনের লাইভ ডেমোর পাশে নিজস্ব ডাউনলোড লিঙ্ক রয়েছে এবং কোনও ইমেল গেট নেই৷।
আপনি আপনার নিজের ছবিও চাইবেন। ডেমোগুলি পাবলিক ডোমেন এবং খোলামেলা লাইসেন্সকৃত ফটোগ্রাফ ব্যবহার করে এবং প্রতিটি উইজেটে ইমেজ ক্ষেত্র বা একটি রিপিটার থাকে, তাই সেগুলি অদলবদল করতে কয়েক মিনিট সময় লাগে৷।
লাইভ ডেমো ইনস্টল করার কিছুই প্রয়োজন নেই। একটি খুলুন এবং এটিকে কয়েকটি উইন্ডো আকারে স্ক্রোল করুন, যা একটি গতি শৈলী আপনার সামগ্রীর সাথে খাপ খায় কিনা তা বলার দ্রুততম উপায়।
আপনার নিজের স্ক্রোল উইজেট তৈরি করতে চান? দ্য মাস্টার অ্যাডঅন উইজেট নির্মাতা HTML, CSS এবং JavaScript কে তার নিজস্ব বিষয়বস্তু এবং শৈলী নিয়ন্ত্রণ সহ একটি এলিমেন্টর উইজেটে পরিণত করে।
এলিমেন্টরের জন্য 16 ইমেজ স্ক্রোল প্রভাব
16টি ইমেজ স্ক্রোল ইফেক্ট পাঁচটি গ্রুপে বিভক্ত: পিন করা প্রকাশ, 3D অবজেক্ট, কার্ড ডেক, অন্তহীন গ্যালারী এবং সূচক বা দোকানের লেআউট। তাদের অধিকাংশই একই ভিত্তি ব্যবহার করে। উইজেটটি নিজেকে একটি লম্বা রানওয়ে দেয়, স্টিকি পজিশনিং সহ এটির ভিতরে একটি এক-স্ক্রীন স্টেজ পিন করে এবং অ্যানিমেশন চালানোর জন্য আপনি রানওয়ের মধ্য দিয়ে কতদূর স্ক্রোল করেছেন তা পড়ে। ব্যাক আপ স্ক্রোল করুন এবং সবকিছু বিপরীতে চলে।
পিন করা ছবি প্রকাশ করে
এই চারটি একটি ফ্রেম স্থির রাখে এবং এর ভিতরে যা আছে তা পরিবর্তন করে। এগুলি দীর্ঘ-ফর্মের পৃষ্ঠাগুলির জন্য উপযুক্ত যেখানে প্রতিটি ছবি একটি অনুচ্ছেদের সাথে আসে।
1। অ্যাপারচার সূচক
প্রতিটি এন্ট্রি একটি পাতলা অনুভূমিক ব্যান্ড হিসাবে শুরু হয় এবং একটি সম্পূর্ণ ফটোগ্রাফে খোলে যখন এটি স্ক্রিনের মাঝখানে পৌঁছায়, যেভাবে একটি পাতার শাটার খোলে। শিরোনামটি চিত্র জুড়ে বসে এবং এন্ট্রিগুলি পৃষ্ঠার নীচে বাম এবং ডানে বিকল্প হয়। ফ্রেমটি পিন করা থাকে যখন এর পাঠ্য স্ক্রোল হয়ে যায়, তারপর ছেড়ে দেয়।
এটি একটি অন্ধকার স্থল সহ স্ক্রলে প্রকাশিত একটি চিত্র, তাই এটি কালো রঙে রাতের ফটোগ্রাফি এবং পণ্যের শটগুলিকে চাটুকার করে৷ চার থেকে ছয়টি এন্ট্রি আরামদায়ক পরিসীমা।
2। শিঙ্গল ফ্রেম
একটি ফ্রেম ডানদিকে স্থির থাকে যখন অনুলিপিটি বাম দিকে স্ক্রোল করে। পাঠ্যের প্রতিটি নতুন ব্লক আসার সাথে সাথে এর ছবি একই ফ্রেমের ভিতরে আগেরটির উপর স্লাইড করে, যেমন ছাদে শিঙ্গল। পৃষ্ঠার পটভূমি প্রতিটি ছবির সাথে রঙ পরিবর্তন করে।
রঙের পরিবর্তন পাঠককে বলে যে একটি নতুন অধ্যায় শুরু হয়েছে, তাই আপনি বিভাজক এবং উপ-শিরোনামগুলি বাদ দিতে পারেন। কেস স্টাডি এবং চার বা পাঁচটি আইটেম সহ ফিচার ট্যুরের জন্য এটি ব্যবহার করুন যা প্রতিটি অনুচ্ছেদের প্রাপ্য।
3। ডোভেটেল অধ্যায়
প্রতিটি অধ্যায়ে ইন্টারলকিং জিগস টুকরো করে কাটা একটি ছবি রয়েছে। তারা বিক্ষিপ্ত এবং ঘোরানো শুরু করে। স্ক্রলিং তাদের বাড়িতে নিয়ে যায়, এবং ছবি সম্পূর্ণ হয়ে গেলে ক্যাপশনটি প্রদর্শিত হয়।
প্রতিটি অংশের অবস্থান স্ক্রোল অফসেট থেকে গণনা করা হয়, তাই অ্যানিমেশন কখনই পাঠকের সামনে চলে না বা পিছিয়ে যায় না। এটি দুই থেকে চারটি বড় ছবি সহ গল্প বলার পৃষ্ঠাগুলির জন্য ভাল কাজ করে। আমি চার অতিক্রম করতে হবে না, কারণ কৌশল পাতলা পরেন।
4। ওয়েফট গ্রিড
সম্পূর্ণ রক্তপাতের সময় একটি ফটোগ্রাফে বিভাগটি খোলে। স্ক্রোল করুন, এবং এটি একটি তিন-কলামের গ্রিডে তার জায়গায় সঙ্কুচিত হয় যখন অন্যান্য ছবিগুলি এর চারপাশে উড়ে যায়। একটি শিরোনাম এবং একটি বোতামের জন্য জায়গা তৈরি করতে স্ক্রোল এবং সারি অংশ রাখুন।
এটি একটি দোকান বা স্টুডিও হোম পেজের জন্য একটি শক্তিশালী নায়ক, কারণ এটি একটি বড় ছবি থেকে সম্পূর্ণ সংগ্রহে একটি একক বিভাগে কল টু অ্যাকশনে চলে যায়। স্ট্যাটিক বিকল্পের জন্য, আমাদের দেখুন এলিমেন্টর হিরো সেকশন টেমপ্লেট.
3D স্ক্রোল প্রভাব
এই চারটি CSS 3D রূপান্তর এবং দৃষ্টিকোণ ব্যবহার করে এবং স্ক্রোল অবস্থান তাদের চালিত করে। আপনি যদি 3D চান যা একটি টাইমারে বাজায় বা তীরগুলিতে সাড়া দেয়, আমাদের গাইড এলিমেন্টর 3D ক্যারোজেল যে পাশ জুড়ে।
5। ফেসেট কিউব
একটি ঘনক্ষেত্রের ছয়টি মুখের উপর ছয়টি ছবি বসে। কিউবটি স্ক্রলের প্রতি প্রসারিত একটি মুখ ঘুরিয়ে দেয় যখন আপনি যে ফটোগ্রাফের মুখোমুখি হচ্ছেন তা পুরো পটভূমিতে ছড়িয়ে পড়ে। ডানদিকে থাম্বনেইলের একটি রেল দেখায় যে আপনি কোথায় আছেন এবং আপনাকে যেকোনো মুখে লাফ দিতে দেয়।
ছয় হল কঠিন সীমা, যেহেতু একটি ঘনক্ষেত্রের ছয়টি দিক রয়েছে। এটি একটি সংক্ষিপ্ত পোর্টফোলিও সেট বা একটি ছয়-পণ্য পরিসরের জন্য একটি ঝরঝরে ফিট করে তোলে।
6। অরবিট টিউব
ফটো কার্ডের রিংগুলি একটি উল্লম্ব অক্ষের চারপাশে দাঁড়িয়ে থাকে, একটি টিউব তৈরি করতে একটির উপরে স্তুপীকৃত হয়। আপনি এটিকে বাইরে থেকে দেখেন, তাই কাছের প্রাচীরটি স্ক্রীন জুড়ে বড় হয়ে যায় এবং দূরের প্রাচীরটি ফাঁক দিয়ে ছোট এবং আবছা দেখায়। একটি কাচের গ্লোব ডেমোতে অক্ষের উপর বসে, এবং উইজেটটি একটি কক্ষ, একটি পরমাণু, একটি রিংযুক্ত গ্রহ, একটি তারের ঘনক, একটি চিত্র বা একটি আইকন সহ অন্যান্য কেন্দ্রের বস্তুগুলি অফার করে৷।
এটি একটি টিউব হিসাবে পড়ার জন্য প্রচুর চিত্রের প্রয়োজন, তাই ষোল বা তার বেশি গ্যালারীগুলি মনে করুন।
7। ইজেল র্যাক
ইজেল র্যাক হল একটি স্ক্রোল গ্যালারি যা গভীরভাবে দাঁড়িয়ে আছে। প্রতিটি ছবি আপনার কাছ থেকে দূরে সরে যাওয়া একটি প্লেট যতক্ষণ না স্ক্রোলটি এটিকে স্ক্রিনের মাঝখানে নিয়ে আসে, যেখানে এটি আপনার মুখোমুখি হওয়ার জন্য বৃত্তাকারভাবে দুলছে। ক্যাপশনগুলি প্লেটের পাশে বসে এবং আইটেমগুলি বাম এবং ডানে জিগজ্যাগ করে।
ডেমোটি একটি মৃৎশিল্প স্টুডিওর ছয়টি ধাপের মধ্য দিয়ে চলে এবং এটি এটির জন্য প্রাকৃতিক ব্যবহার: প্রক্রিয়া পদক্ষেপ বা পরিষেবাগুলির একটি সংখ্যাযুক্ত তালিকা৷।
8. Quire বই
আপনি স্ক্রোল করার সাথে সাথে একটি বন্ধ বই খোলে, তারপরে একবারে একটি পৃষ্ঠা ঘুরিয়ে দেয়। প্রতিটি শীট উভয় পাশে মুদ্রিত হয় এবং মেরুদণ্ডে পিভট হয়, তাই আপনি একটি পৃষ্ঠার পিছনে দেখতে পান যখন এটি চলে যায়। স্ক্রোল করুন এবং বইটি আবার বন্ধ হয়ে যায়।
ডেমো হল একটি রেস্তোরাঁর মেনু যার বাম পৃষ্ঠায় একটি ফটোগ্রাফ এবং ডানদিকে খাবার রয়েছে৷ এটি লুকবুক এবং ব্রোশারের জন্যও উপযুক্ত। জাভাস্ক্রিপ্ট বন্ধ থাকলে, পৃষ্ঠাগুলি পড়ার ক্রমে একটি সাধারণ কলামে ফিরে আসে, তাই সার্চ ইঞ্জিন বা স্ক্রিন রিডার থেকে কিছুই লুকানো থাকে না।
কার্ড ডেক
9। রাইফেল ডেক
এটি স্ক্রোল প্যাটার্নে স্ট্যাকিং কার্ড, পোর্ট্রেট কার্ড দিয়ে করা হয়। প্রতিটি স্ক্রোল ধাপ একটি সামান্য কোণে গাদা উপরে পরবর্তী কার্ড রাখা। পটভূমির রঙ প্রতিটি কার্ডের সাথে মেলে এবং সেটের মাধ্যমে একটি ছোট অগ্রগতি বার গণনা করা হয়।
পোর্ট্রেট ছবি সবচেয়ে ভালো কাজ করে: পোস্টার, বইয়ের কভার, প্যাকেজিং, অ্যাপ স্ক্রিন। ছয় থেকে আটটি কার্ড প্রায় সঠিক।
10। শ্যাটার ডেক
শ্যাটার ডেক হল ফটোগ্রাফের একটি পূর্ণ-ফ্রেমের ডেক, প্রতিটিতে একটি ক্যাপশন এবং একটি বোতাম এবং দুটি তীর রয়েছে যা তাদের মধ্য দিয়ে যেতে পারে। চিত্রগুলির মধ্যে সরানো ছবিটিকে ছোট টাইলসের একটি গ্রিডে কেটে দেয়, সেগুলিকে ছড়িয়ে দেয় এবং পরবর্তী ফটোগ্রাফ হিসাবে সেগুলিকে একত্রিত করে৷।
ডেকের ফোকাস হয়ে গেলে আপনি তীর, একটি অনুভূমিক টেনে বা তীর কীগুলির সাহায্যে বাক্সের বাইরে যান। পৃষ্ঠাটি তার স্বাভাবিক উল্লম্ব স্ক্রোল রাখে। চালু কর স্ক্রাব করতে স্ক্রোল করুন নিয়ন্ত্রণ এবং স্ক্রোল পরিবর্তে রূপান্তর চালায়। কম গতি সক্ষম হলে, টাইলস উড়ে যাওয়া বন্ধ করে এবং ডেক ক্রস-বিবর্ণ হয়ে যায়।
অন্তহীন স্ক্রোল গ্যালারী
এই তিনটি লুপ। কোন প্রথম বা শেষ ছবি নেই, যা পড়ার চেয়ে বেশি ব্রাউজ করা উপযুক্ত।
11। সেলুন হ্যাং
স্যালন হ্যাং হল একটি প্রাচীর যার উপরে এবং নীচে নেই। ছবিগুলি একটি কলামে ঝুলে থাকে, কেন্দ্রের বাম এবং ডানদিকে বিভিন্ন পরিমাণে ধাক্কা দেয় এবং বিভিন্ন প্রস্থে কাটা হয়, যেভাবে একটি সেলুন ঝুলে থাকে একটি গ্যালারির দেয়ালে ভিড় করে। শেষ ছবির পর আবার প্রথম আসে। একটি ছবিতে ক্লিক করুন এবং এটি একটি ক্যাপশন এবং একটি পিছনের বোতাম সহ তার নিজস্ব পৃষ্ঠায় বৃদ্ধি পায়।
ফটোগ্রাফি পোর্টফোলিওগুলির জন্য এটি ব্যবহার করুন যেখানে অর্ডার কোন ব্যাপার না এবং প্রতিটি চিত্র একটি ঘনিষ্ঠ চেহারা প্রাপ্য।
12। ফিলামেন্ট থ্রেড
ফটোগ্রাফ ডাকটিকিট আকার একটি বন্ধ থ্রেড বরাবর strung হয় যে পর্দা জুড়ে বাতাস। আপনি স্ক্রোল করে থ্রেড বরাবর ভ্রমণ। এটি মঞ্চের মাঝখান দিয়ে যেখানেই যায়, ছবিগুলি এমনভাবে ফুলে যায় যেন একটি লুপের নীচে, এবং একটি ক্যাপশন সামনের একটির নাম দেয়। এটি খুলতে একটি ফটোগ্রাফ ক্লিক করুন।
বড় আর্কাইভের জন্য এটি ষোলটির মধ্যে সেরা, কারণ ছোট থাম্বনেইল মানে অনেক ছবি একবারে স্ক্রিনে ফিট করে। জাভাস্ক্রিপ্ট ছাড়া উইজেট প্রতিটি ফটোগ্রাফকে প্লেইন গ্রিডে দেখায়।
13। রিল পোর্ট্রেট
রিল পোর্ট্রেট একটি লুপে একবারে পূর্ণ-স্ক্রীন প্রতিকৃতি দেখায়। প্রতিটি একটি একক শব্দ বহন করে যা এটি জুড়ে খুব বড় সেট করে, একটি বাঁক ড্রামের মতো একটি বক্ররেখা বরাবর পাশ দিয়ে চলে, একটি হাতে লেখা লাইন এটিকে অন্যভাবে অতিক্রম করে। ফটোগ্রাফটি টাইপের পিছনে একটি প্যারালাক্স ড্রিফটের সাথে চলে এবং একটি সংখ্যাযুক্ত সূচক বাম দিকে নীচে বসে।
এটি ষোলটির মধ্যে সবচেয়ে জোরে ডিজাইন, এবং এটি ফ্যাশন এবং সম্পাদকীয় সাইটগুলির জন্য উপযুক্ত। এটিকে পাঁচ বা ছয়টি শক্তিশালী ছবি এবং একটি করে শব্দ দিন।
সূচী এবং দোকান লেআউট
14। বেলোস সূচক
Bellows Index এক সময়ে একটি এন্ট্রি কাজের একটি অংশ দেখায়। প্রতিটিতে একটি বড় শিরোনাম, একই ছবির দুটি ওভারল্যাপিং প্লেট এবং একটি ক্যাপশন রয়েছে এবং প্রতিটি এন্ট্রির জন্য পুরো পৃষ্ঠাটি একটি নতুন রঙ নেয়। শিরোনামটি একটি পরিবর্তনশীল ফন্টে সেট করা হয়েছে, এবং উইজেটটি তার প্রস্থ অক্ষের উপর স্ক্রোল চাপ লেখে, তাই আপনি সরানোর সাথে সাথে শব্দটি প্রসারিত এবং স্থির হয়।
এটি চার থেকে আটটি এন্ট্রি সহ সেরা পড়ে। একটি প্রদর্শনী বা বৈশিষ্ট্যযুক্ত প্রকল্পের একটি সেটের জন্য এটি চেষ্টা করুন।
15। জোয়ার সূচক
জোয়ার সূচকের দুটি কলাম রয়েছে যা একে অপরের বিরুদ্ধে চলে। শিরোনাম বাম দিকে এবং যারা তাদের ডানদিকে তৈরি করেছে। আপনি স্ক্রোল করার সাথে সাথে, প্রতিটি লাইন একটি তরঙ্গের উপর পাশে স্লাইড করে, বাম কলামটি একদিকে এবং ডানদিকে তার আয়না, যখন বর্তমান সারির জন্য একটি ফটোগ্রাফ তাদের মধ্যে বসে।
এটি একটি টাইপ দ্বারা পরিচালিত হয়, একটি সহায়ক ভূমিকায় চিত্র সহ। এটি ক্রেডিট তালিকা এবং দীর্ঘ প্রকল্প সূচকের জন্য উপযুক্ত।
16। সোয়াচ শপ
সোয়াচ শপ হল পণ্যের ফটোগ্রাফের একটি করিডোর যা আপনি স্ক্রোল করে নিচে চলে যান। একটি পণ্য সামনে থাকাকালীন, পুরো ঘরটি তার রঙ নেয় এবং এর পাশে একটি কার্ড নাম, একটি সংক্ষিপ্ত বিবরণ, মূল্য, আকারের বিকল্প এবং একটি বোতাম দেখায়। ডানদিকে রঙের বিন্দুর একটি কলাম আপনার জায়গা চিহ্নিত করে।
এটি ছোট ক্যাটালগের জন্য নির্মিত: ফুল বিক্রেতা, সিরামিক, মোমবাতি, প্রিন্ট। সাতটি পণ্য ডেমো পূরণ করে।
এক নজরে সমস্ত 16 স্ক্রোল প্রভাব
আপনার কাছে থাকা বিষয়বস্তুর সাথে একটি স্ক্রোল প্রভাব মেলাতে এই টেবিলটি ব্যবহার করুন। লেআউট আরামদায়কভাবে পরিচালনা করে আইটেম গণনা।
| উইজেট | স্ক্রোল প্রভাব | জন্য সেরা | আইটেম |
|---|---|---|---|
| অ্যাপারচার সূচক | এটি দৃশ্যে প্রবেশ করার সাথে সাথে একটি ব্যান্ড থেকে চিত্রটি খোলে | অন্ধকার ছবির প্রবন্ধ | 4 থেকে 6 |
| শিঙ্গল ফ্রেম | ছবি একটি নির্দিষ্ট ফ্রেমে ওভারল্যাপ, পৃষ্ঠার রঙ পরিবর্তন | কেস স্টাডি, ফিচার ট্যুর | 4 থেকে 5 |
| Dovetail অধ্যায় | জিগস টুকরা একত্রিত | গল্প বলার পাতা | 2 থেকে 4 |
| ওয়েফট গ্রিড | ফুল-ব্লিড ফটো একটি তিন-কলামের গ্রিডে পরিণত হয় | হোম পেজ হিরোস | 12 |
| ফ্যাসেট কিউব | 3D কিউব প্রতি স্ক্রোল ধাপে একটি মুখ ঘুরিয়ে দেয় | সংক্ষিপ্ত পোর্টফোলিও | 6 |
| অরবিট টিউব | কার্ডের রিংগুলি একটি অক্ষের চারপাশে ঘোরে | বড় গ্যালারি | 16 বা তার বেশি |
| ইজেল র্যাক | প্লেট পাঠকের মুখোমুখি দোল | প্রক্রিয়া পদক্ষেপ | 4 থেকে 8 |
| কুয়ার বই | বই খোলে আর পাতা উল্টে যায় | মেনু, লুকবুক | 3 থেকে 6 স্প্রেড |
| রাইফেল ডেক | স্ক্রলে কার্ড স্ট্যাক | পোস্টার, কভার, অ্যাপ স্ক্রিন | 6 থেকে 8 |
| শ্যাটার ডেক | ছবি টাইলস এবং পুনরায় ফর্ম মধ্যে বিরতি | সম্পূর্ণ-প্রস্থ স্লাইডার | 3 থেকে 6 |
| সেলুন হ্যাং | লুপিং ওয়াল, ছবি একটি পৃষ্ঠায় খোলা | ফটোগ্রাফি পোর্টফোলিও | 10 বা তার বেশি |
| ফিলামেন্ট থ্রেড | থাম্বনেল একটি সুতো বরাবর ভ্রমণ | সংরক্ষণাগার | 20 বা তার বেশি |
| রিল পোর্ট্রেট | বাঁকা টাইপ সহ পূর্ণ-স্ক্রীন প্রতিকৃতি | ফ্যাশন, সম্পাদকীয় | 5 থেকে 6 |
| বেলো সূচক | একবারে একটি এন্ট্রি, শিরোনাম স্ক্রলে প্রতিক্রিয়া দেখায় | প্রদর্শনী, সংগ্রহ | 4 থেকে 8 |
| জোয়ার সূচক | দুটি কলাম একটি তরঙ্গের উপর স্লাইড করে | ক্রেডিট, দীর্ঘ সূচক | 15 বা তার বেশি |
| সোয়াচ দোকান | পণ্য করিডোর, ঘরের রঙ পরিবর্তন | ছোট ক্যাটালগ | 5 থেকে 8 |
16টি স্ক্রোল প্রভাব উইজেট ডাউনলোড করুন
প্রতিটি উইজেট একটি পৃথক জিপ, তাই আপনি শুধুমাত্র যেগুলি ব্যবহার করার পরিকল্পনা করছেন তা ডাউনলোড করুন৷ প্রতিটি জিপে দুটি ফাইল থাকে: উইজেটের JSON এবং একটি README যা এর নিয়ন্ত্রণগুলি তালিকাভুক্ত করে৷।
| উইজেট | ডেমো | জিপ |
|---|---|---|
| অ্যাপারচার সূচক | লাইভ ডেমো | ডাউনলোড করুন |
| বেলো সূচক | লাইভ ডেমো | ডাউনলোড করুন |
| Dovetail অধ্যায় | লাইভ ডেমো | ডাউনলোড করুন |
| ইজেল র্যাক | লাইভ ডেমো | ডাউনলোড করুন |
| ফ্যাসেট কিউব | লাইভ ডেমো | ডাউনলোড করুন |
| ফিলামেন্ট থ্রেড | লাইভ ডেমো | ডাউনলোড করুন |
| অরবিট টিউব | লাইভ ডেমো | ডাউনলোড করুন |
| কুয়ার বই | লাইভ ডেমো | ডাউনলোড করুন |
| রিল পোর্ট্রেট | লাইভ ডেমো | ডাউনলোড করুন |
| রাইফেল ডেক | লাইভ ডেমো | ডাউনলোড করুন |
| সেলুন হ্যাং | লাইভ ডেমো | ডাউনলোড করুন |
| শ্যাটার ডেক | লাইভ ডেমো | ডাউনলোড করুন |
| শিঙ্গল ফ্রেম | লাইভ ডেমো | ডাউনলোড করুন |
| সোয়াচ দোকান | লাইভ ডেমো | ডাউনলোড করুন |
| জোয়ার সূচক | লাইভ ডেমো | ডাউনলোড করুন |
| ওয়েফট গ্রিড | লাইভ ডেমো | ডাউনলোড করুন |
আপনি এটি আমদানি করার আগে একটি ফাইল আনজিপ করুন। উইজেট বিল্ডার আমদানিকারক ।json ফাইল পড়ে এবং জিপ নিজেই গ্রহণ করবে না।
এলিমেন্টরে কীভাবে একটি স্ক্রোল উইজেট আমদানি করবেন
আপনি মাস্টার অ্যাডনস উইজেট বিল্ডারের মাধ্যমে প্রতিটি উইজেট আমদানি করেন, তারপর এটিকে অন্য যেকোনো এলিমেন্টর উইজেটের মতো একটি পৃষ্ঠায় টেনে আনুন। পুরো জিনিসটি ডিজাইন প্রতি প্রায় দুই মিনিট সময় নেয়।
- আপনি যে উইজেটটি চান তা ডাউনলোড করুন এবং এটি আনজিপ করুন। ভিতরে একটি ফাইল মত নাম আছে
widget-facet-cube.json, প্লাস একটি README। - আপনার ওয়ার্ডপ্রেস ড্যাশবোর্ডে, যান মাস্টার অ্যাডঅন > উইজেট নির্মাতা এবং ক্লিক করুন উইজেট আমদানি করুন.
- আপলোড এলাকায় একটি ।json ফাইল টেনে আনুন, অথবা ক্লিক করুন ফাইল ব্রাউজ করুন এবং এটি বাছাই করুন। আমদানিকারক একবারে একটি ফাইল নেয়, তাই আপনার পছন্দের প্রতিটি ডিজাইনের জন্য এটি পুনরাবৃত্তি করুন।
- Elementor-এ যেকোনো পৃষ্ঠা খুলুন এবং ডিজাইনের নামের জন্য উইজেট প্যানেল অনুসন্ধান করুন, উদাহরণস্বরূপ “ Cube”। এটি একটি পূর্ণ-প্রস্থ পাত্রে টেনে আনুন।
- বিষয়বস্তু ট্যাবে ডেমো চিত্র এবং পাঠ্য প্রতিস্থাপন করুন, তারপর স্টাইল ট্যাবে রঙ এবং টাইপোগ্রাফি সেট করুন।
এই ফাইলগুলি Elementor এর নিজস্ব মাধ্যমে যায় না টেমপ্লেট > আমদানি পর্দা। সেই আমদানিকারক পৃষ্ঠা এবং বিভাগ টেমপ্লেটের জন্য, যা আমরা কভার করি কিভাবে একটি Elementor টেমপ্লেট আমদানি করতে হয়। পিন করা উইজেটগুলিরও রুম দরকার। এগুলিকে প্যাডিং ছাড়াই সম্পূর্ণ প্রস্থে সেট করা একটি পাত্রে রাখুন, নতুবা মঞ্চটি একটি সরু কলামের ভিতরে বসবে এবং সঙ্কুচিত দেখাবে।
আরও পড়ুন: এলিমেন্টরে জিএসএপি অ্যানিমেশন কীভাবে যুক্ত করবেন, আপনি যদি স্ক্র্যাচ থেকে আপনার নিজের স্ক্রোল-ট্রিগার করা অ্যানিমেশন লিখতে চান।
ইমেজ স্ক্রোল উইজেট বনাম ইমেজ স্ক্রোল প্রভাব
একটি ইমেজ স্ক্রোল উইজেট এবং একটি ইমেজ স্ক্রোল প্রভাব দুটি ভিন্ন জিনিস, এবং নামগুলি বিভ্রান্তির কারণ হয়। বেশিরভাগ এলিমেন্টর অ্যাডঅনগুলিতে, "ইমেজ স্ক্রোল" মানে একটি নির্দিষ্ট ফ্রেমের ভিতরে একটি লম্বা স্ক্রিনশট যা আপনি যখন এটির উপর ঘোরাফেরা করেন তখন স্লাইড হয়ে যায়। থিম শপগুলি একটি ছোট বাক্সে একটি দীর্ঘ পৃষ্ঠার পূর্বরূপ দেখতে এটি ব্যবহার করে।
একটি ইমেজ স্ক্রোল ইফেক্ট হল পেজ স্ক্রলের সাথে বাঁধা অ্যানিমেশন: যে ছবিগুলি ভিজিটর পৃষ্ঠার নিচে চলে যাওয়ার সাথে সাথে প্রকাশ করে, স্ট্যাক করে, ঘুরিয়ে দেয় বা ভ্রমণ করে। এই পোস্টের সবকিছুই দ্বিতীয় ধরনের। যদি হোভার প্রিভিউটি আপনি যা জন্য এসেছেন তা হলে, আপনার একটি ইমেজ স্ক্রোল উইজেট সহ একটি অ্যাডন প্রয়োজন, কারণ এই 16 টির মধ্যে কেউই তা করে না।
এলিমেন্টরে স্ক্রোলাইটেলিং
স্ক্রোল করা এমন একটি পৃষ্ঠা যেখানে স্ক্রলিং একটি গল্পকে অগ্রসর করে: একটি ভিজ্যুয়াল পিন করা থাকে যখন এটির পাশের পাঠ্যটি এগিয়ে যায় এবং প্রতিটি ধাপে ভিজ্যুয়াল পরিবর্তন হয়। এলিমেন্টর একটি স্টিকি কলাম সহ একটি মৌলিক সংস্করণ করতে পারে। কঠিন অংশটি পাঠক ঠিক যেখানে ভিজ্যুয়াল প্রতিক্রিয়া তৈরি করছে।
এই উইজেটগুলির মধ্যে তিনটি এটির জন্য নির্মিত। শিঙ্গল ফ্রেম প্রতিটি অনুচ্ছেদকে একটি ছবির সাথে যুক্ত করে যা শেষটি প্রতিস্থাপন করে, ডোভেটেল অধ্যায়গুলি আপনি পড়ার সাথে সাথে প্রতি অধ্যায়ে একটি ছবি একত্রিত করে এবং Quire Book প্রতিটি বিভাগের জন্য একটি পৃষ্ঠা ঘুরিয়ে দেয়। একটি দীর্ঘ গল্পের জন্য, তাদের মধ্যে দুটিকে একটি পৃষ্ঠায় স্ট্যাক করুন যার মধ্যে সাধারণ পাঠ্য বিভাগ রয়েছে, যাতে পাঠক গতি থেকে বিশ্রাম পায়।
স্ক্রোল প্রভাব কি আপনার সাইটকে ধীর করে দেয়?
স্ক্রোল ইফেক্ট একটি সাইটকে ধীর করে দেয় যখন সেগুলি অসতর্কভাবে তৈরি করা হয়, এবং সাধারণ অপরাধী হল বড় আকারের ছবি এবং অ্যানিমেশন যা প্রতিটি ফ্রেমের লেআউট পরিবর্তন করে। এই উইজেটগুলি দ্বিতীয় সমস্যা এড়ায়। তারা CSS রূপান্তর এবং অস্বচ্ছতার সাথে অ্যানিমেট করে, যা ব্রাউজার গ্রাফিক্স কার্ডে হস্তান্তর করতে পারে এবং উইজেটটি কখন স্ক্রিনে রয়েছে তা জানতে তারা একটি ইন্টারসেকশনঅবজারভার ব্যবহার করে।
ছবির ওজন আপনার উপর নির্ভর করে, যেহেতু একটি উইজেট যা বারোটি ফটোগ্রাফ দেখায় বারোটি ফটোগ্রাফ লোড করবে। এগুলিকে WebP হিসাবে রপ্তানি করুন, সেগুলিকে তারা প্রদর্শিত বৃহত্তম মাত্রায় আকার দিন এবং প্রতিটিকে প্রায় 150 KB এর নিচে রাখুন৷।
অ্যাক্সেসযোগ্যতার উপর, সমস্ত 16টি উইজেট একটি বহন করে prefers-reduced-motion নিয়ম। একজন দর্শক যে তাদের ডিভাইসটিকে কম গতির জন্য বলেছে সে একটি স্থির বিন্যাস পায়: ওয়েফট গ্রিড তার উপর পাঠ্য সহ তার সমাপ্ত গ্রিড দেখায় এবং শ্যাটার ডেক ক্রস-ফেড হয়। শ্যাটার ডেকও একটি বাস্তব ট্যাব স্টপ, তাই তীর কীগুলি একবার ফোকাস করার পরে কাজ করে এবং অন্যথায় পৃষ্ঠাটি হাইজ্যাক করবেন না।
ফোনের জন্য, বেশ কয়েকটি ডিজাইনের নিজস্ব ন্যারো-স্ক্রিন লেআউট অন্তর্ভুক্ত। ফেসেট কিউব তার থাম্বনেইল রেলকে স্টেজের পাদদেশে একটি সারিতে নিয়ে যায় এবং রিল পোর্ট্রেট তার সূচককে সংখ্যার সারিতে পরিণত করে। তবুও, আপনি প্রকাশ করার আগে একটি বাস্তব ফোনে আপনার চয়ন করা উইজেটটি পরীক্ষা করুন। লম্বা পিন করা বিভাগগুলি মাউসের চাকার চেয়ে থাম্বের নীচে দীর্ঘ মনে হয়। যদি আপনার সাইট অ-মানক ব্রেকপয়েন্ট ব্যবহার করে, আমাদের গাইড এলিমেন্টর ব্রেকপয়েন্ট তাদের সামঞ্জস্য কিভাবে ব্যাখ্যা।
আমি প্রতি পৃষ্ঠায় একটি পিনযুক্ত স্ক্রোল প্রভাব ব্যবহার করব, সর্বাধিক দুটি। প্রতিটি পিন করা পর্যায় স্ক্রোল দূরত্ব যোগ করে, এবং একজন দর্শক যাকে পরপর তিনটির মধ্য দিয়ে স্ক্রোল করতে হবে তারা এটি অনুভব করবে।
প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী
Elementor স্ক্রোলিং প্রভাব বিনামূল্যে?
না। অ্যাডভান্সড > মোশন ইফেক্টের অধীনে স্ক্রলিং ইফেক্ট নিয়ন্ত্রণগুলি এলিমেন্টর প্রো-এর অংশ, এবং বিনামূল্যের এলিমেন্টর প্লাগইন সেগুলি অন্তর্ভুক্ত করে না৷ এই পৃষ্ঠার 16টি উইজেট এলিমেন্টর প্রো-এর উপর নির্ভর করে না। তারা মাস্টার অ্যাডনস প্রো থেকে উইজেট বিল্ডারের সাথে ফ্রি এলিমেন্টরে চলে।
আমি কিভাবে এলিমেন্টরে স্ক্রোল প্রভাব যোগ করব?
Elementor Pro এর সাথে, একটি উপাদান নির্বাচন করুন, উন্নত > মোশন ইফেক্ট খুলুন, স্ক্রলিং ইফেক্ট চালু করুন এবং উল্লম্ব স্ক্রোল, অনুভূমিক স্ক্রোল, স্বচ্ছতা, অস্পষ্ট, ঘোরান বা স্কেল নির্বাচন করুন। যে প্রভাবগুলির জন্য একটি বিভাগ পিন করে বা একাধিক ছবি একসাথে অ্যানিমেট করে, মাস্টার অ্যাডঅন > উইজেট বিল্ডার > আমদানি উইজেটের মাধ্যমে একটি তৈরি স্ক্রোল উইজেট আমদানি করুন।
কেন আমার এলিমেন্টর স্ক্রোল প্রভাব কাজ করছে না?
সাধারণ কারণগুলি হল একটি ক্যাশিং বা অপ্টিমাইজেশান প্লাগইন যা জাভাস্ক্রিপ্টকে প্রথম মিথস্ক্রিয়া পর্যন্ত বিলম্বিত করে, ওভারফ্লো সহ একটি প্যারেন্ট কন্টেইনার লুকিয়ে রাখা হয় (যা স্টিকি পজিশনিং ভেঙে দেয়), এবং উইজেটটি একটি বাক্সযুক্ত কলামে বসে থাকে যা খুব সরু। ক্যাশে সাফ করুন, ধারকটিকে সম্পূর্ণ প্রস্থে সেট করুন এবং এর পিতামাতার কাছ থেকে লুকানো ওভারফ্লো সরান৷।
এই 16টি স্ক্রোল উইজেটের জন্য আমার কি এলিমেন্টর প্রো দরকার?
না। তাদের কেউই এলিমেন্টর প্রো উইজেট বা মোশন ইফেক্ট প্যানেল ব্যবহার করে না, তাই বিনামূল্যে এলিমেন্টর যথেষ্ট। আপনার যা দরকার তা হল মাস্টার অ্যাডনস প্রো, কারণ উইজেটগুলি এর উইজেট বিল্ডারে আমদানি এবং সম্পাদনা করা হয়।
একটি স্ক্রোল-ট্রিগার এবং একটি স্ক্রোল-লিঙ্কড অ্যানিমেশনের মধ্যে পার্থক্য কী?
একটি স্ক্রোল-ট্রিগার করা অ্যানিমেশন একবার শুরু হয় যখন একটি উপাদান স্ক্রিনে প্রবেশ করে এবং তারপরে ফেড-ইন-এর মতো তার নিজস্ব ঘড়িতে চলে। একটি স্ক্রোল-লিঙ্কড অ্যানিমেশন ক্রমাগত স্ক্রোল অবস্থান অনুসরণ করে, তাই আপনি যখন থামেন তখন এটি বিরতি দেয় এবং আপনি যখন স্ক্রোল করেন তখন বিপরীত হয়। এখানে 16টি প্রভাবের বেশিরভাগই স্ক্রোল-লিঙ্কযুক্ত।
আমি কি একটি পৃষ্ঠায় একাধিক স্ক্রোল প্রভাব ব্যবহার করতে পারি?
হ্যাঁ, এবং প্রতিটি উইজেট তার অ্যানিমেশনকে তার নিজস্ব বিভাগে রাখে। প্রতি পৃষ্ঠায় এক বা দুটি পিন করা প্রভাবে নিজেকে সীমাবদ্ধ করুন, তাদের মধ্যে স্বাভাবিক বিষয়বস্তু সহ। প্রতিটি পিন করা পর্যায় স্ক্রোল দূরত্ব যোগ করে, এবং একটি সারিতে অনেকগুলি একটি পৃষ্ঠা দ্রুত লোড হওয়ার পরেও ধীর বোধ করে।
এই স্ক্রোল প্রভাবগুলি কি GSAP বা ScrollTrigger এর সাথে কাজ করে?
তাদেরও দরকার নেই। প্রতিটি উইজেট তার নিজস্ব CSS এবং JavaScript পাঠায় এবং কোনো অ্যানিমেশন লাইব্রেরি লোড করে না। যদি আপনার সাইট ইতিমধ্যেই অন্যান্য বিভাগের জন্য GSAP চালায়, তাহলে দুটি একই পৃষ্ঠায় বসতে পারে, যেহেতু উইজেটগুলি শুধুমাত্র তাদের নিজস্ব মার্কআপ স্পর্শ করে।
চূড়ান্ত চিন্তা
এলিমেন্টরের অন্তর্নির্মিত স্ক্রোল প্রভাবগুলি আপনাকে একটি উপাদান সরানোর ছয়টি উপায় দেয় এবং সেগুলি এলিমেন্টর প্রোতে থাকে। এখানে 16টি উইজেট এর বাইরেও গ্রাউন্ড কভার করে: চারটি পিন করা প্রকাশ, চারটি 3D টুকরা, দুটি কার্ড ডেক, তিনটি অন্তহীন গ্যালারী এবং তিনটি সূচক বা দোকানের লেআউট, প্রতিটিতে একটি লাইভ ডেমো এবং একটি হ্রাস-মোশন ফলব্যাক রয়েছে৷।
একটি চয়ন করতে, আপনার ছবিগুলি গণনা করুন এবং তাদের অর্ডার গুরুত্বপূর্ণ কিনা তা সিদ্ধান্ত নিন, তারপর উপরের টেবিল থেকে বেছে নিন। আপনি এই ডিজাইনগুলির যেকোনো একটি পরিবর্তন করতে পারেন, বা একটি নতুন তৈরি করতে পারেন উইজেট নির্মাতা.
সম্পর্কিত পড়া
