টাইমলাইন হলো আরেকটি অতিরিক্ত উপাদান যা একটি ওয়েবসাইটে যুক্ত করা যেতে পারে, যার মাধ্যমে বছরের পর বছর ধরে কোনো ব্যবসা বা কোম্পানির অগ্রগতি বা বিবর্তন তুলে ধরা যায় । এই দৃষ্টিনন্দন গ্রাফিকটি, যখন টাইপোগ্রাফি এবং অন্যান্য ভিজ্যুয়াল উপাদানের সাথে সুন্দরভাবে বিন্যস্ত করা হয়, তখন এটি সময়ের সাথে সাথে কোনো পরিষেবা বা পণ্যের গৃহীত পদক্ষেপগুলো চিত্রিত করতে পারে।
নীচে আপনি উল্লম্ব থেকে অনুভূমিক পর্যন্ত বিভিন্ন ধরনের ২৯টি টাইমলাইন পাবেন । আপনি অবশ্যই আপনার প্রয়োজন অনুসারে নিখুঁত টাইমলাইনটি খুঁজে পাবেন এবং ক্লায়েন্টের জন্য বা নিজের জন্য তৈরি করা ওয়েবসাইটের কোনো পৃষ্ঠায় এটি স্থাপন করতে পারবেন। এখানে খুব আকর্ষণীয় এবং দৃষ্টিনন্দন কিছু টাইমলাইনের একটি সংগ্রহ রয়েছে।
স্ক্রোল করে টাইমলাইন
HTML, CSS, এবং JavaScript দিয়ে তৈরি একটি টাইমলাইন, যা একটি মিনিমালিস্ট ডিজাইনে চমৎকারভাবে উপস্থাপন করা হয়েছে । এতে বাম দিকের বছরের তালিকার জন্য লাল এবং টাইপোগ্রাফি ও H2 হেডিংগুলোর জন্য কালো রঙের ওপর জোর দেওয়া হয়েছে। সবচেয়ে ভালো দিকটি হলো, আপনি পৃষ্ঠাটি স্ক্রল করে নিচে নামার সাথে সাথে বছরটি স্বয়ংক্রিয়ভাবে আপডেট হয়ে যায়। চমৎকার ফিনিশিং, ডিজাইন এবং ফলাফল।
সিএসএসে টাইমলাইন
এই টাইমলাইনটি এর কিছু বৈশিষ্ট্য কাস্টমাইজ করার জন্য CSS কোড ব্যবহার করে। আগেরটির মতো এতে স্ক্রলিং নেই , তবে এটিকে একটি মার্জিত রূপ দিতে এবং এই প্রকাশনার টাইমলাইনের তালিকায় যুক্ত করতে এতে একাধিক বক্স ও নীল রঙ ব্যবহার করা হয়েছে।
প্রতিক্রিয়াশীল টাইমলাইন স্লাইডার
এই টাইমলাইনটি HTML, CSS, এবং JavaScript কোড অন্তর্ভুক্ত করার জন্য Swiper JS লাইব্রেরি ব্যবহার করে তৈরি করা হয়েছে। ওয়েবপেজটি নেভিগেট করার সময় এটি স্ক্রল করে না, তবে এটি ডানদিকে বছরগুলো প্রদর্শন করে এবং পরবর্তী বছরে যাওয়ার জন্য একটি বাটনও রয়েছে। আপনি মাউস পয়েন্টার ব্যবহার করেও সরাসরি কোনো নির্দিষ্ট বছরে যেতে পারেন। প্রতিটি ট্রানজিশনের অ্যানিমেশনটি চমৎকার।
উন্নত টাইমলাইন
এই টাইমলাইনটি HTML, CSS, এবং JavaScript-এর ব্যবহার, সেইসাথে এর মনোক্রোম ডিজাইন , বিশেষত লাল রঙের বিভিন্ন শেডের জন্য বিশেষভাবে নজর কাড়ে। এতে একটি বাটনও রয়েছে যা ব্যবহারকারীদের টাইমলাইনে সামনে বা পেছনে যেতে সাহায্য করে, ফলে এটি একটি অত্যন্ত কার্যকর ও মিনিমালিস্ট ডিজাইনে পরিণত হয়েছে।
স্থির শিরোনাম এবং ফ্লেক্সবক্স সহ টাইমলাইন
একটি ফিক্সড হেডারের জন্য HTML এবং CSS কোড, যা পেজটি স্ক্রল করার সাথে সাথেও নিজের জায়গায় স্থির থাকবে । এটি অত্যন্ত সূক্ষ্ম এবং যেকোনো আধুনিক ওয়েব ডেভেলপারের জন্য একটি মূল্যবান বৈশিষ্ট্য, যারা বর্তমান ওয়েব ডিজাইন মান মেনে চলার মাধ্যমে নিজেদের স্বতন্ত্রভাবে উপস্থাপন করতে চান।
প্রকল্প টাইমলাইনে
এই টাইমলাইনটি একটি নির্দিষ্ট প্রকল্পের সময়কালের গুরুত্বপূর্ণ ঘটনাপ্রবাহ তুলে ধরতে CSS এবং HTML ব্যবহার করে । আপনি স্ক্রল করার সাথে সাথে এটি সপ্তাহের দিনগুলো ধরে এগিয়ে যায়, যা এটিকে কোম্পানির নিজস্ব তৈরি করা সহযোগিতামূলক টুলগুলোতে ব্যবহারের জন্য আদর্শ করে তোলে।
Timeline
HTML, CSS, এবং JavaScript দিয়ে তৈরি একটি টাইমলাইন , যা এর ভিজ্যুয়াল ডিজাইনের কারণে অন্যদের থেকে স্বতন্ত্র । আপনি যখন ভার্টিকাল টাইমলাইনটি স্ক্রল করবেন, তখন প্রতিটি নতুন ছবি স্বয়ংক্রিয়ভাবে সেই ওয়েবপেজের ব্যাকগ্রাউন্ড ইমেজ হয়ে যাবে যেখানে এই কোডটি অবস্থিত।
হাইপারলুপ
হাইপারলুপু হলো একটি টাইমলাইন যা মূলত এর ডিজাইন এবং সম্পূর্ণভাবে এইচটিএমএল (HTML) ও সিএসএস (CSS)-এ প্রোগ্রাম করা হওয়ার কারণে স্বতন্ত্র । এর বৈশিষ্ট্য হলো বিভিন্ন আকারের ফন্ট, একটি উল্লম্ব রেখা এবং একাধিক বক্সের ব্যবহার, যা টাইমলাইনের প্রতিটি গুরুত্বপূর্ণ মুহূর্তকে চিহ্নিত করে।
উল্লম্ব সময়রেখা
বিভিন্ন সময়কালে বিভক্ত একটি টাইমলাইন, যা এর দৃশ্যগত শৈলীর কারণে অন্যদের থেকে স্বতন্ত্র । এতে একটি আধুনিক গ্রেডিয়েন্ট ব্যাকগ্রাউন্ড এবং প্রতিটি সময়কাল চিহ্নিত করার জন্য একাধিক বক্স রয়েছে। এটি CSS এবং HTML ব্যবহার করে প্রোগ্রাম করা হয়েছে।
ফ্লেক্সবক্সে টাইমলাইন
এটি অন্যতম পরিশীলিত একটি টাইমলাইন, যেখানে একটি নির্দিষ্ট সময়কালের জন্য প্রয়োজনীয় সমস্ত তথ্য অন্তর্ভুক্ত করতে কার্ড ব্যবহার করা হয় । এটিও HTML এবং CSS-এ তৈরি করা হয়েছে। এটি মনে রাখা গুরুত্বপূর্ণ যে, বড় স্ক্রিনে সঠিক প্রদর্শন নিশ্চিত করার জন্য সমস্ত কার্ডের উচ্চতা এবং প্রস্থ একই হতে হবে।
ডিআইভিতে টাইমলাইন
শুধুমাত্র HTML এবং CSS ব্যবহার করে তৈরি একটি মিনিমালিস্ট টাইমলাইন ডিজাইন , যা দ্রুত বাস্তবায়ন করা যায়। এর মনোক্রোম ফিনিশ এটিকে সংবাদ মাধ্যমে টাইমলাইন উপস্থাপনের জন্য নিখুঁত করে তোলে।
সিএসএস এবং এইচটিএমএলে টাইমলাইন
আপনি এই টাইমলাইনে ৪০০x৩০০ আকারের ছবি রাখতে পারেন , যার অন্যতম বৈশিষ্ট্য হলো তারিখ ও দিনের লাইন এবং লেখাগুলোর সবুজ রঙ। এতে কোনো অ্যানিমেশন নেই এবং এর সব স্তরের সরল ডিজাইনই এর প্রধান বৈশিষ্ট্য।
মন্তব্য এবং প্রতিক্রিয়া টাইমলাইন
এই টাইমলাইনটি অন্যগুলোর থেকে বেশ আলাদা, কারণ এটি ব্যবহারকারীদের তাদের ছবি দিয়ে কার্ড যোগ করার সুযোগ দেয় , বা অন্তত সেটাই এর প্রাথমিক উদ্দেশ্য। একটি শক্তিশালী ভিজ্যুয়াল স্টাইলের পাশাপাশি, কার্ডগুলোতে শেডিং ব্যবহার করা হয়েছে, যা টাইমলাইনটিকে অন্যথায় বেশ সমতল করে তুলেছে এবং এতে কোনো অ্যানিমেশন নেই।
এইচটিএমএল এবং সিএসএসে টাইমলাইন সকাল
রেসপন্সিভ ডিজাইনের জন্য এটি একটি নিখুঁত টাইমলাইন, যার বৈশিষ্ট্য হলো এটি HTML ও CSS দিয়ে তৈরি এবং বেশ সহজ অথচ খুবই মোবাইল-বান্ধব।
টাইমলাইন ইউআই
এই HTML এবং CSS কোডটি একটি প্রশিক্ষণ সেশনের কাজের সময়সূচী উপস্থাপনের জন্য উপযুক্ত । এটি রেসপন্সিভ, এবং এতে একটি হেডার ইমেজ ও একাধিক বাটন রয়েছে যা তথ্যগুলোকে অত্যন্ত স্পষ্ট এবং দৃষ্টিনন্দনভাবে প্রদর্শন করে।
কেবল সিএসএসে টাইমলাইন
এই টাইমলাইনটির প্রধান বৈশিষ্ট্য হলো এর CSS ডিজাইন এবং লাল ও সবুজ রঙের একটি সুচিন্তিত বিন্যাস। সবুজ রঙ পুরো পৃষ্ঠা জুড়ে রয়েছে, সাদা রঙ লেখা ও বিভাজকের জন্য ব্যবহৃত হয়েছে এবং লাল রঙ বর্তমান সময়কালকে নির্দেশ করে। প্রতিটি সময়কালের উপর ক্লিক করলে সেটিকে ঘিরে একটি বাক্সসহ হাইলাইট করা হয়।
প্রতিক্রিয়াশীল টাইমলাইন ভি 3
তালিকার প্রথম হরাইজন্টাল টাইমলাইনটি HTML, CSS, এবং JavaScript দিয়ে তৈরি করা হয়েছে। কালো ও ধূসর রঙ ব্যবহার করে একটি হরাইজন্টাল লাইন এবং তার সাথে একাধিক বিন্দুর ব্যবহারের কারণে এটি দেখতে বেশ আকর্ষণীয়। প্রতিটি ব্যবধানকে বর্ধিত ফন্ট ওয়েট এবং টেক্সট কন্টেন্ট দিয়ে হাইলাইট করা হয়েছে।
টাইমলাইন রঙে nestled
তালিকার অন্যতম সেরা মানের হরাইজন্টাল টাইমলাইনগুলোর মধ্যে এটি একটি । এটি একটি অত্যন্ত ইন্টারেক্টিভ টাইমলাইন, যেখানে রয়েছে সূক্ষ্ম ও সুন্দরভাবে উপস্থাপিত অ্যানিমেশন, যা প্রতিবার একটি নির্দিষ্ট সময়সীমায় ক্লিক করার সাথে সাথে ব্যবহারকারীকে একটি চমৎকার অভিজ্ঞতা প্রদান করে। এটি HTML, CSS/Sass, এবং JavaScript/TypeScript (jquery.js) দিয়ে তৈরি ।
প্রতিক্রিয়াশীল ইতিহাস টাইমলাইন
একটি ঐতিহাসিক কালপর্বের বিভিন্ন ঘটনা দৃশ্যমানভাবে প্রদর্শনের জন্য এটি একটি নিখুঁত টাইমলাইন । এটি HTML, CSS, এবং JavaScript ব্যবহার করে তৈরি করা হয়েছে এবং এটি হরাইজন্টাল ও রেসপন্সিভ।
গ্রুপ টাইমলাইন
এই টাইমলাইনটি এর সুনিপুণভাবে সম্পাদিত হরাইজন্টাল অ্যানিমেশন ট্রানজিশনের জন্য বিশেষভাবে উল্লেখযোগ্য । এতে রয়েছে প্রাণবন্ত রঙ এবং একটি চমৎকার ডিজাইন যা প্রতিটি সময়কালকে ফুটিয়ে তোলে। HTML, CSS, এবং JavaScript দিয়ে নির্মিত এই টাইমলাইনটিতে একটি প্রতিনিধিত্বমূলক ব্যাকগ্রাউন্ড ইমেজের উপর একাধিক কার্ড সাজানো রয়েছে।
অনুভূমিক সিএসএস এবং এইচটিএমএল টাইমলাইন
সুপরিচিত Envato Tuts+ দ্বারা নির্মিত এই টাইমলাইনটিতে একটি অনুভূমিক বিন্যাস এবং একাধিক পরিচ্ছন্ন ও সাধারণ কার্ড রয়েছে। এতে ফ্ল্যাট রঙ এবং একটি অনুভূমিক রেখা ব্যবহার করা হয়েছে, যার উপর লাল বিন্দুর একটি সারি প্রতিটি ব্যবধান চিহ্নিত করে।
টাইমলাইন সিএসএস, এইচটিএমএল এবং স্লিক.জে এস
টাইমলাইনটির নকশায় ব্যবহৃত প্যাস্টেল টোনগুলো প্রতিটি সময়কালকে প্রতিনিধিত্বকারী ছবিগুলোর উপস্থাপনার জন্য স্বতন্ত্র হয়ে উঠেছে । প্রতিটি ছবি ও সময়কালের মধ্যকার রূপান্তরই এই টাইমলাইনটিকে সত্যিই অসাধারণ করে তুলেছে।
টাইমলাইন ক্রম ভি 1
একটি টাইমলাইন, যার প্রতিটি উল্লম্ব লাইনে থাকা বাটনগুলোর মাধ্যমে প্রতিবার চাপ দিলে একটি পূর্ণ-স্ক্রিনের ব্যাকগ্রাউন্ড ইমেজ লিঙ্ক হয়।
অনুভূমিক টাইমলাইন এইচটিএমএল সিএসএস
এই টাইমলাইনের কোথাও আপনি ক্লিক করতে পারবেন না, যা এর চমৎকার ডিজাইন, রঙের বিচক্ষণ নির্বাচন এবং প্রতিটি টাইমলাইনের জন্য থাকা একাধিক স্পিচ বাবলের কারণে স্বতন্ত্র। এতে কোনো অ্যানিমেশন নেই, কিন্তু এটি দেখতে খুবই মনোরম।
কোডি হাউস টাইমলাইন
কোডিহাউস দ্বারা উপস্থাপিত এই টাইমলাইনটি একটি মনোক্রোম ডিজাইনের এবং এটি HTML, CSS, ও জাভাস্ক্রিপ্ট ব্যবহার করে নির্মিত। এতে একটি মিনিমালিস্ট লাইন রয়েছে, যার মধ্যে থাকা একাধিক পয়েন্ট ব্যবধান হিসেবে কাজ করে এবং ক্লিক করলে আধা সেকেন্ডেরও কম সময়ের একটি হরাইজন্টাল অ্যানিমেশন চালু করে। সরল, কিন্তু অত্যন্ত কার্যকর।
অনুভূমিক টাইমলাইন
HTML, CSS, এবং JavaScript দিয়ে তৈরি আরও একটি টাইমলাইন। এর একরঙা নকশার জন্য এটি বিশেষভাবে পরিচিত । এতে একটি মার্জিত বিন্যাস রয়েছে, যেখানে প্রতিটি সময়কাল নির্দেশকারী বিন্দুকে সবুজ রঙের ছোঁয়ায় ফুটিয়ে তোলা হয়েছে। প্রতিবার কোনো বিন্দুতে ক্লিক করলে একটি মসৃণ সাইড-স্ক্রোলিং অ্যানিমেশন শুরু হয়।
নামহীন টাইমলাইন
তালিকার একমাত্র টাইমলাইনটির পটভূমি কালো। এরপর প্রতিটি বছর ও লেখা, এবং তার সীমানাগুলোকে আলাদা করতে বিভিন্ন রঙ ব্যবহার করা হয়েছে। প্রতিটি লেখার মধ্যে একটি সুস্পষ্ট অ্যানিমেশন রূপান্তর ঘটায়।
টাইমলাইন
এই টাইমলাইনটি সবুজ রঙকে সম্পূর্ণ স্থির হিসেবে তুলে ধরে।
আরেকটি অনুভূমিক টাইমলাইন
আপনি প্রায় পূর্ণ-স্ক্রিনের একটি ছবি রেখে এমন একটি টাইমলাইন তৈরি করতে পারেন, যা নীল ও ধূসর রঙের ব্যবহার এবং প্রতিটি বছরকে প্রতিনিধিত্বকারী একাধিক বৃত্তের কারণে স্বতন্ত্র হয়ে ওঠে।
CSS এবং HTML-এ মেনু বিষয়ক আরও একটি সিরিজ দেখতে ভুলবেন না ।