মার্কেই ছাড়া HTML5 এবং CSS3 তে স্ক্রোলযোগ্য সামগ্রী তৈরি করা

আপনি যারা দীর্ঘ সময় ধরে এইচটিএমএল লেখেন তারা উপাদানটি মনে করতে পারেন এটি একটি ব্রাউজার-নির্দিষ্ট উপাদান যা পর্দার স্ক্রোলিংয়ের একটি ব্যানার তৈরি করেছিল। এই উপাদানটিকে HTML স্পেসিফিকেশনে এবং সমর্থন জুড়ে এটি জুড়ে দেওয়া হয়নি এটি ব্রাউজারগুলিতে ব্যাপকভাবে বৈচিত্রময়। মানুষ প্রায়ই এই উপাদান ব্যবহার সম্পর্কে খুব দৃঢ় মতামত ছিল - উভয় ইতিবাচক এবং নেতিবাচক তবে আপনি যদি পছন্দ করেন বা ঘৃণা করেন তবে এটি এমন সামগ্রী তৈরি করার উদ্দেশ্যে পরিবেশন করা হয়েছিল যা বাক্সের সীমানাগুলি দৃশ্যমান হবে।

কারণ এটি একটি ব্রাউজার দ্বারা পুরোপুরি প্রয়োগ করা হয় নি, দৃঢ় ব্যক্তিগত মতামত থেকে দূরে, এটি একটি দৃশ্যগত প্রভাব হিসাবে বিবেচনা করা হয় এবং যেমন ছিল, এটি এইচটিএমএল দ্বারা সংজ্ঞায়িত করা উচিত নয়, যা কাঠামো সংজ্ঞায়িত পরিবর্তে, দৃশ্যমান বা উপস্থাপনা প্রভাব CSS দ্বারা পরিচালিত করা উচিত। এবং CSS3 উপাদানগুলি মার্কে প্রভাব প্রভাব কিভাবে ব্রাউজার নিয়ন্ত্রণ করতে marquee মডিউল যোগ করা

নতুন CSS3 বৈশিষ্ট্যাবলী

CSS3 আপনার বৈশিষ্ট্য মার্কি মধ্যে প্রদর্শন কিভাবে নিয়ন্ত্রণ করতে সাহায্য করার জন্য পাঁচটি নতুন বৈশিষ্ট্য যোগ করে: ওভারফ্লো-শৈলী, marquee- শৈলী, marquee- খেলা গণনা, marquee- দিক এবং মার্কি গতি।

ওভারফ্লো-শৈলী
ওভারফ্লো-স্টাইলের সম্পত্তি (যা আমি আর্টিকেল সিএসএস ওভারফ্লোতে আলোচনা করেছি) বিষয়বস্তু বাক্সের উপর ওভারফ্লো করে এমন সামগ্রীগুলির জন্য পছন্দসই স্ট্রিংটি সংজ্ঞায়িত করে। যদি আপনি মার্কে-লাইন বা মার্কে-ব্লকের মান সেট করেন তাহলে আপনার সামগ্রী বাম / ডানে (মার্কে-লাইন) বা উপরে / নীচের (মার্কি-ব্লক) স্লাইড এবং স্লাইড করবে।

তাবু-শৈলী
এই সম্পত্তিটি কীভাবে বিষয়বস্তু (এবং আউট) দৃশ্যমান হবে তা নির্ধারণ করে।

অপশন স্ক্রল, স্লাইড এবং বিকল্প। স্ক্রোল সম্পূর্ণ পর্দা বন্ধ কন্টেন্ট সঙ্গে শুরু হয়, এবং তারপর এটি দৃশ্যমান এলাকা জুড়ে প্রসারিত পর্যন্ত এটি আবার সব সম্পূর্ণরূপে পর্দা হয়। স্লাইড পর্দার সম্পূর্ণরূপে বন্ধ করা কন্টেন্ট সঙ্গে শুরু হয় এবং তারপর এটি জুড়ে প্রসারিত পর্যন্ত বিষয়বস্তু পর্দায় সম্পূর্ণরূপে স্থানান্তরিত হয় এবং স্ক্রিন উপর স্লাইড করতে আর কন্টেন্ট নেই।

অবশেষে, বিকল্পটি পাশ থেকে পাশে সরিয়েছে, পিছনে পিছনে সরানো।

