TechBlogSD - ওয়ার্ডপ্রেস এবং ওয়েব ডেভেলপমেন্টের জন্য সবকিছু
ওয়েব এবং ওয়ার্ডপ্রেস নির্দেশাবলী, খবর, থিম এবং প্লাগইনগুলির পর্যালোচনা

কিভাবে ডায়নামিক ফন্ট ট্রানজিশন ইফেক্ট তৈরি করবেন?

10

আগের দিন, এইচটিএমএল ছিল ওয়েব ডিজাইনিংয়ের ভিত্তি। ডেভেলপাররা রং এবং অন্যান্য পরামিতি পরিবর্তনের জন্য এইচটিএমএল -এর মধ্যে শৈলী সংজ্ঞায়িত করত। যাইহোক, সিএসএস এবং জাভাস্ক্রিপ্ট ব্যবহার আজকাল সর্বাধিক ব্যবহৃত হয়। আপনি CSS এবং জাভাস্ক্রিপ্ট ব্যবহার করে একটি পৃষ্ঠার মধ্যে গতিশীলভাবে একটি পাঠ্যের ফন্টের রঙ পরিবর্তন করতে পারেন। এটি দরকারী কারণ আপনি একটি পৃষ্ঠা পুনরায় লোড না করে ফন্টের রঙ পরিবর্তন করতে পারেন। বিভিন্ন ফন্ট প্রপার্টি ব্যবহার করে কিভাবে ডাইনামিকভাবে কন্টেন্ট পরিবর্তন করতে হয় তা দেখুন?

ফন্ট রঙ পরিবর্তন উইজেট

ফন্ট ট্রানজিশন কেমন দেখাচ্ছে তার একটি উদাহরণ নিচে দেওয়া হল।

আপনি প্রয়োজনীয়তা অনুযায়ী রঙ, ফন্ট ওজন এবং ফন্ট পরিবার পরিবর্তন করতে পারেন।

কিভাবে এই উইজেট তৈরি করবেন?

ফন্ট ট্রানজিশন উইজেটে তিনটি উপাদান রয়েছে:

  • সিএসএস
  • জাভাস্ক্রিপ্ট এবং
  • এইচটিএমএল

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

ফন্ট ট্রানজিশন উইজেট ব্যবহারের উদাহরণ

আপনার ওয়েবসাইট তৈরি করতে আপনি যে কন্টেন্ট ম্যানেজমেন্ট সিস্টেম ব্যবহার করেন তার উপর ব্যবহার নির্ভর করে।

  • সাধারণ HTML ওয়েবপেজে, আপনি হেডার এবং বডি সেকশনে উইজেট কোড সন্নিবেশ করতে পারেন।
  • আপনি যদি উইবলির মতো প্ল্যাটফর্ম ব্যবহার করেন, তাহলে আপনার পৃষ্ঠায় কোডটি সন্নিবেশ করানোর জন্য এম্বেড কোড উপাদানটি ব্যবহার করুন। অন্যথায়, আপনি যথাক্রমে CSS এবং JS কোড সন্নিবেশ করানোর জন্য হেডার এবং ফুটার বিভাগ ব্যবহার করতে পারেন।
  • উপর ওয়ার্ডপ্রেস, আপনি উইজেট সন্নিবেশ করতে গুটেনবার্গ সম্পাদক ব্যবহার করে কাস্টম এইচটিএমএল ব্লক ব্যবহার করতে পারেন।

ফন্ট ট্রানজিশনের জন্য CSS

আপনার ওয়েব পৃষ্ঠার অধীনে নিম্নলিখিত CSS কোড যোগ করুন:

<style type="text/css"> table { font-family: "georgia"; font-size: 35pt; color: blue; } #celSlide { letter-spacing: 9px; color: silver; } </style>

ফন্ট ট্রানজিশনের জন্য জাভাস্ক্রিপ্ট

আপনার ওয়েব পৃষ্ঠার ফুটার বিভাগে (বিষয়বস্তুর নিচে) নিম্নলিখিত স্ক্রিপ্ট কোড যোগ করুন যা আপনার পৃষ্ঠার মূল অংশের পরে:

<script type="text/javascript"> var sColor1 = "white"; var sColor2 = "gray"; var iColorLoop = 0; var iCurrentCELL = 0; var bAscending = true; var output = null; var startTime = new Date(); function startCycle() { output = document.getElementById('output'); setInterval(cycleColors,100); } function cycleColors() { var celColorChange = document.getElementById('celColorChange').cells; if (bAscending) { celColorChange[iCurrentCELL++].style.color = sColor2; if (iCurrentCELL == celColorChange.length) { bAscending = false; iCurrentCELL = celColorChange.length; } } else { celColorChange[--iCurrentCELL].style.color = sColor1; if (iCurrentCELL == 0) { bAscending = true; changeColors(); } } } function changeColors() { switch (iColorLoop++) { case 0: sColor1="yellow"; sColor2="orange"; break; case 1: sColor1="hotpink"; sColor2="purple"; break; case 2: sColor1="aqua"; sColor2="blue"; break; case 3: sColor1="lightgreen"; sColor2="green"; } if (iColorLoop > 3) iColorLoop = 0; } </script>

ফন্ট ট্রানজিশন উইজেটের জন্য এইচটিএমএল

ফন্ট ট্রানজিশন উইজেটের জন্য HTML বিষয়বস্তুর নিচে। আপনি আপনার পৃষ্ঠার বডি সেকশনের ভিতরে যে কোন জায়গায় এই কোডটি ুকিয়ে দিতে পারেন।

<body onload="startCycle()"> <div> <table> <tr id="celColorChange"> <td>Welcome to</td> <td>W</td> <td>e</td> <td>b</td> <td>N</td> <td>o</td> <td>t</td> <td>s</td> </tr> </table> </div> </body>

উইজেট কাস্টমাইজ করা

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

রেকর্ডিং উত্স: www.webnots.com
Leave A Reply

এই ওয়েবসাইট আপনার অভিজ্ঞতা উন্নত করতে কুকি ব্যবহার করে। আমরা ধরে নেব যে আপনি এটির সাথে ঠিক আছেন, তবে আপনি ইচ্ছা করলে অপ্ট-আউট করতে পারেন। আমি স্বীকার করছি আরো বিস্তারিত