ট্যান (এটিএএন 2 ()) এর সাথে সিএসএসে টাইপকাস্টিং এবং ভিউপোর্ট ট্রানজিশনগুলি

আমরা সক্ষম হয়েছি সিএসএসে ভিউপোর্টের দৈর্ঘ্য পান যেহেতু… নোটগুলি চেক করুন… 2013! আশ্চর্যের বিষয়, এটি এক দশকেরও বেশি আগে ছিল। ভিউপোর্টের প্রস্থ পাওয়া আজকাল লেখার মতো সহজ 100vwতবে এটি কী অনুবাদ করে, বলুন পিক্সেল? অন্যান্য সম্পত্তি সম্পর্কে কী, যেমন শতাংশ, একটি কোণ বা পূর্ণসংখ্যা নেয়?

কোনও উপাদানটির অস্বচ্ছতা পরিবর্তন করা, এটি ঘোরানো বা স্ক্রিনের আকারের উপর ভিত্তি করে অ্যানিমেশন অগ্রগতি নির্ধারণের বিষয়ে চিন্তা করুন। আমাদের প্রথমে প্রয়োজন হবে পূর্ণসংখ্যা হিসাবে ভিউপোর্ট – কোনটি বর্তমানে সিএসএসে সম্ভব নয়, তাই না?

আমি যা বলতে যাচ্ছি তা কোনও গ্রাউন্ডব্রেকিং আবিষ্কার নয়, এটি প্রথম ছিল জেন ওরি দ্বারা আশ্চর্যজনকভাবে বর্ণনা করা হয়েছে 2023 সালে। সংক্ষেপে, আমরা জড়িত একটি অদ্ভুত হ্যাক (বা বৈশিষ্ট্য) ব্যবহার করতে পারি tan() এবং atan2() একটি পূর্ণসংখ্যার দৈর্ঘ্য (যেমন ভিউপোর্ট) টাইপকাস্ট করতে ত্রিকোনোমেট্রিক ফাংশন। এটি খোলে অনেক নতুন লেআউট সম্ভাবনা, তবে আমার প্রথম অভিজ্ঞতাটি ছিল একটি আলমানাক এন্ট্রি লেখার সময় যেখানে আমি কেবল একটি চিত্রের অস্বচ্ছতাটিকে প্রতিক্রিয়াশীল করতে চেয়েছিলাম।

কোডপেনকে পুনরায় আকার দিন এবং স্ক্রিনের আকার আরও ছোট হওয়ার সাথে সাথে চিত্রটি আরও স্বচ্ছ হয়ে উঠবে, অবশ্যই কিছু সীমানা সহ, সুতরাং এটি অদৃশ্য হয়ে যায় না:

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

আমি মনে করি এটি সত্যিই দুর্দান্ত, তবে আমি কোনও ডিজাইনার নই, তাই আমার মস্তিষ্কের সাথে এটিই সবচেয়ে ভাল আসতে পারে। তবুও, এই টাইপকাস্টিং হ্যাকের পরিচিতির জন্য এটি খুব বেশি হতে পারে, সুতরাং মধ্য-স্থল হিসাবে, আমি কেবল এটি কীভাবে কাজ করে তা প্রদর্শনের জন্য শিরোনাম রূপান্তরটিতে মনোনিবেশ করব:

জিনিস সেট আপ

এর পিছনে ধারণাটি রূপান্তর করা হয় 100vw রেডিয়ানদের (কোণ লেখার উপায়) ব্যবহার করে atan2()এবং তারপরে ব্যবহার করে এর মূল মানটিতে ফিরে যান tan()পূর্ণসংখ্যা হিসাবে বেরিয়ে আসার পার্কের সাথে। এটি এভাবে অর্জন করা উচিত:

:root {
  --int-width: tan(atan2(100vw, 1px));
}

তবে! ব্রাউজারগুলি এই পদ্ধতিতে খুব বেশি রাখে না, তাই এটি সমস্ত ব্রাউজার জুড়ে কাজ করার জন্য আরও অনেক মোড়কের প্রয়োজন। নিম্নলিখিতগুলি যাদু (বা বাজে) মতো মনে হতে পারে, তাই আমি সুপারিশ করি জেনের পোস্ট পড়া এটি আরও ভালভাবে বুঝতে, তবে এইভাবে এটি সমস্ত ব্রাউজারে কাজ করবে:

