স্ক্রল করার সাথে সাথে ব্যাকগ্রাউন্ড গ্রেডিয়েন্ট রঙ পরিবর্তন করা একটি আকর্ষণীয় ভিজ্যুয়াল ইফেক্ট। এটি শুধুমাত্র CSS দিয়ে সম্ভব, জাভাস্ক্রিপ্ট দরকার নেই।
উদাহরণ: স্ক্রলে গ্রেডিয়েন্ট পরিবর্তন
<!DOCTYPE html>
<html>
<head>
<style>
body {
height: 250vh;
color: white;
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(
141deg,
#a47dff 0%,
#4e28a7 40%,
#22053d 65%,
#72a4ff 75%
);
}
</style>
</head>
<body>
<h1>স্ক্রলে ব্যাকগ্রাউন্ড গ্রেডিয়েন্ট পরিবর্তন উদাহরণ</h1>
<p style="font-size: 30px;">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Repellendus, laborum minus? Vero accusantium laborum quas cum, sed obcaecati quibusdam dignissimos.
</p>
<h2 style="position:fixed;">ইফেক্ট দেখতে স্ক্রল করুন।</h2>
</body>
</html>
কোড ব্যাখ্যা
- height: 250vh: স্ক্রলবার তৈরি করার জন্য পেজের উচ্চতা ভিউপোর্টের ২৫০% করা হয়েছে।
- linear-gradient(141deg, ...): ১৪১ ডিগ্রি কোণে চারটি রঙের স্টপ দিয়ে গ্রেডিয়েন্ট তৈরি করা হয়েছে।
- position: fixed (h2-এ): নির্দেশনা টেক্সট স্ক্রল করার সময় এক জায়গায় থাকে।
মনে রাখব্য বিষয়
এই টেকনিকটি শুধুমাত্র CSS ব্যাকগ্রাউন্ড ইমেজ বা গ্রেডিয়েন্টের সাথে কাজ করে। কন্টেন্ট স্ক্রল হলে ব্রাউজার স্বয়ংক্রিয়ভাবে গ্রেডিয়েন্টের ভিন্ন অংশ দেখায়।
