সিএসএসে এবং জাভাস্ক্রিপ্টের বিট সহ 29 দুর্দান্ত ডিজাইনের টাইমলাইন

সময়রেখা স্ক্রোল করুন

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

এই 29 টি টাইমলাইন যা আপনি নীচে পাবেন are উল্লম্ব সময়সীমা থেকে দিগন্তগুলি হবে। আপনি নিজের ক্লায়েন্টের জন্য বা নিজের জন্য বিকাশ করছেন এমন একটি পৃষ্ঠায় এটি সন্ধান করার জন্য আপনার প্রয়োজন অনুসারে সেরাটি খুঁজে পাবেন। আমরা খুব আকর্ষণীয় টাইমলাইনের একটি সংকলন নিয়ে যাচ্ছি যা খুব দৃষ্টি আকর্ষণীয়।

সূচক

স্ক্রোল করে টাইমলাইন

সময়রেখা স্ক্রোল করুন

গুপ্তচরভাবে নিজেকে এ হিসাবে স্থাপন করার জন্য একটি টাইমলাইন যা এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্ট কোডে রয়েছে ভাল মিনিমালিস্ট যা বাম পাশে বছরের তালিকার জন্য অ্যাকসেন্টকে লাল রঙে রাখে এবং ফন্ট এবং এইচ 2 এর জন্য কালো রঙে রাখে। এই টাইমলাইনের সেরা জিনিসটি আপনি পৃষ্ঠাটি স্ক্রোল করার সাথে সাথে বছরের পরিবর্তনটি স্বয়ংক্রিয়ভাবে তৈরি হয়ে যাবে। দুর্দান্ত ফিনিস, ডিজাইন এবং ফলাফল।

সিএসএসে টাইমলাইন

সিএসএস টাইমলাইন বৈশিষ্ট্য

এই টাইমলাইনটি এর কয়েকটি বৈশিষ্ট্যে সঠিকভাবে কনফিগার করতে সক্ষম হতে CSS কোড ব্যবহার করে। এতে স্ক্রোলিং হয় না আগেরটির মতো তবে এটি অন্য খুব মার্জিত ছোঁয়া দেওয়ার জন্য এবং এই প্রকাশনার টাইমলাইনের তালিকায় যোগ দেওয়ার জন্য এটি স্কোয়ারগুলির একটি ধারাবাহিক এবং নীল রঙ দ্বারা চিহ্নিত ized

প্রতিক্রিয়াশীল টাইমলাইন স্লাইডার

প্রতিক্রিয়াশীল টাইমলাইন স্লাইডার

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

উন্নত টাইমলাইন

উন্নত টাইমলাইন

এই টাইমলাইনটি এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্ট বাদে আলাদা করে দেখাবে একচেটিয়া মধ্যে যানঅবিকল লাল টোনগুলিতে। এটি এমন একটি বোতামের ব্যবহার দ্বারাও চিহ্নিত করা হয়েছে যা আপনাকে দুর্দান্ত সংখ্যায় ন্যূনতম হতে পারে এই দুর্দান্ত রেজাল্ট কোড দ্বারা চিহ্নিত টাইমলাইনে আপনাকে অগ্রসর হতে বা ফিরে যেতে দেয়।

স্থির শিরোনাম এবং ফ্লেক্সবক্স সহ টাইমলাইন

টাইমলাইন স্থির

একটি স্থির শিরোনামের জন্য এইচটিএমএল এবং সিএসএস কোড আমরা স্ক্রোলিং করার মুহুর্তে এটি স্থির থাকবে পৃষ্ঠায় যে কোনও বর্তমান বিকাশকারী যিনি বর্তমান ওয়েব ডিজাইন মান দ্বারা হাইলাইট করতে চান তাদের জন্য দুর্দান্ত আগ্রহের একটি টাইমলাইন হওয়ার জন্য দুর্দান্ত সূক্ষ্মতা Of

প্রকল্প টাইমলাইনে

প্রকল্প টাইমলাইনে