@property --100vw {
  syntax: "<length>";
  initial-value: 0px;
  inherits: false;
}

:root {
  --100vw: 100vw;
  --int-width: calc(10000 * tan(atan2(var(--100vw), 10000px)));
}

এটি সম্পর্কে খুব বেশি চিন্তা করবেন না। কী গুরুত্বপূর্ণ তা আমাদের মূল্যবান --int-width পরিবর্তনশীল, যা ভিউপোর্টের আকারকে পূর্ণসংখ্যা হিসাবে ধারণ করে!

প্রশস্ততা: তাদের সকলকে শাসন করার জন্য একটি সংখ্যা

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

• বিভিন্ন সম্পত্তি বিভিন্ন ইউনিট আছে, এবং
• আমরা চাই প্রতিটি সম্পত্তি একটি শুরু মান থেকে শেষ মানের দিকে যেতে পারে।

একটি চিত্র সম্পর্কে চিন্তা করুন opacity থেকে যাচ্ছি 0 থেকে 1একটি বস্তু থেকে ঘোরানো 0deg থেকে 360degবা একটি উপাদান offset-distance থেকে যাচ্ছি 0% থেকে 100%। আমরা এই মানগুলির মধ্যে ইন্টারপোলেট করতে চাই --int-width বড় হয়ে যায়, তবে এখনই এটি কেবল একটি পূর্ণসংখ্যা যা সাধারণত এর মধ্যে থাকে 0 থেকে 1600যা জটিল এবং সহজেই শেষ মানগুলির কোনওটিতে রূপান্তর করা যায় না।

সেরা সমাধানটি ঘুরিয়ে দেওয়া হয় --int-width একটি সংখ্যা থেকে যায় 0 থেকে 1। সুতরাং, স্ক্রিনটি আরও বড় হওয়ার সাথে সাথে আমরা এটি পছন্দসই শেষ মানের দ্বারা গুণ করতে পারি। আরও ভাল নামের অভাব, আমি এটিকে “0-থেকে -1” মান বলি --wideness। যদি আমাদের আছে --widenessসমস্ত শেষ উদাহরণ সম্ভব হয়:

/* If `--wideness is 0.5 */

.element {
  opacity: var(--wideness); /* is 0.5 */
  translate: rotate(calc(wideness(400px, 1200px) * 360deg)); /* is 180deg */
  offset-distance: calc(var(--wideness) * 100%); /* is 50% */
}

সুতরাং --wideness এর মধ্যে একটি মান 0 থেকে 1 এটি পর্দা কতটা প্রশস্ত তা উপস্থাপন করে: 0 যখন পর্দা সংকীর্ণ হয় তখন প্রতিনিধিত্ব করে এবং 1 এটি প্রশস্ত হলে প্রতিনিধিত্ব করে। তবে ভিউপোর্টে এই মানগুলির অর্থ কী তা আমাদের এখনও সেট করতে হবে। উদাহরণস্বরূপ, আমরা চাই 0 হতে 400px এবং 1 হতে 1200pxআমাদের ভিউপোর্ট ট্রানজিশনগুলি এই মানগুলির মধ্যে চলবে। নীচের এবং উপরে যে কোনও কিছুতে ক্ল্যাম্প করা হয় 0 এবং 1যথাক্রমে।

সিএসএসে, আমরা এটি নিম্নরূপ লিখতে পারি:

:root {
  /* Both bounds are unitless */
  --lower-bound: 400; 
  --upper-bound: 1200;

  --wideness: calc(
    (clamp(var(--lower-bound), var(--int-width), var(--upper-bound)) - var(--lower-bound)) / (var(--upper-bound) - var(--lower-bound))
  );
}

