কীভাবে এলিমেন্টরে স্ক্রলে স্টিকি হেডারের রঙ পরিবর্তন করবেন

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

ডিজাইন পদ্ধতি

যদি আপনি ইতিমধ্যেই না করে থাকেন, তাহলে আপনাকে একটি কাস্টম হেডার টেমপ্লেট তৈরি করতে থিম নির্মাতা ব্যবহার করতে হবে। আপনার লোগোটিকে একটি ইমেজ উইজেটে এবং একটি দুই-কলাম হেডার বিভাগে একটি নেভিগেশন উইজেটে রেখে শুরু করুন।

উন্নত ট্যাব

বিভাগ নিয়ন্ত্রণের উন্নত ট্যাবটি নিম্নলিখিত পদক্ষেপগুলির জন্য ব্যবহার করা হবে।

মার্জিন সেটিংস

একটি স্বচ্ছ শিরোনাম তৈরি করার সবচেয়ে সাধারণ উপায় হল বিভাগটিকে তার উচ্চতার সমান একটি নেতিবাচক মার্জিন দেওয়া। উন্নত ট্যাবে মার্জিন নিয়ন্ত্রণগুলি আনলক করুন এবং নীচে একটি নেতিবাচক মান সেট করুন (উদাহরণ: -125px)। এটি হেডারের নিচের অংশটিকে পৃষ্ঠার শীর্ষে নিয়ে যাবে।

জেড-সূচক

এটি সর্বদা বিষয়বস্তুর শীর্ষে রয়েছে তা নিশ্চিত করতে আপনাকে বিভাগটির Z-সূচক বাড়াতে হবে। আপনি আপনার ওয়েবসাইটের বাকি বিষয়বস্তুর চেয়ে বড় যেকোনো সংখ্যা লিখতে পারেন, কিন্তু অনেক ডিজাইনার 1,000 ব্যবহার করেন।

স্টিকি সেটিংস

মোশন ইফেক্টস অ্যাকর্ডিয়ন থেকে স্টিকি বিকল্পটি নির্বাচন করুন এবং শীর্ষে সেট করুন।

প্রভাব যোগ করা

এখন যেহেতু আমরা একটি মৌলিক স্বচ্ছ শিরোনাম বিভাগ তৈরি করেছি, আমরা স্ক্রলিং প্রভাব যুক্ত করব।

স্টাইল ট্যাব

বিভাগ নিয়ন্ত্রণের স্টাইল ট্যাবটি নিম্নলিখিত পদক্ষেপগুলির জন্য ব্যবহার করা হবে।

চূড়ান্ত রঙ

রঙ চয়নকারীতে চূড়ান্ত পটভূমি বা গ্রেডিয়েন্টের রঙ সেট করুন।

স্ক্রলিং প্রভাব

কন্ট্রোল প্যানেলে স্ক্রোলিং ইফেক্টস সিলেক্টর টগল করুন।

মান সেট করুন

কাঙ্খিত প্রভাব অর্জনের জন্য আমাদের এখন ভিউপোর্ট স্লাইডারের মানগুলি সামঞ্জস্য করতে হবে। আপনার পৃষ্ঠার অবস্থানে স্ক্রোল করুন যেখানে আপনি সম্পূর্ণ অস্বচ্ছতা চান এবং আপনার শিরোনাম সম্পূর্ণ অস্বচ্ছ না হওয়া পর্যন্ত শীর্ষ মান কমিয়ে দিন (উদাহরণ: 25%)। আপনি এখন নীচের মান বাড়াতে পারেন। পূর্ববর্তী উদাহরণে, আমরা প্রভাবটি দ্রুত ঘটতে চাই, তাই আমরা মানগুলি একসাথে খুব কাছাকাছি সেট করি (উদাহরণ: 22%)। এর ফলে একটি 3% পৃষ্ঠার স্ক্রলে প্রভাব দেখা যাবে।

মোড়ক উম্মচন

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