CSS দিয়ে প্যারাল্যাক্স স্ক্রোলিং ইফেক্ট তৈরি

`background-attachment: fixed` ব্যবহার করে প্যারাল্যাক্স ইফেক্ট তৈরি করা যায় যেখানে ব্যাকগ্রাউন্ড ইমেজ স্ক্রল করার সময় ধীর গতিতে চলে।

উদাহরণ: প্যারাল্যাক্স ইফেক্ট

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
  body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    height: 100vh;
    margin: 0px;
    padding: 0px;
  }
  .parallax {
    background-image: url("https://i.picsum.photos/id/250/800/800.jpg");
    height: 100%;
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .parallaxText {
    font-size: 20px;
    height: 100%;
  }
</style>
</head>
<body>
  <div class="parallax"></div>
  <div class="parallaxText">
    <h1>কিছু র‍্যান্ডম টেক্সট</h1>
    <h1>কিছু র‍্যান্ডম টেক্সট</h1>
    <p> Lorem ipsum dolor, sit amet consectetur adipisicing elit. Facere, praesentium assumenda illum nisi minima libero accusamus adipisci aspernatur architecto qui aliquam quo similique eos vitae. Cum iste laboriosam vero excepturi eum sed ex fuga repellat accusantium officia rerum ducimus sequi maiores reprehenderit veniam corrupti, aspernatur explicabo nesciunt architecto voluptate! Consectetur. </p>
  </div>
  <div class="parallax"></div>
</body>
</html>

কোড ব্যাখ্যা

• background-attachment: fixed: ব্যাকগ্রাউন্ড ইমেজ ভিউপোর্টের সাপেক্ষে ফিক্সড থাকে।
• background-size: cover: ইমেজ পুরো এলিমেন্ট কভার করে।
• দুইটি .parallax ডিভ: কন্টেন্টের মাঝপথে প্যারাল্যাক্স সেকশন থাকে।

মোবাইল নোট

মোবাইল ব্রাউজারগুলোতে `background-attachment: fixed` সাপোর্ট সীমিত। ফলব্যাক হিসেবে `background-attachment: scroll` বা জাভাস্ক্রিপ্ট ভিত্তিক সমাধান ব্যবহার করুন।