কম্পিউটার

কিভাবে সিএসএস দিয়ে একটি প্যারালাক্স স্ক্রলিং প্রভাব তৈরি করবেন?


CSS এর সাথে একটি প্যারালাক্স স্ক্রলিং ইফেক্ট তৈরি করতে, কোডটি নিম্নরূপ -

উদাহরণ

<!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>Some random text</h1>
<h1>Some random text</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>

আউটপুট

উপরের কোডটি নিম্নলিখিত আউটপুট −

তৈরি করবে

কিভাবে সিএসএস দিয়ে একটি প্যারালাক্স স্ক্রলিং প্রভাব তৈরি করবেন?

একটু নিচে স্ক্রোল করলে প্যারালাক্স এফেক্ট দেখা যায় যেমন দেখানো হয়েছে −

কিভাবে সিএসএস দিয়ে একটি প্যারালাক্স স্ক্রলিং প্রভাব তৈরি করবেন?


  1. কিভাবে CSS দিয়ে একটি কুপন তৈরি করবেন?

  2. কিভাবে CSS দিয়ে একটি মসৃণ স্ক্রলিং প্রভাব তৈরি করবেন?

  3. কিভাবে CSS দিয়ে তীর তৈরি করবেন?

  4. কিভাবে CSS এ একটি প্যারালাক্স স্ক্রলিং ইফেক্ট তৈরি করবেন