একটি 3D ক্যারোজেল হল একটি ক্যারোজেল যার স্লাইডগুলি সমতল সমতল জুড়ে না হয়ে গভীরতার মধ্য দিয়ে চলে: ঘোরানো, স্কেলিং বা প্রদক্ষিণ করা যাতে নিষ্ক্রিয় স্লাইডগুলি সক্রিয়টির পিছনে দৃশ্যমানভাবে বসে থাকে। Elementor এ আপনি এটি থেকে পেতে ইমেজ ক্যারোজেল উইজেটের কভারফ্লো লেআউট, বা থেকে একটি উদ্দেশ্য-নির্মিত নকশা.
চারটি শৈলী আপনার সময়ের মূল্য। তারা বিভিন্ন কাজ করে, এবং তাদের মধ্যে একটি আপনার পৃষ্ঠাটিকে কোনো সুবিধার জন্য ধীর করে দেবে যদি আপনি এটিকে ভুল বিষয়বস্তুর জন্য বেছে নেন। প্রতিটির জন্য লাইভ ডেমো, এছাড়াও সেটিংস যা একটি মসৃণ 3D ক্যারোজেলকে তোতলানো থেকে আলাদা করে।
কভারফ্লো: সবচেয়ে বেশি মানুষ মানে
কেন্দ্র স্লাইড আপনার মুখোমুখি বর্গাকার-অন। উভয় পাশের স্লাইডগুলি Y অক্ষের উপর ঘোরে, সামান্য সঙ্কুচিত এবং ম্লান। মাঝখানে ছাড়া আপনার চোখের আর কোথাও যাওয়ার নেই।
এটাই পুরো কৌশল, এবং এই কারণেই কভারফ্লো আইটিউনসের মৃত্যু থেকে বেঁচে গেছে। পেরিফেরাল স্লাইডগুলি প্রমাণ করার জন্য যথেষ্ট দৃশ্যমান, যথেষ্ট অস্পষ্ট যে আপনি সেগুলি পড়তে পারবেন না। লোকেরা উত্তেজনা সমাধান করতে তীরটিতে ক্লিক করে।
তিনটি সেটিংস বেশিরভাগ কাজ করে:
- আবর্তিত করা: পাশের স্লাইডগুলি কতদূর ঘুরছে। 50° পেরিয়ে গেলে এবং প্রতিবেশীরা অপঠনযোগ্য স্লিভারে পরিণত হয়। 30 থেকে 40° হল সেই পরিসর যা বিকৃতির পরিবর্তে গভীরতা হিসাবে পড়ে।
- গভীরতা: তারা কত দূরে বসে। এটিকে অনেক দূরে ঠেলে দিন এবং পাশের স্লাইডগুলি থাম্বনেইলে সঙ্কুচিত হয় এবং রচনাটি তার ভারসাম্য হারিয়ে ফেলে।
- ভিউ প্রতি স্লাইড: কভারফ্লো কমপক্ষে তিনটি দৃশ্যমান প্রয়োজন বা কোন “flow নেই।” এটিকে ডেস্কটপে 3, মোবাইলে 1 এ সেট করুন এবং বিশ্রী 2 এড়িয়ে যান।
এটির জন্য আপনার প্রো দরকার নেই। দ্য ফ্রি ইমেজ ক্যারোজেল উইজেট একটি কভারফ্লো লেআউট অন্তর্নির্মিত আছে।
জন্য ভাল: কেস স্টাডি, পোর্টফোলিও টুকরা, অ্যালবাম-শৈলী সংগ্রহ।
জন্য খারাপ: মানুষের যে কোনো কিছুর তুলনা করতে হবে। কভারফ্লো আপনাকে একটি জিনিস দেখার জন্য তৈরি করা হয়েছে।
ফ্লিপ: দুই-পার্শ্বযুক্ত কার্ড
কার্ডটি তার উল্লম্ব অক্ষে সম্পূর্ণ 180° ঘোরে। সামনের মুখ বাইরে, পিছনের মুখ ভিতরে। উভয় মুখই বাস্তব বিষয়বস্তু ধরে রাখে।
বেশিরভাগ 3D প্রভাব হল সজ্জা। এই এক' নয়। এটি প্রতি স্লাইডের বিষয়বস্তুকে দ্বিগুণ করে, যে কারণে এটি একটি দলের পৃষ্ঠায় তার স্থান অর্জন করে। সামনের দিকে ছবি এবং নাম, ভূমিকা, বায়ো এবং পিছনে লিঙ্ক। একই পদচিহ্ন, দ্বিগুণ তথ্য।
সেটিং মানুষ ভুল পেতে হয় ব্যাকফেস দৃশ্যমানতা। এটি ছেড়ে দিন এবং আপনি মধ্য-ঘূর্ণনের মাধ্যমে সামনের মুখের একটি মিরর করা ভূত দেখতে পাবেন। এটি সম্পাদকে মিস করার জন্য যথেষ্ট সূক্ষ্ম এবং একটি রেটিনা স্ক্রিনে স্পষ্ট। এটা বন্ধ কর।
দ্বিতীয় জিনিস: ফ্লিপটি 600 মি এর নিচে রাখুন। একটি ফ্লিপ হল একটি প্রকাশ, এবং একটি প্রকাশ যা সম্পূর্ণ সেকেন্ড সময় নেয় প্রতিক্রিয়াশীল বোধ করা বন্ধ করে এবং একটি লোডিং অবস্থার মতো অনুভব করা শুরু করে।
জন্য ভাল: টিম গ্রিড, আগে/পরে, স্পেক কার্ড, বিশদ বিবরণ সহ মূল্য বিপরীত।
জন্য খারাপ: যে কোন কিছু যেখানে পিছনের মুখ খালি থাকবে। এর পিছনে কিছুই না থাকা একটি ফ্লিপ একটি নষ্ট ক্লিক।
একটি ক্যারোজেল স্লাইডের পরিবর্তে একটি স্থায়ী কার্ড হিসাবে একই দ্বি-পার্শ্বযুক্ত প্রকাশ চান? এটাই এলিমেন্টর ফ্লিপবক্স উইজেটএর কাজ।
চাপ: একটি বক্ররেখার উপর স্লাইড
স্লাইডগুলি একটি বৃত্তের রিমে চড়ে যার কেন্দ্রটি ভাঁজের নীচে বসে। প্রত্যেকটি চাপের শীর্ষে সোজা হয়ে আসে এবং এটি যাত্রা করার সাথে সাথে দূরে সরে যায়।
আর্ক হল ওয়ার্ডপ্রেস সাইটগুলিতে সবচেয়ে কম সাধারণ 3D শৈলী, যা এর বেশিরভাগ মূল্য। একজন দর্শক কভারফ্লো একশ বার দেখেছেন। তারা এটা দেখেনি।
বিনিময়ে আপনার কিছু খরচ হয়: টিপিং মোশন মানে স্লাইডগুলি শুধুমাত্র আর্কের শীর্ষে সম্পূর্ণরূপে পাঠযোগ্য। যে বিষয়বস্তু পরিধিতে পাঠযোগ্য হতে হবে (দাম, তারিখ, চশমা) ডিজাইনের সাথে লড়াই করবে। ছবি এবং ছোট শিরোনাম হবে না।
জন্য ভাল: ক্যাটালগ, নমুনা তালিকা, মেনু, অনুরূপ আইটেম সংগ্রহ।
জন্য খারাপ: তথ্য। যদি লোকেদের একবারে তিনটি স্লাইড পড়তে হয় তবে একটি গ্রিড ব্যবহার করুন।
কক্ষপথ: একটি কেন্দ্রের চারপাশে বৃত্তাকার গতি
আইটেমগুলি একটি নির্দিষ্ট কেন্দ্রের চারপাশে একটি পূর্ণ বৃত্ত ভ্রমণ করে। শীর্ষে থাকা আইটেমটি সক্রিয় এবং পূর্ণ আকারের; বাকি স্কেল নিচে যখন তারা পিছনে পাস।
অরবিট কাঠামোগত কিছু বলে যা অন্য কোন লেআউট বলে না: এই লুপ। একটি চার-পর্যায়ের প্রক্রিয়া যা সত্যিকার অর্থে তার শুরুতে ফিরে আসে তা পুরোপুরি পড়ে। একটি পাঁচ-পদক্ষেপ অনবোর্ডিং প্রবাহ যা শেষ হয় না। একটি বৃত্ত একটি প্রত্যাবর্তনের প্রতিশ্রুতি দেয়, এবং যদি আপনার সামগ্রী ফিরে না আসে, লোকেরা এমন কিছুর জন্য অপেক্ষা করে যা কখনই আসে না।
বিষয়বস্তু একটি চক্র হলে কক্ষপথ ব্যবহার করুন। এটি একটি তালিকা যখন কভারফ্লো ব্যবহার করুন।
জন্য ভাল: প্রক্রিয়া চাকা, ইকোসিস্টেম ডায়াগ্রাম, ক্ষমতা মানচিত্র, পরিষেবা চক্র।
জন্য খারাপ: একটি শুরু এবং একটি শেষ সঙ্গে ক্রম।
কীভাবে একটি 3D ক্যারোজেল তৈরি করবেন যা তোতলাতে পারে না
3D রূপান্তরগুলি GPU-তে সস্তা এবং আপনি যদি ভুল পান তবে ব্যয়বহুল। চারটি জিনিস একটি মসৃণ ক্যারোজেলকে একটি জ্যাঙ্কি থেকে আলাদা করে, যে ক্রমে তারা আপনাকে কামড় দেবে:
- শুধুমাত্র অ্যানিমেট রূপান্তর এবং অস্বচ্ছতা। অ্যানিমেটিং প্রস্থ, উচ্চতা, উপরে বা বাম প্রতিটি ফ্রেমে একটি লেআউট পুনঃগণনা জোর করে। রূপান্তর এবং অস্বচ্ছতা সরাসরি কম্পোজিটরে যান। এখানে প্রতিটি নকশা ঐ দুটি লাঠি।
- ছবির আকার ক্যাপ। একটি 3D ক্যারোজেল মেমরিতে একসাথে বেশ কয়েকটি স্লাইড ধারণ করে কারণ সেগুলি সবই দৃশ্যমান। 400 KB-এ ছয়টি স্লাইড প্রতিটি 2.4 MB কিছু সরানোর আগে। এগুলিকে 200 KB এর নিচে পান এবং WebP পরিবেশন করুন৷।
- 3D এর ভিতরে 3D স্ট্যাক করবেন না। একটি কভারফ্লো ট্র্যাকের ভিতরে একটি ফ্লিপ কার্ড নেস্টেড 3D প্রসঙ্গ তৈরি করে এবং ব্রাউজারগুলি এটিকে অসঙ্গতভাবে পরিচালনা করে। সাফারি বিশেষ করে অপ্রত্যাশিত মুহুর্তে ভিতরের রূপান্তরকে সমতল করে। একটি বাছাই করুন।
- সম্মান হ্রাস গতি। কিছু লোকের ভেস্টিবুলার ডিসঅর্ডার রয়েছে এবং গভীরতার অ্যানিমেশন একটি সাধারণ ট্রিগার। এখানে প্রতিটি নকশা একটি প্লেইন বিবর্ণ ড্রপ যখন
prefers-reduced-motionসেট করা হয়। আপনি যদি নিজের তৈরি করেন তবে একই কাজ করুন।
একটি মিড-রেঞ্জ অ্যান্ড্রয়েড ফোনে পরীক্ষা করুন, ব্রাউজারের ডিভাইস এমুলেটরে নয়। এমুলেটর ভিউপোর্টের আকার পরিবর্তন করে কিন্তু আপনার ডেস্কটপের জিপিইউ রাখে। যেখান থেকে "আমার মেশিনে ঠিক ছিল" এসেছে।
একটি 3D ক্যারোজেল কি পৃষ্ঠার গতিতে আঘাত করে?
নিজে থেকে নয়। ট্রান্সফর্ম-ভিত্তিক অ্যানিমেশন কম্পোজিটর থ্রেডে চলে এবং মূল থ্রেডকে ব্লক করে না, তাই এটি আপনার ইন্টারঅ্যাকশনকে নেক্সট পেইন্টে খুব বেশি সরিয়ে দেবে না।
কি ক্ষতি করে: ছবি। ছয়টি পূর্ণ-আকারের স্লাইড সহ ভাঁজের উপরে একটি ক্যারোজেল হল ছয়টি রেন্ডার-ব্লকিং ইমেজ অনুরোধ যা আপনার সবচেয়ে বড় কন্টেন্টফুল পেইন্টের সাথে প্রতিযোগিতা করে। প্রথম স্লাইডের পরে সবকিছু অলস-লোড করুন, স্পষ্ট প্রস্থ এবং উচ্চতা সেট করুন যাতে কিছুই পরিবর্তন না হয় এবং প্রথম স্লাইডের ছবি 150 KB-এর নিচে রাখুন।
3D আপনার সমস্যা নয়। পেলোড হল।
যদি ক্যারোজেলটি খারাপভাবে অ্যানিমেট করার পরিবর্তে মোটেও অ্যানিমেটিং না হয়, তবে এটি সাধারণত রূপান্তর সমস্যার পরিবর্তে সুইপার শুরু করতে ব্যর্থ হয়। সুইপার সমস্যা সমাধানের গাইড এটি লোড করা বন্ধ করে কি কভার করে।
প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী
Elementor একটি 3D ক্যারোজেল আছে?
স্থানীয়ভাবে নয়। Elementor's Media Carousel (Pro) এর একটি কভারফ্লো স্কিন রয়েছে যা একটি হালকা 3D প্রভাব দেয়, কিন্তু কোন ফ্লিপ, আর্ক বা কক্ষপথের বিকল্প নেই। যাদের জন্য আপনার একটি অ্যাডঅন প্রয়োজন। মাস্টার অ্যাডঅন বিনামূল্যে ইমেজ ক্যারোজেল একটি কভারফ্লো লেআউট অন্তর্ভুক্ত করে এবং এই পৃষ্ঠার চারটি প্রো ডিজাইন বাকিগুলিকে কভার করে৷।
আমি কিভাবে এলিমেন্টরে একটি কভারফ্লো ক্যারোজেল তৈরি করব?
ড্রপ ইমেজ ক্যারোজেল উইজেট পৃষ্ঠায়, আপনার ছবি যোগ করুন, তারপর ক্যারোজেল সেটিংসের অধীনে লেআউট স্ট্যান্ডার্ড থেকে কভারফ্লোতে স্যুইচ করুন। স্লাইড-প্রতি-ভিউ 3-এ সেট করুন, প্রায় 35° এ ঘোরান এবং কেন্দ্রীভূত স্লাইডগুলি চালু করুন যাতে সক্রিয় চিত্রটি বাম দিকে ফ্লাশ করার পরিবর্তে মাঝখানে বসে।
কভারফ্লো এবং একটি 3D ক্যারোজেলের মধ্যে পার্থক্য কী?
কভারফ্লো হল এক ধরনের 3D ক্যারোজেল: যেখানে পাশের স্লাইডগুলি Y অক্ষের উপর ঘোরে এবং সরে যায়। ফ্লিপ, আর্ক এবং কক্ষপথও 3D ক্যারোসেল; তারা শুধু বিভিন্ন অক্ষ এবং পথ ব্যবহার করে। চারটিই সমতল সমতল জুড়ে না হয়ে গভীরতার মধ্য দিয়ে স্লাইডগুলি সরিয়ে দেয়।
3D ক্যারোসেল কি মোবাইলে কাজ করে?
হ্যাঁ, সমন্বয় সহ। কভারফ্লো 768px এর নিচে প্রতি ভিউতে একটি স্লাইডে নেমে যাওয়া উচিত বা পাশের প্যানেলগুলি অব্যবহারযোগ্য স্লিভারে পরিণত হওয়া উচিত। ফ্লিপ অপরিবর্তিত কাজ করে। আর্ক এবং অরবিট সঠিকভাবে পড়ার জন্য একটি বিস্তৃত ভিউপোর্ট প্রয়োজন, তাই উভয়ই ফোনে একটি আদর্শ অনুভূমিক স্লাইডে ফিরে আসে।
কেন আমার 3D ক্যারোজেল সাফারিতে ঝিকিমিকি করে?
প্রায় সবসময় ব্যাকফেস দৃশ্যমানতা। সাফারি একটি ঘূর্ণিত উপাদানের বিপরীত রেন্ডার করে যদি না আপনি এটিকে স্পষ্টভাবে লুকিয়ে রাখেন, যা একটি ফ্লিকার বা একটি ভুতুড়ে মিরর ইমেজ মধ্য-ঘূর্ণন হিসাবে দেখায়। সেট backface-visibility: hidden ঘূর্ণায়মান উপাদানের উপর এবং এটি থেমে যায়।
কোনটি বেছে নিতে হবে
কভারফ্লো যদি আপনি নিশ্চিত না হন। এটি এমন শৈলী যা লোকেরা ইতিমধ্যেই বোঝে, এবং বিনামূল্যের ইমেজ ক্যারোজেল উইজেট লাইসেন্স ছাড়াই আপনাকে দেয়। আপনার বিষয়বস্তুর প্রকৃত দুটি দিক থাকলে ফ্লিপ করুন। আপনি যদি কিছু চান তবে আপনার কুলুঙ্গির প্রথম পৃষ্ঠায় অন্য কেউ নেই। আপনি যে জিনিসটি দেখাচ্ছেন তা আসলে লুপ হলেই কক্ষপথ। যদি বিভাগটি মোটেও ক্যারোজেল না চায়, ক্যারোজেল বনাম স্লাইডার গতি শৈলী গুরুত্বপূর্ণ আগে যে নিষ্পত্তি।
আপনি যে জিনিসটি ঘোরাতে চান তা হল আপনার সর্বশেষ পোস্ট, আমাদের মধ্যে মার্কি লেআউট এলিমেন্টর ব্লগ টেমপ্লেট একটি ব্লগ পৃষ্ঠার শীর্ষে একটি বৈশিষ্ট্যযুক্ত পোস্ট ক্যারোজেল রাখে৷।
সেটে বিশটি ডিজাইনের মধ্যে আটটি বিনামূল্যে প্লাগইন আমদানি করুন। বিনামূল্যের আটটির কোনোটিই 3D নয়, যদিও কীস্টোন ফিচার স্লাইডার কাছাকাছি আসে: একটি আইটেম প্রচার করা গভীরতার রূপান্তরের পরিবর্তে একটি FLIP অবস্থান অ্যানিমেশন চালায়।
সমস্ত বিশটি নকশা দিয়ে নির্মিত হয় উইজেট নির্মাতা, যা আপনি আপনার নিজের তৈরি করতে ব্যবহার করবেন এমন সরঞ্জাম। আপনি যদি লাইসেন্স ওজন করছেন, মূল্য পৃষ্ঠা প্রতিটি স্তর কী আনলক করে তা তালিকাভুক্ত করে।
চারটিই লাইভ ডেমো আছে এলিমেন্টর ক্যারোজেল উইজেট পৃষ্ঠা, অন্যান্য ষোলটি ডিজাইনের পাশাপাশি। আপনি যদি প্রথমে সম্পূর্ণ সেটটি পাশাপাশি দেখতে চান, সমস্ত বিশটি স্লাইডার টেমপ্লেট একই চিকিত্সা সঙ্গে এক জায়গায় সংগ্রহ করা হয়।
বিশটির প্রত্যেকটি একটি মাস্টার অ্যাডঅন উইজেট বা এক্সটেনশন, তাই তারা স্টক উইজেটগুলির মতো একইভাবে ইনস্টল করে। ক থাম্বনেইল-স্ট্রিপ গ্যালারি একটি 3D ট্র্যাকের পরিবর্তে, গ্যালারি স্লাইডার উইজেট রেডিমেড বিকল্প।
