একটি মার্কি এমন বিষয়বস্তু যা ক্রমাগত এক দিকে স্ক্রোল করে এবং কখনই থামে না: কোনও তীর নেই, কোনও বিন্দু নেই, কোনও স্লাইডের সীমানা নেই। পুরাতন <marquee> এইচটিএমএল ট্যাগ বছরের পর বছর ধরে মারা গেছে, কিন্তু প্রভাবটি 2021 সালের দিকে ফিরে এসেছে এবং এটি এখন আপনি যে অর্ধেক এজেন্সি সাইটগুলিতে যাবেন সেখানে রয়েছে৷।
এলিমেন্টরে একটি তৈরি করার তিনটি উপায়: বিনামূল্যে লোগোর জন্য লোগো স্লাইডার উইজেট, দ নিউজ টিকার পাঠ্যের জন্য, বা CSS এর প্রায় বারো লাইন যদি আপনি এটি এমন কিছুতে চান যা উইজেটগুলি কভার করে না। একটি marquee সত্যিই একটি ক্যারোজেল উইজেট স্টপগুলি সরানোর সাথে সাথে, যে কারণে তিনটি পদ্ধতির মধ্যে দুটি একটি থেকে শুরু হয়। নীচের তিনটিই, বিশদ বিবরণ সহ যা সিদ্ধান্ত নেয় যে আপনার লুপগুলি পরিষ্কারভাবে বা দৃশ্যমানভাবে স্ন্যাপ হবে কিনা।
একটি জিনিস যা একটি মার্কিকে ভাঙা দেখায়
এখানে শুরু করুন, কারণ বেশিরভাগ হাতে তৈরি মার্কিগুলি ভুল দেখায়।
একটি মার্কি হল বিষয়বস্তুর একটি স্ট্রিপ যা অফ-স্ক্রিন না হওয়া পর্যন্ত বাম দিকে স্লাইড করে, তারপর শুরুতে ফিরে যায়। যদি বিষয়বস্তুর শুধুমাত্র একটি অনুলিপি থাকে, আপনি একটি ফাঁক পাবেন। লেজ ছেড়ে যায়, এবং মাথা আবার গোলাকার না আসা পর্যন্ত খালি জায়গা থাকে।
ফিক্স ট্র্যাক নকল করা হয়। পাশাপাশি দুটি অভিন্ন কপি, ঠিক এক কপির প্রস্থ জুড়ে অ্যানিমেটেড। যখন অ্যানিমেশন রিসেট হয়, তখন কপি টু ঠিক যেখানে কপি ছিল সেখানে বসে থাকে এবং জাম্পটি অদৃশ্য থাকে।
এটাই। এটাই পুরো কৌশল। আপনি দেখেছেন যে প্রতিটি মার্কি মসৃণভাবে লুপ করে এটি করছে, এবং প্রত্যেকে যে তোতলাচ্ছে তা নয়।
পদ্ধতি 1: বিনামূল্যে লোগো স্লাইডার সহ লোগো মার্কি
আপনি যদি ক্লায়েন্ট লোগো স্ক্রোল করছেন, যার জন্য বেশিরভাগ মার্কি, লোগো স্লাইডার উইজেট এটি সিএসএস ছাড়াই করে। এটি বিনামূল্যে প্লাগইন মধ্যে আছে।
- পৃষ্ঠায় লোগো স্লাইডার টেনে আনুন এবং রিপিটারে আপনার লোগো যোগ করুন, একটি ঐচ্ছিক লিঙ্ক সহ প্রতিটি একটি সারি।
- ক্যারোজেল সেটিংস খুলুন এবং অটোপ্লে চালু করুন, তারপর অসীম লুপ।
- অটোপ্লে বিলম্ব 0 এ সেট করুন। এটি সেই সুইচ যা একটি ক্যারোজেলকে মার্কিতে পরিণত করে। শূন্যের বিলম্ব মানে এটি কখনই একটি স্লাইডে বিরতি দেয় না, তাই গতি ধাপের পরিবর্তে অবিচ্ছিন্ন হয়ে যায়।
- ধীর কিছুতে গতি সেট করুন, 4000 থেকে 6000 মি। মার্কিরা শান্ত হিসাবে পড়ে যখন তারা আপনার প্রত্যাশার চেয়ে ধীর হয়। দ্রুত বেশী একটি ত্রুটি অবস্থা মত দেখায়।
- তীর এবং বিন্দু বন্ধ করুন। একটি মার্কিতে নেভিগেশন পরস্পরবিরোধী; নেভিগেট করার কিছু নেই।
- পজ-অন-হোভার বন্ধ করুন আপনি যদি এটি সত্যিই অবিচ্ছিন্ন চান, অথবা লোগো ক্লিকযোগ্য হলে এটি ছেড়ে দিন।
স্লাইড-প্রতি-ভিউ ঘনত্ব নিয়ন্ত্রণ করে। ডেস্কটপে ছয়টি, ট্যাবলেটে তিনটি, মোবাইলে দুটি লোগো পাঠযোগ্য রাখে। একটিতে নামবেন না, কারণ একটি মার্কি একবারে একটি একক লোগো দেখায় একটি স্ট্রিপ হিসাবে পড়া বন্ধ করে দেয়।
স্টাইলিং লোগো স্ট্রিপ সম্পর্কে আরও, গ্রেস্কেল হোভার ট্রিটমেন্ট সহ এবং কীভাবে অমিল লোগোর আকারগুলিও বের করা যায়: লোগো ক্যারোজেল ওয়াকথ্রু। মুক্ত স্তরে আর কি বসে, দেখুন বিনামূল্যে ক্যারোজেল উইজেট ভাঙ্গন.
পদ্ধতি 2: নিউজ টিকার সহ টেক্সট মার্কি
স্ক্রলিং পাঠ্যের জন্য (ঘোষণা, শিরোনাম, একটি স্টক-টিকার স্ট্রিপ) নিউজ টিকার উইজেটটি উদ্দেশ্য-নির্মিত বিকল্প। এটি একটি প্রো উইজেট।
এটি হ্যান্ড-রোল্ড টেক্সট মার্কি ভুল হয়ে যাওয়া জিনিসগুলি পরিচালনা করে: এটি একটি স্ট্যাটিক তালিকার পরিবর্তে একটি পোস্ট ক্যোয়ারী থেকে টানতে পারে, তাই একটি "সর্বশেষ খবর" টিকার নিজেই আপডেট হয় এবং এটির বাম দিকে একটি নির্দিষ্ট লেবেল ব্লক রয়েছে যা রাখা থাকে বিষয়বস্তু এটি অতীত স্ক্রোল। সেই লেবেলটি হল সেই বিশদ যা একটি টিকারকে প্রবাহিত পাঠ্যের পরিবর্তে একটি টিকার হিসাবে পড়তে বাধ্য করে।
উইজেটের সেটিংসে দিক, গতি এবং বিরতি আচরণ সেট করুন। করার মতো দুটি জিনিস:
- হোভারে বিরতি দিন, চালু করুন। শিরোনাম লিঙ্ক হলে, মানুষের একটি স্থির লক্ষ্য প্রয়োজন।
- আইটেম ছোট রাখুন। 90-অক্ষরের শিরোনাম সহ একটি টিকার সাইকেল করতে এত বেশি সময় নেয় যে কেউ আইটেম চারটি দেখতে পায় না। প্রায় 50 অক্ষর ছেঁটে ফেলুন।
আপনি আসলে যা চান তা হল স্ক্রোল ছাড়াই পাঠ্য সরানো, একটি শিরোনাম যেখানে শব্দগুলি জায়গায় ঘোরে, অ্যানিমেটেড হেডলাইন উইজেট যে কোনো marquee তুলনায় কাছাকাছি ফিট।
পদ্ধতি 3: CSS দিয়ে একটি তৈরি করুন
যেকোন কিছুর জন্য উইজেটগুলি কভার করে না (প্রশংসাপত্রের উদ্ধৃতিগুলির একটি স্ট্রিপ, আইকনগুলির একটি সারি, মিশ্র বিষয়বস্তু) একটি মার্কি হল CSS এর বারো লাইন। একটি HTML উইজেটে মার্কআপ এবং এলিমেন্টরের কাস্টম CSS ফিল্ডে বা আপনার চাইল্ড থিমে CSS রাখুন।
<div class="ma-marquee">
<div class="ma-marquee__track">
<span>Item one</span><span>Item two</span><span>Item three</span>
<span>Item one</span><span>Item two</span><span>Item three</span>
</div>
</div>নোট করুন বিষয়বস্তু দুবার প্রদর্শিত হবে। এটি আগের থেকে ডুপ্লিকেট ট্র্যাক, একটি কপি-পেস্ট ভুল নয়।
.ma-marquee {
overflow: hidden;
}
.ma-marquee__track {
display: flex;
gap: 3rem;
width: max-content;
animation: ma-scroll 30s linear infinite;
}
.ma-marquee:hover .ma-marquee__track {
animation-play-state: paused;
}
@keyframes ma-scroll {
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.ma-marquee__track { animation: none; }
}সেখানে চারটি জিনিস গুরুত্বপূর্ণ:
translateX(-50%)ট্র্যাকটিকে ঠিক এক কপির প্রস্থে নিয়ে যায়, কারণ ট্র্যাকটি দুটি কপি। এই লুপ অদৃশ্য করে তোলে কি।linear, নাease। একটি সহজ মার্কি প্রতিটি চক্রের গতি বাড়ায় এবং ধীর করে দেয়, যা দেখতে একটি বাগের মতো।width: max-contentফ্লেক্স ট্র্যাক মোড়ানো বন্ধ করে।- হ্রাস-গতির প্রশ্ন ঐচ্ছিক নয়। ক্রমাগত অনুভূমিক গতি একটি নথিভুক্ত মাইগ্রেন এবং ভেস্টিবুলার ট্রিগার, এবং একটি মার্কি আধুনিক ওয়েবে একক সবচেয়ে সাধারণ অপরাধী। সেটিং সম্মান।
দিক বিপরীত করতে, থেকে অ্যানিমেট translateX(-50%) প্রতি 0. উল্লম্ব জন্য, অদলবদল translateY এবং ধারক উচ্চতা সেট করুন।
একটি মার্কি কত দ্রুত সরানো উচিত?
প্রবৃত্তির চেয়ে ধীর বলে। একটি ভাল সূচনা পয়েন্ট হল একটি ছয়-আইটেম ট্র্যাকের একটি সম্পূর্ণ চক্রের জন্য 30 সেকেন্ড, যা সম্পাদকে প্রায় খুব ধীর মনে হয় এবং একটি লাইভ পৃষ্ঠায় আত্মবিশ্বাসী হিসাবে পড়ে।
পরীক্ষা: একজন দর্শক কি তাদের চোখ দিয়ে ট্র্যাক না করে একটি আইটেম পড়তে পারে? যদি তাদের আন্দোলন অনুসরণ করতে হয়, তবে এটি খুব দ্রুত, এবং পুরো স্ট্রিপটি দূরে তাকানোর মতো কিছু হয়ে যায়।
লোগো পাঠ্যের চেয়ে দ্রুত যেতে পারে, কারণ একটি লোগো পড়ার পরিবর্তে স্বীকৃত হয়। টেক্সট থাকার সময় প্রায় দ্বিগুণ প্রয়োজন। একটি ধাপযুক্ত ক্যারোজেল বিপরীত ক্ষেত্রে, যেখানে অটোপ্লে সাধারণত একটি ভুল কারণ আইটেম ক্লিকযোগ্য।
একটি মার্কি কি এসইও বা অ্যাক্সেসযোগ্যতার জন্য খারাপ?
এসইও, না। বিষয়বস্তুটি DOM-এ বাস্তব পাঠ্য, ক্রলযোগ্য এবং সূচীকরণযোগ্য। ট্র্যাকটির নকল করার অর্থ হল পাঠ্যটি উত্সে দুবার প্রদর্শিত হয়, যা সচেতন হওয়া মূল্যবান তবে এই স্কেলে এটি একটি ডুপ্লিকেট-কন্টেন্ট সমস্যা নয়, কারণ এটি একটি উপাদানের ভিতরে মুষ্টিমেয় শব্দ। যদি এটি আপনাকে বিরক্ত করে তবে দ্বিতীয় কপিটি চিহ্নিত করুন aria-hidden="true", যা আপনার যাইহোক করা উচিত।
অ্যাক্সেসযোগ্যতা হল আসল বিবেচনা, এবং তিনটি প্রকৃত সমস্যা রয়েছে:
- গতি সংবেদনশীলতা। উপরে হ্রাস-মোশন ক্যোয়ারী দ্বারা পরিচালিত। অ-আলোচনাযোগ্য।
- চলন্ত লিঙ্ক লক্ষ্য। আইটেমগুলি ক্লিকযোগ্য হলে, হোভার এবং ফোকাসে বিরতি দিন। একটি লিঙ্ক যা কেউ পৌঁছানোর সাথে সাথে দূরে সরে যায় তা অক্ষরে না থাকলে WCAG 2.2 এর লক্ষ্য-আকারের প্রত্যাশাগুলিকে ব্যর্থ করে।
- স্ক্রিন রিডাররা দুবার পড়ছে। ডুপ্লিকেট ট্র্যাকটি দুবার ঘোষণা করা হয় যদি না আপনি অ্যাক্সেসিবিলিটি ট্রি থেকে দ্বিতীয় কপিটি লুকিয়ে রাখেন। একটি বৈশিষ্ট্য এটি ঠিক করে।
এর কোনটিই মার্কিকে খারাপ ধারণা দেয় না। এটি একটি আনকনফিগার করা একটি খারাপ ধারণা করে তোলে।
প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী
Elementor একটি marquee উইজেট আছে?
মূলে নয়। এলিমেন্টরের ফ্রি বা প্রো প্লাগইনে কোনো ডেডিকেটেড মার্কি বা টিকার উইজেট নেই। আপনি একটি অ্যাডন (অটোপ্লে বিলম্ব সহ বিনামূল্যের লোগো স্লাইডার শূন্যে সেট করা, বা পাঠ্য স্ক্রোল করার জন্য নিউজ টিকার) বা নিজে CSS লিখে প্রভাব পাবেন। এখানে কিছুই মার্কি উইজেট হিসাবে বিক্রি হয় না; নিউজ টিকার (প্রো) হল সবচেয়ে কাছের উদ্দেশ্য-নির্মিত জিনিস, যেহেতু ক্রমাগত স্ক্রোল করাই এর জন্য, তবে এটি নির্বিচারে বিষয়বস্তুর পরিবর্তে শিরোনাম স্ট্রিপের চারপাশে আকার ধারণ করে।
আমি কিভাবে এলিমেন্টরে ক্রমাগত টেক্সট স্ক্রোল করব?
দুটি বিকল্প। নিউজ টিকার উইজেট এটিকে সেটিংস সহ পরিচালনা করে, যার মধ্যে একটি পোস্ট ক্যোয়ারী থেকে শিরোনাম টানা। অথবা একটি ডুপ্লিকেট কন্টেন্ট ট্র্যাক এবং একটি CSS কীফ্রেম অ্যানিমেটিং সহ একটি HTML উইজেট যোগ করুন translateX প্রতি -50% একটি রৈখিক অসীম লুপে।
কেন আমার মার্কি লাফ দেয় বা তোতলাতে থাকে যখন এটি লুপ হয়?
ট্র্যাকটি নকল করা হয়নি, বা অ্যানিমেশন দূরত্ব একটি কপির প্রস্থের সাথে মেলে না৷ একটি মার্কির বিষয়বস্তুর দুটি অভিন্ন অনুলিপি এবং একটি অ্যানিমেশন প্রয়োজন যা মোট ট্র্যাকের প্রস্থের ঠিক 50% সরে যায়৷ অন্য কোন দূরত্ব এবং আপনি প্রতিটি চক্রে একটি দৃশ্যমান স্ন্যাপ দেখতে পাবেন।
আমি কিভাবে হোভারে একটি মার্কি বিরতি করব?
লোগো স্লাইডার উইজেটের সাথে এটি ক্যারোজেল সেটিংসে একটি টগল। CSS এ এটা আছে animation-play-state: paused ধারক ঘোরাঘুরি উপর। যোগ করুন :focus-within পাশাপাশি :hover তাই কীবোর্ড ব্যবহারকারীরা একই বিরতি পান।
আমি কি এলিমেন্টরে একটি উল্লম্ব মার্কি তৈরি করতে পারি?
হ্যাঁ. অ্যানিমেট translateY পরিবর্তে translateX, একটি নির্দিষ্ট ধারক উচ্চতা সেট করুন, এবং একটি সারির পরিবর্তে একটি কলামে সদৃশ ট্র্যাক স্ট্যাক করুন৷ উল্লম্ব marquees স্যুট প্রশংসাপত্র স্ট্রিপ এবং বিজ্ঞপ্তি ফিড লোগো থেকে ভাল।
HTML মার্কি ট্যাগ কি এখনও সমর্থিত?
ব্রাউজার এখনও রেন্ডার <marquee>, কিন্তু এটি বছরের পর বছর ধরে অবমূল্যায়িত হয়েছে, এটি এইচটিএমএল স্পেকের মধ্যে নেই এবং এটি আপনাকে সহজ করা, বিরতি দেওয়া বা হ্রাস-গতির উপর কোন নিয়ন্ত্রণ দেয় না। পরিবর্তে CSS অ্যানিমেশন ব্যবহার করুন: একই প্রভাব, ভাল আচরণ, এবং এটি ভবিষ্যতে ব্রাউজার রিলিজে অদৃশ্য হবে না।
কোন পদ্ধতি ব্যবহার করতে হবে
লোগো: বিনামূল্যের লোগো স্লাইডার, অটোপ্লে বিলম্ব শূন্য। দুই মিনিটের মধ্যে সম্পন্ন এবং এটি আপনার জন্য প্রতিক্রিয়াশীল ঘনত্ব পরিচালনা করে।
বিশের কেউ নয় উইজেট নির্মাতা ডিজাইন একটি মার্কি, তাই লোগো স্লাইডার এই কাজের জন্য টুল থাকে। দ্য মূল্য পৃষ্ঠা আপনি যদি উদ্দেশ্য-নির্মিত সংস্করণ চান তাহলে নিউজ টিকার কোথায় বসে তা দেখায়।
স্ক্রলিং শিরোনাম: নিউজ টিকার, কারণ ক্যোয়ারী সোর্স এবং ফিক্সড লেবেল তাদের নিজস্ব লাইসেন্সের মূল্য।
অন্য কিছু: সিএসএস। এটি সংক্ষিপ্ত, এটি আপনার, এবং কিছুই এটিকে অবমূল্যায়ন করতে পারে না। স্বতন্ত্র স্লাইডার নির্মাতারা ক্রমাগত ট্র্যাক করতে পারেন, এবং স্লাইডার প্লাগইন তুলনা তারা পৃষ্ঠা খরচ কি কভার।
সমস্ত ক্যারোজেল এবং স্লাইডার উইজেট, যেগুলি মার্কি ডিউটি করে, সেগুলি সহ, সংগ্রহ করা হয়৷ এলিমেন্টর ক্যারোজেল উইজেট পৃষ্ঠা, সহ 20টি আমদানিযোগ্য ক্যারোজেল এবং স্লাইডার ডিজাইন, তাদের মধ্যে 8টি বিনামূল্যে। ক্যাশিং প্লাগইন আপডেটের পরে যদি আপনার মার্কি খারাপ আচরণ করে, তাহলে ঠিক হয়ে যায় সুইপার স্লাইডার সমস্যা সমাধানের নির্দেশিকা এখানেও আবেদন করুন।