এই টাইমলাইনটি ব্যবহারের জন্য একটি গুরুত্বপূর্ণ টাইমলাইন উপস্থাপন করতে CSS এবং এইচটিএমএল ব্যবহার করে সময় যে নির্দিষ্ট সময় একটি প্রকল্পের জন্য। যেহেতু আমরা এটিকে স্ক্রোল করছি সপ্তাহের দিনগুলি অতিক্রান্ত হয় তাই এটি সংস্থা কর্তৃক তৈরি সহযোগিতামূলক সরঞ্জামগুলির জন্য এটি কার্যকরভাবে নিখুঁত।

সময়রেখা

সময়রেখা

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

হাইপারলুপ

হাইপারলুপ

হাইপারলুপু একটি টাইমলাইন যা বরং ব্যবহৃত নকশা জন্য দাঁড়িয়েছে এবং এইচটিএমএল এবং সিএসএস ব্যতীত আর কিছু নয় প্রোগ্রাম করার জন্য। এটি উলম্ব রেখা এবং টাইমলাইনের প্রতিটি গুরুত্বপূর্ণ মুহুর্তকে চিহ্নিত করে এমন একটি সিরিজের বাক্স সহ পাঠ্যের ফন্টে বিভিন্ন আকারের ব্যবহার দ্বারা চিহ্নিত করা হয়েছে।

উল্লম্ব সময়রেখা

উল্লম্ব সময়রেখা

একটি বিরতি টাইমলাইন যে নিজেকে তার চাক্ষুষ স্পর্শ দ্বারা বিশ্রাম থেকে দূরে। এটির ডিজাইনের একটি খুব বর্তমান গ্রেডিয়েন্ট ব্যাকগ্রাউন্ড এবং একটি সিরিজের বাক্স রয়েছে যা প্রতিটি অন্তরকে চিহ্নিত করে। সিএসএস এবং এইচটিএমএল প্রোগ্রাম করা।

ফ্লেক্সবক্সে টাইমলাইন

টাইমলাইন ফ্লেক্সবক্স

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

ডিআইভিতে টাইমলাইন

টাইমলাইন ডিভ

ডিজাইনের একটি মিনিমালিস্ট টাইমলাইন এবং তা হয়েছে শুধুমাত্র এইচটিএমএল এবং সিএসএসে বিকাশ হয়েছে, সুতরাং এটির প্রয়োগ খুব দ্রুত হতে পারে। এটি একরঙা সমাপ্তির কারণে কোনও তথ্য মাধ্যমের একটি টাইমলাইন প্রকাশের জন্য একেবারে উপযুক্ত।

সিএসএস এবং এইচটিএমএলে টাইমলাইন

সিএসএস টাইমলাইন

আপনি রাখতে পারেন 400 × 300 আকারের চিত্র এই টাইমলাইনে লাইনগুলির সবুজ রঙ এবং তারিখ এবং দিনগুলির পাঠ্য দ্বারা আলাদা। এটির কোনও অ্যানিমেশন নেই এবং এটি সমস্ত স্তরের সাধারণ নকশা দ্বারা চিহ্নিত করা হয়েছে।

মন্তব্য এবং প্রতিক্রিয়া টাইমলাইন

টাইমলাইন মন্তব্য

অনুমতি দেওয়ার জন্য অন্যদের থেকে খুব আলাদা একটি টাইমলাইন ব্যবহারকারীদের ফটো সঙ্গে কার্ড রাখুন, বা কমপক্ষে এটি প্রথমে উদ্দেশ্য। দুর্দান্ত দর্শন শৈলীর সাথে কার্ডগুলি অ্যানিমেশন ছাড়াই বরং ফ্ল্যাট টাইমলাইনের জন্য শেডিং ব্যবহার করে।

এইচটিএমএল এবং সিএসএসে টাইমলাইন সকাল

প্রতিক্রিয়াশীল টাইমলাইন