তাবু প্লে গোনা
মারাকি উপাদানটি ব্যবহার করার দুর্বলতাগুলির মধ্যে একটি হলো মার্কিটি কখনও বন্ধ হয় না। কিন্তু শৈলী সম্পত্তি marquee- খেলার গণনা সঙ্গে আপনি একটি নির্দিষ্ট সংখ্যক বার জন্য কন্টেন্ট ঘোরানো এবং বন্ধ করতে marquee সেট করতে পারেন।

তাবু-দিক
আপনি পর্দা স্ক্রল করা উচিত বিষয়বস্তু যে দিক চয়ন করতে পারেন। ওভারফ্লো-স্টাইলটি মার্কি-ব্লক যখন ওভারফ্লো-স্টাইল মার্কি-লাইন এবং আপ বা ডাউন থাকে তখন পাঠের দিকনির্দেশের উপর ভিত্তি করে এগিয়ে এবং বিপরীত মানেরগুলি এগিয়ে ও বিপরীত হয়।

মার্কেস-দিকনির্দেশনা বিবরণ

ওভারফ্লো-শৈলী ভাষা নির্দেশনা অগ্রবর্তী বিপরীত
তাবু-লাইন LTR বাম অধিকার
RTL অধিকার বাম
তাবু-ব্লক আপ নিচে

তাবু গতির
এই সম্পত্তিটি স্ক্রীনে সামগ্রী স্ক্রোলগুলি কত দ্রুত নির্ধারণ করে তা নির্ধারণ করে। মান ধীর, স্বাভাবিক, এবং দ্রুত। প্রকৃত গতিটি বিষয়বস্তু এবং ব্রাউজারটি প্রদর্শন করে তা নির্ভর করে, তবে মানটি ধীর গতির স্বাভাবিকের চেয়ে ধীর হওয়া আবশ্যক যা দ্রুততর গতির তুলনায়।

মার্কেস প্রোপার্টি ব্রাউজার সাপোর্ট

সিএসএস মার্কি উপাদানগুলি কাজ করার জন্য আপনাকে বিক্রেতা প্রিফিক্স ব্যবহার করতে হতে পারে। অনুসরণ হিসাবে তারা:

সিএসএস 3 বিক্রেতার উপসর্গ
ওভারফ্লো-এক্স: মার্কে-লাইন; ওভারফ্লো-এক্স: -ওয়েবকিট-মার্কে;
তাবু-শৈলী -webkit-তাবু-শৈলী
তাবু প্লে গোনা -webkit-তাবু-পুনরাবৃত্তি
মার্কে-দিক: ফরোয়ার্ড | বিপরীত; -ওয়েবকিট-মার্কে-দিক: ফরোয়ার্ড | পিছন দিকে;
তাবু গতির -webkit-তাবু গতির
কোন সমতুল্য -webkit-তাবু-বৃদ্ধি

শেষ সম্পত্তি আপনি মার্কি পর্দায় কন্টেন্ট স্ক্রল হিসাবে পদক্ষেপ হিসাবে হওয়া উচিত কিভাবে বড় বা ছোট নির্ধারণ করতে পারবেন।

আপনার marquee কাজ করার জন্য, আপনি প্রথমে বিক্রেতার প্রিফিক্সড মানগুলি স্থাপন করা উচিত এবং তারপর CSS3 স্পেসিফিকেশন মানগুলির সাথে তাদের অনুসরণ করুন। উদাহরণস্বরূপ, এখানে একটি marquee জন্য যে সিএসএস টেক্সট থেকে স্ক্রোল একটি বাঁশ থেকে ডানদিকে 200x50 বক্স ভিতরে ডান বার।

{
প্রস্থ: 200px; উচ্চতা: 50 পিএক্স; সাদা স্থান: nowrap;
ওভারফ্লো গোপন;
ওভারফ্লো-X: -webkit-তাবু;
-ওয়েবকিট-মার্কে-দিক: ফরোয়ার্ড;
-ওয়েবকিট-মার্কে-স্টাইল: স্ক্রল;
-ওয়েবকিট-মার্কে-গতি: স্বাভাবিক;
-ওয়েবকিট-মার্কেস-বৃদ্ধি: ছোট;
-ওয়েবকিট-মার্কে-পুনরাবৃত্তি: 5;
ওভারফ্লো-এক্স: মার্কে-লাইন;
মার্কে-দিক: ফরওয়ার্ড;
মার্কেস-শৈলী: স্ক্রল;
মার্কেস-গতি: স্বাভাবিক;
মার্কেস-প্লে-গণনা: 5;
}