![ডেমো স্ক্রিনশট](https://i.stack.imgur.com/HHtAP.png)
আমার মূল পাঠ্যের মতো দেখতে এমন পাঠ্য তৈরি করা দরকার ছিল, তবে ব্যাকগ্রাউন্ড সজ্জিত করে আমি এটি জাল করতে পারি না, কারণ উপাদানটির পিছনে কিছু অ্যানিমেশন রয়েছে। কেউ এখনও এটিকে পরামর্শ দিয়েছে বলে মনে হয় না, তাই আমি যা করেছি তা এখানে দেওয়া হয়েছে: (এটি যতটা সম্ভব পড়ার জন্য সহজ করার চেষ্টা করা হয়েছিল))
var el = document.body;
var mainText = "THIS IS THE FIRST LINE";
var subText = "THIS TEXT HAS A KNOCKOUT EFFECT";
var fontF = "Roboto, Arial";
var mSize = 42;
var tBox = centeredDiv(el), txtMain = mkDiv(tBox, mainText), txtSub = mkDiv(tBox),
ts = tBox.style, stLen = textWidth(subText, fontF, mSize)+5; ts.color = "#fff";
ts.font = mSize+"pt "+fontF; ts.fontWeight = 100; txtSub.style.fontWeight = 400;
txtSub.innerHTML =
"<svg xmlns='http://www.w3.org/2000/svg' width='"+stLen+"px' height='"+(mSize+11)+"px' viewBox='0 0 "+stLen+" "+(mSize+11)+"'>"+
"<rect x='0' y='0' width='100%' height='100%' fill='#fff' rx='4px' ry='4px' mask='url(#txtSubMask)'></rect>"+
"<mask id='txtSubMask'>"+
"<rect x='0' y='0' width='100%' height='100%' fill='#fff'></rect>"+
"<text x='"+(stLen/2)+"' y='"+(mSize+6)+"' font='"+mSize+"pt "+fontF+"' text-anchor='middle' fill='#000'>"+subText+"</text>"+
"</mask>"+
"</svg>";
function centeredDiv(parent) {
var d = document.createElement('div'), s = d.style;
s.display = "table"; s.position = "relative"; s.zIndex = 999;
s.top = s.left = 0; s.width = s.height = "100%";
var k = document.createElement('div'), j = k.style;
j.display = "table-cell"; j.verticalAlign = "middle";
j.textAlign = "center"; d.appendChild(k);
parent.appendChild(d); return k;
}
function mkDiv(parent, tCont) {
var d = document.createElement('div');
if(tCont) d.textContent = tCont;
parent.appendChild(d); return d;
}
function textWidth(text, font, size) {
var canvas = window.textWidthCanvas || (window.textWidthCanvas = document.createElement("canvas")),
context = canvas.getContext("2d"); context.font = size+(typeof size=="string"?" ":"pt ")+font;
return context.measureText(text).width;
}
কেবল এটি আপনার উইন্ডোতে ফেলে দিন onআনলোড করুন, আপনার চিত্রের সাথে দেহের পটভূমি সেট করুন এবং যাদুটি ঘটবে দেখুন!