প্যারালাক্স স্ক্রলিং ওয়েব ডিজাইনে একটি অত্যন্ত জনপ্রিয় এবং আকর্ষণীয় টেকনিক, যেখানে স্ক্রলিংয়ের সময় ওয়েবপেজের বিভিন্ন স্তরের উপাদানগুলি আলাদা গতিতে স্ক্রল হয়। এই প্রক্রিয়ায় একটি সাধারণ CSS বৈশিষ্ট্য, background-attachment: fixed;, প্যারালাক্স ইফেক্ট তৈরিতে ব্যবহার করা হয়।
background-attachment: fixed; কি?
CSS এর background-attachment প্রপার্টি ওয়েবপেজের ব্যাকগ্রাউন্ড ইমেজের আচরণ নিয়ন্ত্রণ করে। এর তিনটি মূল মান রয়েছে:
scroll: ডিফল্ট মান, যেখানে ব্যাকগ্রাউন্ড ইমেজ স্ক্রলিংয়ের সাথে স্ক্রল হয়।fixed: ব্যাকগ্রাউন্ড ইমেজ স্ক্রলিংয়ের সময় স্থির থাকে, অর্থাৎ স্ক্রল করার সময় ব্যাকগ্রাউন্ড ইমেজের অবস্থান পরিবর্তিত হয় না। এটি প্যারালাক্স ইফেক্ট তৈরি করতে ব্যবহৃত হয়।local: ব্যাকগ্রাউন্ড ইমেজ কন্টেইনারের স্ক্রলিংয়ের সাথে স্ক্রল হয়।
background-attachment: fixed; দিয়ে প্যারালাক্স স্ক্রলিং তৈরি করা
যখন background-attachment: fixed; ব্যবহৃত হয়, তখন ওয়েবপেজের ব্যাকগ্রাউন্ড স্ক্রলিংয়ের সাথে স্থির থাকে, ফলে একে গভীরতার অনুভূতি দেয়। এটি একটি সহজ পদ্ধতি যা প্যারালাক্স স্ক্রলিংয়ের মতো ভিজ্যুয়াল ইফেক্ট তৈরি করে।
উদাহরণ
ধরা যাক, আপনার একটি ওয়েবপেজ আছে এবং আপনি চান যে ব্যাকগ্রাউন্ড ইমেজটি স্ক্রলিংয়ের সময় স্থির থাকে, তবে টেক্সট এবং অন্যান্য উপাদানগুলি সাধারণভাবে স্ক্রল করুক। এ ক্ষেত্রে আপনি নিম্নলিখিত CSS কোড ব্যবহার করতে পারেন:
.section {
height: 100vh; /* সেকশনের উচ্চতা পূর্ণ স্ক্রীন */
background-image: url('your-image.jpg'); /* ব্যাকগ্রাউন্ড ইমেজ */
background-size: cover; /* ইমেজটি সেকশনের আকারে পূর্ণ হবে */
background-position: center; /* ইমেজের অবস্থান কেন্দ্রে থাকবে */
background-attachment: fixed; /* ব্যাকগ্রাউন্ড ইমেজ স্থির থাকবে */
}
এখানে, .section ক্লাসের জন্য background-attachment: fixed; ব্যবহৃত হয়েছে, যা ব্যাকগ্রাউন্ড ইমেজকে স্ক্রলিংয়ের সময় স্থির রাখে। ফলে, যখন ব্যবহারকারী স্ক্রল করবে, তখন ব্যাকগ্রাউন্ড ইমেজ থাকবে তার জায়গায়, কিন্তু অন্যান্য কন্টেন্টগুলি স্বাভাবিকভাবে স্ক্রল করবে।
কিভাবে এটি কাজ করে?
- ব্যাকগ্রাউন্ড ইমেজ: স্ক্রলিংয়ের সময় ইমেজটি স্ক্রল হয় না, এটি স্থানান্তরিত হয় না এবং স্ক্রিনে এক স্থানে থাকে।
- ফরওয়ার্ড কন্টেন্ট: অন্যান্য কন্টেন্ট যেমন টেক্সট, ইমেজ, এবং বাটন স্বাভাবিকভাবে স্ক্রল করে এবং তাদের গতির সঙ্গে ব্যাকগ্রাউন্ডের গতির পার্থক্য তৈরি হয়।
background-attachment: fixed; এর সুবিধা
- সহজ প্রয়োগ: এটি প্যারালাক্স স্ক্রলিং তৈরি করার একটি সহজ এবং সরল উপায়। এতে জাভাস্ক্রিপ্ট বা অতিরিক্ত কোডিং প্রয়োজন হয় না।
- ভিজ্যুয়াল আকর্ষণ: ব্যাকগ্রাউন্ডের স্থির অবস্থান স্ক্রলিংয়ের সময় এক গভীরতার অনুভূতি সৃষ্টি করে, যা সাইটের ভিজ্যুয়াল আকর্ষণ বাড়ায়।
- পারফরমেন্স: ছোট আকারের ইমেজ বা কন্টেন্টের জন্য এটি ভাল পারফরমেন্স দেয়, কারণ এতে অতিরিক্ত অ্যানিমেশন বা স্ক্রিপ্টিং ব্যবহার করা হয় না।
সীমাবদ্ধতা
- মোবাইল ডিভাইস: মোবাইল ডিভাইসে
background-attachment: fixed;কাজ না করতে পারে, কারণ অনেক মোবাইল ব্রাউজার এই প্রপার্টিটি সমর্থন করে না। এটি মোবাইল ভিউতে ব্যাকগ্রাউন্ড স্ক্রলিংকে স্বাভাবিকভাবে পরিচালনা করতে পারে না। - পারফরমেন্স সমস্যা: ভারী ব্যাকগ্রাউন্ড ইমেজ বা কম্প্লেক্স ওয়েবপেজে এটি পারফরমেন্সের সমস্যা সৃষ্টি করতে পারে। বিশেষ করে পুরনো ডিভাইসে।
background-attachment: fixed; একটি সহজ এবং কার্যকরী পদ্ধতি প্যারালাক্স স্ক্রলিং ইফেক্ট তৈরির জন্য। এটি বিশেষ করে ল্যান্ডিং পেজ বা ব্র্যান্ডিং সাইটে খুবই জনপ্রিয়, যেখানে ওয়েবপেজের গভীরতা এবং ভিজ্যুয়াল ইফেক্ট প্রধান ভূমিকা পালন করে। তবে, এর কিছু সীমাবদ্ধতা রয়েছে, বিশেষ করে মোবাইল ডিভাইসে, যা মনে রেখে এর প্রয়োগ করা উচিত।
Read more
