কিভাবে তৈরি করা: ওভারলে ইফেক্ট

ওভারলেয়ার ইফেক্ট কিভাবে সিএসএস-এর মাধ্যমে তৈরি করা যায় (একটি ওভারলেয়ার ইফেক্ট)।

ওভারলেয়ার ইফেক্ট কিভাবে তৈরি করা যায়

প্রথম পদক্ষেপ - এইচটিএমএল যোগ করুন:

যে কোন ইলেমেন্ট ব্যবহার করুন এবং ডকুমেন্টের যে জায়গায় রাখতে চান সেটা নির্ধারণ করুন:

<div id="overlay"></div>

দ্বিতীয় পদক্ষেপ - সিএসএস যোগ করুন:

ওভারলেয়ার ইলেমেন্টের স্টাইল সমূহ নির্ধারণ করুন:

#overlay {
  position: fixed; /* পাতার কনটেন্ট উপরে অবস্থিত */
  display: none; /* ডিফল্ট হিসাবে লুকানো */
  width: 100%; /* সম্পূর্ণ প্রস্থ (পৃষ্ঠার সমস্ত প্রস্থ) */
  height: 100%; /* সম্পূর্ণ উচ্চতা (পৃষ্ঠার সমস্ত উচ্চতা) */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5); /* স্পষ্টতা সহ কালো পটভূমি */
  z-index: 2; /* অন্য ইলেমেন্টগুলির জন্য বিভিন্ন ক্রমবিন্যাস নির্ধারণ করুন */
  cursor: pointer; /* হলোভিং সময় মাউস পিন্টার */
}

তৃতীয় পদক্ষেপ - জেভাস্ক্রিপ্ট যোগ করুন:

জেভাস্ক্রিপ্ট ব্যবহার করে ওভারলেয়ার ইফেক্ট খুলে বন্ধ করুন:

function on() {
  document.getElementById("overlay").style.display = "block";
}
function off() {
  document.getElementById("overlay").style.display = "none";
}

亲自试一试

টেক্সট-সহ ওভারলেয়ার ইফেক্ট

আপনি যে কোন কিছু কনটেন্ট ওভারলেয়ারে যোগ করুন এবং যে জায়গায় রাখতে চান সেটা নির্ধারণ করুন। এই উদাহরণে, আমরা পাতার মধ্যবর্তী স্থানে টেক্সট যোগ করেছি:

প্রকল্প

<style>
#text{
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 50px;
  color: white;
  transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
}
</style>
<div id="overlay">
  <div id="text">Overlay Text</div>
</div>

亲自试一试