প্রতিক্রিয়াশীল জন্য একটি নিখুঁত সময়রেখা এটি এইচটিএমএল, সিএসএস হয়ে বৈশিষ্ট্যযুক্ত এবং একটি মোটামুটি সহজ কিন্তু খুব মোবাইল টাইমলাইন অফার।

টাইমলাইন ইউআই

সময়রেখা

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

কেবল সিএসএসে টাইমলাইন

সিএসএস টাইমলাইন

এই টাইমলাইনটি সিএসএসে থাকা এবং একটি দ্বারা চিহ্নিত করা হয়েছে ভালভাবে নির্বাচিত রঙের সিরিজ: লাল এবং সবুজ। পুরো পৃষ্ঠাটি পুরোপুরি coverাকতে সবুজ, পাঠ্য এবং বিভাজক রেখাগুলির জন্য সাদা এবং আমরা যে সময়ের ব্যবধানে আছি তার মধ্যে আলাদা করতে লাল। এটি চারদিকে ঘিরে রয়েছে এমন একটি বাক্সের সাথে এটি স্থাপনের জন্য আমরা প্রতিটি বিরতিতে ক্লিক করতে পারি এবং এটি হাইলাইট করে।

প্রতিক্রিয়াশীল টাইমলাইন ভি 3

প্রতিক্রিয়াশীল টাইমলাইন ভি 3

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

টাইমলাইন রঙে nestled

নেস্টেড

অনুভূমিক সময়সীমার মধ্যে একটি তালিকায় সর্বোচ্চ ভিজ্যুয়াল মানের। খুব সূক্ষ্ম এবং ভালভাবে উপস্থাপিত অ্যানিমেশনগুলির সাথে একটি খুব ইন্টারেক্টিভ টাইমলাইন প্রতিটি সময় সময় অন্তরগুলির একটিতে চাপলে দুর্দান্ত ব্যবহারকারীর অভিজ্ঞতা প্রদান করে। এটি দিয়ে তৈরি করা হয় এইচটিএমএল সিএসএস / সাস এবং জাভাস্ক্রিপ্ট / টাইপসক্রিপ্ট (jquery.js).

প্রতিক্রিয়াশীল ইতিহাস টাইমলাইন

প্রতিক্রিয়াশীল গল্প

জন্য একটি নিখুঁত সময়রেখা ছবিতে বিভিন্ন ইভেন্ট প্রদর্শন করুন ইতিহাসের এক সময়ের স্লট। এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্টে বিকাশ করা এটি অনুভূমিক এবং প্রতিক্রিয়াশীল।

গ্রুপ টাইমলাইন

টাইমলাইন গ্রুপ

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

অনুভূমিক সিএসএস এবং এইচটিএমএল টাইমলাইন

অনুভূমিক এনভ্যাটো

তাঁর তৈরি এনভ্যাটো টুটস +, আমরা নকশায় পরিষ্কার এবং বেসিক কার্ডের সিরিজ সহ একটি অনুভূমিক টাইমলাইন উপস্থাপন করছি। ফ্ল্যাট রঙ এবং লাল বিন্দুগুলির একটি সিরিজ সহ একটি অনুভূমিক রেখা যা প্রতিটি অন্তরকে ইন্টারলক করে lock

টাইমলাইন সিএসএস, এইচটিএমএল এবং স্লিক.জে এস 

প্যাস্টেল টাইমলাইন

একটি টাইমলাইনের জন্য নকশায় প্যাস্টেল টোন ইমেজ প্রতিটি উপস্থাপনা জন্য দাঁড়িয়েছে প্রতিটি সময়ের বিরতি দেখাচ্ছে এটি প্রতিটি চিত্র এবং অন্তরগুলির মধ্যে স্থানান্তর যা এই টাইমলাইনটিকে আলাদা করে তোলে।

টাইমলাইন ক্রম ভি 1

টাইমলাইন ক্রম

একটি টাইমলাইন যা এর বাইরে দাঁড়িয়ে আছে প্রতিটি উল্লম্ব লাইন বোতাম প্রতিটি বিরতিতে প্রতিবার আমরা একটিতে টিপুন একটি পূর্ণ পর্দার পটভূমি চিত্র লিঙ্ক করতে।