সহজ রূপান্তর ছাড়াও, --wideness পরিবর্তনশীল আমাদের নিম্ন এবং উপরের সীমাটি সংজ্ঞায়িত করতে দেয় যেখানে ট্রানজিশনটি চালানো উচিত। এবং আরও ভাল কী, আমরা ট্রানজিশন জোনটি একটি মাঝারি স্থানে সেট করতে পারি যাতে ব্যবহারকারী এটি তার পুরো গৌরবতে দেখতে পারে। অন্যথায়, পর্দা হওয়া দরকার 0px যে --wideness পৌঁছায় 0 এবং কে জানে যে কত প্রশস্ত 1।

আমরা পেয়েছি --wideness। এরপরে কী?

প্রারম্ভিকদের জন্য, শিরোনামের মার্কআপটি স্প্যানগুলিতে বিভক্ত হয়েছে যেহেতু কোনও বাক্যে নির্দিষ্ট শব্দ নির্বাচন করার জন্য কোনও সিএসএস-উপায় নেই:

<h1><span>Resize</span> and <span>enjoy!</span></h1>

এবং যেহেতু আমরা নিজেরাই লাইনটি মোড়ানো করব, তাই কিছু ডিফল্ট আনসেট করা গুরুত্বপূর্ণ:

h1 {
  position: absolute; /* Keeps the text at the center */
  white-space: nowrap; /* Disables line wrapping */
}

ট্রানজিশনটি বেস স্টাইলিং ছাড়াই কাজ করা উচিত, তবে এটি কেবল খুব সরল চেহারা। আপনি যদি সেগুলি আপনার স্টাইলশিটে অনুলিপি করতে চান তবে সেগুলি নীচে রয়েছে:

এবং ঠিক একটি পুনরুদ্ধার হিসাবে, আমাদের বর্তমান হ্যাকটি দেখতে এরকম দেখাচ্ছে:

@property --100vw {
  syntax: "<length>";
  initial-value: 0px;
  inherits: false;
}

:root {
  --100vw: 100vw;
  --int-width: calc(10000 * tan(atan2(var(--100vw), 10000px)));
  --lower-bound: 400;
  --upper-bound: 1200;

  --wideness: calc(
    (clamp(var(--lower-bound), var(--int-width), var(--upper-bound)) - var(--lower-bound)) / (var(--upper-bound) - var(--lower-bound))
  );
}

ঠিক আছে, সেট আপ সহ যথেষ্ট। আমাদের নতুন মানগুলি ব্যবহার করার এবং ভিউপোর্টের রূপান্তর করার সময় এসেছে। আমরা প্রথমে সনাক্ত করতে হবে কিভাবে শিরোনামটি ছোট পর্দার জন্য পুনরায় সাজানো উচিত: আপনি যেমন প্রাথমিক ডেমোতে দেখেছেন, প্রথমটি span উপরে এবং ডানদিকে যায়, দ্বিতীয় যখন span বিপরীতটি করে এবং নীচে গিয়ে চলে যায়। সুতরাং, উভয় স্প্যানের শেষ অবস্থান নিম্নলিখিত মানগুলিতে অনুবাদ করে:

h1 {
  span:nth-child(1) {
    display: inline-block; /* So transformations work */
    position: relative;
    bottom: 1.2lh;
    left: 50%;
    transform: translate(-50%);
  }

  span:nth-child(2) {
    display: inline-block; /* So transformations work */
    position: relative;
    bottom: -1.2lh;
    left: -50%;
    transform: translate(50%);
  }
}

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

h1 {
  span {
    display: inline-block;
    position: relative;
    bottom: calc(1.2lh * var(--direction));
    left: calc(50% * var(--direction));
    transform: translate(calc(-50% * var(--direction)));
    }

  span:nth-child(1) {
    --direction: 1;
  }

  span:nth-child(2) {
    --direction: -1;
  }
}

পরবর্তী পদক্ষেপ আনতে হবে --wideness সূত্রে যাতে স্ক্রিনটি পুনরায় আকার দেওয়ার সাথে সাথে মানগুলি পরিবর্তিত হয়। তবে, আমরা কেবল সমস্ত কিছু গুণতে পারি না --wideness। কেন? আসুন দেখি আমরা যদি করি তবে কী হয়:

