ব্যাকগ্রাউন্ড এবং ফোরগ্রাউন্ড কন্টেন্টের জন্য বিভিন্ন গতি নির্দিষ্ট করে, আমরা CSS ব্যবহার করে একটি প্যারালাক্স স্ক্রলিং ইফেক্ট তৈরি করতে পারি।
নিম্নলিখিত উদাহরণটি CSS প্যারালাক্স স্ক্রলিং প্রভাব −
দেখায়উদাহরণ
<!DOCTYPE html>
<html>
<head>
<style>
body, html {
height: 100%;
text-align: center;
}
.example {
height: 100%;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
#demo {
background: url("https://images.unsplash.com/photo-1612698565524- 1101522e9a21?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixlib=rb1.2.1&q=80&w=800");
}
#dist {
height:150px;
background-color: rgba(102,234,99,0.5);
padding: 2%;
}
#d2 {
background: url("https://images.unsplash.com/photo-1611489473774-5d881f1153f1?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=600&ixlib=rb1.2.1&q=80&w=800");
}
</style>
</head>
<body>
<div id="demo" class="example"></div>
<div id="dist">
Sed a porttitor enim. Integer euismod dui massa, at posuere sem fermentum at. Fusce vehicula
fringilla tortor, ut mattis sapien tristique ac. Phasellus eleifend malesuada orci, et facilisis arcu
egestas vel. Duis in tempus libero. Nunc nibh arcu, tempus quis lectus ut, blandit tincidunt felis. Suspendisse potenti.
</div>
<div id="d2" class="example"></div>
</body>
</html> আউটপুট
এটি নিম্নলিখিত ফলাফল তৈরি করবে -