অনুভূমিক টাইমলাইন এইচটিএমএল সিএসএস

টাইমলাইন এইচআর

এ দ্বারা হাইলাইট করা এই টাইমলাইনে আপনি কোথাও ক্লিক করতে পারবেন না রঙিন প্যালেটটির পছন্দমতো পছন্দ অনুসারে দুর্দান্ত নকশা এবং প্রতিটি টাইমলাইনের জন্য একটি সিরিজ স্যান্ডউইচ। কোনও অ্যানিমেশন নেই, তবে চাক্ষুষরূপে এটি চোখে খুব আনন্দিত।

কোডি হাউস টাইমলাইন

টাইমলাইন কোডি হাউস

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

অনুভূমিক টাইমলাইন

অনুভূমিক টাইমলাইন

এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্টে তৈরি আরেকটি টাইমলাইন। একক রঙ দ্বারা চিহ্নিত, এটি সময়ের ব্যবধানকে উপস্থাপন করে এমন প্রতিটি পয়েন্টে লেস রাখার জন্য একটি সবুজ রঙের সাথে একটি মার্জিত ডিজাইন রয়েছে। প্রতিবার আমরা একটি টিপলে খুব মসৃণ দিকের অ্যানিমেশনটি শুরু হয়।

নামহীন টাইমলাইন

নামহীন টাইমলাইন

নীচের তালিকা থেকে একমাত্র কালো টাইমলাইন। তারপরে তিনি ব্যবহার করেন প্রতি বছর এবং পাঠ্যকে আলাদা করার জন্য বিভিন্ন রঙ একই সাথে এটির সীমা। এটি প্রতিটি পাঠ্যের মধ্যে পাস করার জন্য একটি বিশিষ্ট অ্যানিমেশন রয়েছে।

টাইমলাইন

টাইমলাইন

এই টাইমলাইন রাখে সবুজ রঙে অ্যাকসেন্ট সম্পূর্ণ অচল হতে।

আরেকটি অনুভূমিক টাইমলাইন

আর একটি টাইমলাইন

এটা হতে পারে পূর্ণ পর্দার কাছে একটি চিত্র রাখুন এমন একটি টাইমলাইনের জন্য যা নীল এবং ধূসর রঙের প্লাস প্রতিবছর প্রতিনিধিত্ব করে এমন একাধিক চেনাশোনা ব্যবহার করে।

মিস করবেন না সিএসএস এবং এইচটিএমএলে মেনুগুলির আরও একটি সিরিজ.


নিবন্ধটির বিষয়বস্তু আমাদের নীতিগুলি মেনে চলে সম্পাদকীয় নীতি। একটি ত্রুটি রিপোর্ট করতে ক্লিক করুন এখানে.

মন্তব্য করতে প্রথম হতে হবে

আপনার মন্তব্য দিন

আপনার ইমেল ঠিকানা প্রকাশিত হবে না। প্রয়োজনীয় ক্ষেত্রগুলি দিয়ে চিহ্নিত করা *

*

*

  1. ডেটার জন্য দায়বদ্ধ: মিগুয়েল অ্যাঞ্জেল গাটান
  2. ডেটার উদ্দেশ্য: নিয়ন্ত্রণ স্প্যাম, মন্তব্য পরিচালনা।
  3. আইনীকরণ: আপনার সম্মতি
  4. তথ্য যোগাযোগ: ডেটা আইনি বাধ্যবাধকতা ব্যতীত তৃতীয় পক্ষের কাছে জানানো হবে না।
  5. ডেটা স্টোরেজ: ওসেন্টাস নেটওয়ার্কস (ইইউ) দ্বারা হোস্ট করা ডেটাবেস
  6. অধিকার: যে কোনও সময় আপনি আপনার তথ্য সীমাবদ্ধ করতে, পুনরুদ্ধার করতে এবং মুছতে পারেন।