span {
  display: inline-block;
  position: relative;
  bottom: calc(var(--wideness) * 1.2lh * var(--direction));
  left: calc(var(--wideness) * 50% * var(--direction));
  transform: translate(calc(var(--wideness) * -50% * var(--direction)));
}

আপনি যেমন দেখতে পাবেন, সবকিছু পিছনের দিকে! স্ক্রিনটি যখন খুব প্রশস্ত থাকে তখন শব্দগুলি মোড়ানো হয় এবং যখন স্ক্রিনটি খুব সংকীর্ণ থাকে তখন মোড়ানো:

আমাদের প্রথম উদাহরণগুলির বিপরীতে, যেখানে রূপান্তরটি শেষ হয় --wideness থেকে বৃদ্ধি 0 থেকে 1আমরা রূপান্তরটি সম্পূর্ণ করতে চাই --wideness থেকে হ্রাস 1 থেকে 0অর্থাত্ স্ক্রিনটি ছোট হওয়ার সময় বৈশিষ্ট্যগুলি তাদের শেষের মানটিতে পৌঁছাতে হবে। এটি কোনও বড় বিষয় নয়, কারণ আমরা আমাদের সূত্রটিকে একটি বিয়োগ হিসাবে পুনরায় লিখতে পারি, যেখানে বিয়োগের সংখ্যাটি আরও বড় হয় --wideness বৃদ্ধি:

span {
  display: inline-block;
  position: relative;
  bottom: calc((1.2lh - var(--wideness) * 1.2lh) * var(--direction));
  left: calc((50% - var(--wideness) * 50%) * var(--direction));
  transform: translate(calc((-50% - var(--wideness) * -50%) * var(--direction)));
}

এবং এখন স্ক্রিনটি পুনরায় আকার দেওয়ার সময় সবকিছু সঠিক দিকে চলে যায়!

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

একটি সরলরেখায় যাওয়ার পরিবর্তে শব্দগুলি একটি বক্ররেখায় চলে যাওয়া উচিত যাতে তারা কেন্দ্রীয় শব্দের চারপাশে চলে যায়। চিন্তা করবেন না, এখানে একটি বক্ররেখা তৈরি করা দেখতে সহজ: এক্স-অক্ষের মধ্যে কেবল স্প্যানগুলি দ্বিগুণ করুন y- অক্ষের মতো তারা। এটি গুণ করে অর্জন করা যেতে পারে --wideness দ্বারা 2যদিও আমাদের এটি ক্যাপ করতে হবে 1 সুতরাং এটি চূড়ান্ত মানটি ছাড়িয়ে যায় না।

span {
 display: inline-block;
 position: relative;
 bottom: calc((1.2lh - var(--wideness) * 1.2lh) * var(--direction));
 left: calc((50% - min(var(--wideness) * 2, 1) * 50%) * var(--direction));
 transform: translate(calc((-50% - min(var(--wideness) * 2, 1) * -50%) * var(--direction)));
}

সেই সুন্দর বক্ররেখা দেখুন, কেবল কেন্দ্রীয় পাঠ্যটি এড়িয়ে:

এই ঠিক শুরু!

এটি আশ্চর্যজনক যে একটি পূর্ণসংখ্যা হিসাবে ভিউপোর্ট থাকা কতটা শক্তিশালী হতে পারে এবং এমনকি ক্রেজিয়ার কী, শেষ উদাহরণটি আপনি এই টাইপকাস্টিং হ্যাক দিয়ে তৈরি করতে পারেন এমন একটি প্রাথমিক রূপান্তর। একবার আপনি প্রাথমিক সেটআপটি করার পরে, আমি আরও অনেক সম্ভাব্য ট্রানজিশনগুলি কল্পনা করতে পারি এবং --widenesss তাই দরকারী, এটি এখনই একটি নতুন সিএসএস বৈশিষ্ট্য থাকার মতো।

আমি ভবিষ্যতে “ভিউপোর্ট ট্রানজিশন” সম্পর্কে আরও দেখার আশা করি কারণ তারা ওয়েবসাইটগুলিকে অভিযোজিতের চেয়ে আরও “জীবিত” বোধ করে।