কিভাবে তৈরি করা: দূরবীন সরণ
কিভাবে CSS ব্যবহার করে ‘দূরবীন’ সরণ ইফেক্ট তৈরি করতে শিখুন。
দূরবীন সরণ
দূরবীন সরণ একটি ওয়েবসাইট ডিজাইন ট্রেন্ড, যেখানে পটভূমির বিষয় (যেমন ছবি) সরণকালে সামনের বিষয়ের থেকে ভিন্ন গতিতে সরণ করে।নিচের লিঙ্কটি ক্লিক করে, দূরবীন সরণ এবং দূরবীন না সরণকারী ওয়েবসাইটের মধ্যে পার্থক্য দেখুন。
দৃশ্যসূত্র সরবরাহ প্রভাব থাকা প্রদর্শন
দৃশ্যসূত্র সরবরাহ প্রভাব না থাকা প্রদর্শন
মনোনীত:দৃশ্যসূত্র সরবরাহ মোবাইল ডিভাইস/স্মার্টফোনে সবসময়ই কার্যকরী হয় না। কিন্তু, আপনি মোবাইল ডিভাইসের জন্য এই প্রভাবকে বন্ধ করতে মিডিয়া কোয়াইয়ার ব্যবহার করতে পারেন (এই পৃষ্ঠার শেষ উদাহরণ দেখুন)。
দৃশ্যসূত্র সরবরাহ তৈরি করার কিভাব
একটি কনটেনার ইউনিট ব্যবহার করে, এবং সেই কনটেনারে একটি নির্দিষ্ট উচ্চতার পটভূমি ছবি যোগ করুন। তারপর, background-attachment: fixed; কার্যকরী দৃশ্যসূত্র সরবরাহ তৈরি করা
পিক্সেল ইউনিটের প্রকল্প
<style>
.parallax {
/* ব্যবহৃত ছবি */
background-image: url("img_parallax.jpg");
/* নির্দিষ্ট উচ্চতা নির্ধারণ */
min-height: 500px;
/* দৃশ্যসূত্র সরবরাহ প্রভাব তৈরি করা */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
/* কনটেনার ইউনিট */
<div class="parallax"></div>
উপরোক্ত উদাহরণ 100% পিক্সেল ব্যবহার করে ছবির উচ্চতা নির্ধারণ করে। যদি আপনি পূর্ণ সক্রিয় পরিমাপ প্রস্থকে অনুযায়ী করতে চান, যেমন 100%, যাতে ছবি সমস্ত সক্রিয় পরিমাপ প্রস্থকে আবৃত করে, তবে দৃশ্যসূত্র কনটেনারের উচ্চতা 100% হয়ে থাকতে হবে। মনোনীত: আপনি এছাড়াও height: 100%; প্রয়োগ <html> এবং <body> এর জন্য:
শতকরা ইউনিটের প্রকল্প
body, html {
height: 100%;
}
.parallax {
/* ব্যবহৃত ছবি */
background-image: url("img_parallax.jpg");
/* সম্পূর্ণ উচ্চতা */
height: 100%;
/* দৃশ্যসূত্র সরবরাহ প্রভাব তৈরি করা */
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
কিছু মোবাইল ডিভাইস ব্যবহার করে background-attachment: fixed; সমস্যা হবে। কিন্তু, আপনি মোবাইল ডিভাইসের জন্য দৃশ্যসূত্র প্রভাব বন্ধ করতে মিডিয়া কোয়াইয়ার ব্যবহার করতে পারেন:
প্রকল্প
/* সমস্ত প্যাডলটপ এবং মোবাইল ফোনের দৃশ্যসূত্র সরবরাহ প্রভাব বন্ধ করা হয়, যদি প্রয়োজন হয়, তবে পিক্সেল বৃদ্ধি/হ্রাস করা যেতে পারে */
@media only screen and (max-device-width: 1366px) {
.parallax {
background-attachment: scroll;
}
}
এই কোডের মধ্যে, যখন সক্রিয় পরিমাপ প্রস্থ কম বা সমান 1366 পিক্সেলের সঙ্গে, দৃশ্যসূত্র সরবরাহ প্রভাব বন্ধ করা হয়, যা অধিকাংশ প্যাডলটপ এবং মোবাইল ফোনের জন্য উপযুক্ত। এটা পরিবর্তন করে .parallax শ্রেণী background-attachment প্রতিভা থেকে fixed 到 scroll 来实现的。这样，背景图像就会随着页面的其余部分一起滚动，而不是固定在视口中。
