HTMX এর মাধ্যমে AJAX রিকোয়েস্ট ব্যবহার করে পেজের নির্দিষ্ট অংশে Content লোড এবং Transition Effects যোগ করা সম্ভব। HTMX এর hx-trigger, hx-target, hx-swap এর পাশাপাশি CSS এবং JavaScript এর মাধ্যমে Transition Effects তৈরি করে Content লোডিংয়ের অভিজ্ঞতাকে আরও উন্নত করা যায়।
HTMX এবং CSS দিয়ে Content লোড এবং Transition Effects তৈরি করা
1. HTMX এর hx-get ব্যবহার করে Content লোড করা
নিচের উদাহরণে একটি বাটন ক্লিক করলে AJAX GET রিকোয়েস্ট পাঠানো হয় এবং সার্ভার থেকে প্রাপ্ত ডেটা নির্দিষ্ট div এ রেন্ডার করা হয়।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTMX Content Load with Transition</title>
<script src="https://unpkg.com/htmx.org@1.8.4"></script>
<style>
/* Fade-in effect */
.fade-in {
opacity: 0;
transition: opacity 0.5s ease-in;
}
/* When content is loaded, opacity changes */
.fade-in.htmx-added {
opacity: 1;
}
</style>
</head>
<body>
<h2>Load Content with Transition</h2>
<!-- GET রিকোয়েস্ট দিয়ে Content লোড -->
<button hx-get="/get-content" hx-target="#content" hx-swap="innerHTML">Load Content</button>
<!-- Content container -->
<div id="content" class="fade-in">This content will be replaced.</div>
</body>
</html>
ব্যাখ্যা:
hx-get="/get-content":/get-contentএ GET রিকোয়েস্ট পাঠায়।hx-target="#content": রেসপন্সটি#contentdiv এ রেন্ডার করা হবে।hx-swap="innerHTML":#contentdiv এর ভিতরের কন্টেন্ট প্রতিস্থাপিত হবে।- CSS Fade-in Effect:
.fade-inক্লাসটিopacityশুরুতে 0 রাখে, এবংtransitionব্যবহার করে ধীরে ধীরেopacity1 এ আসে, যখন HTMX নতুন কন্টেন্ট যোগ করে।
Note: HTMX স্বয়ংক্রিয়ভাবে .htmx-added ক্লাস যোগ করে নতুন কন্টেন্ট ইনজেক্ট করলে, যার ফলে fade-in এফেক্টটি কাজ করে।
2. Content লোডের জন্য Loading Indicator যোগ করা
HTMX এর hx-indicator Attribute ব্যবহার করে লোডিংয়ের সময় একটি লোডার বা স্পিনার দেখানো যেতে পারে। এটি ব্যবহারকারীদের বুঝতে সাহায্য করে যে Content লোড হচ্ছে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTMX Content Load with Loader</title>
<script src="https://unpkg.com/htmx.org@1.8.4"></script>
<style>
/* Loader styling */
.loader {
display: none;
border: 4px solid #f3f3f3;
border-radius: 50%;
border-top: 4px solid #3498db;
width: 20px;
height: 20px;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* Display loader when HTMX is loading */
.loader.htmx-request {
display: inline-block;
}
</style>
</head>
<body>
<h2>Load Content with Loading Indicator</h2>
<!-- GET রিকোয়েস্ট দিয়ে Content লোড -->
<button hx-get="/load-content" hx-target="#content" hx-swap="innerHTML" hx-indicator=".loader">Load Content</button>
<!-- Loader Icon -->
<div class="loader"></div>
<!-- Content container -->
<div id="content">This content will be replaced.</div>
</body>
</html>
ব্যাখ্যা:
hx-indicator=".loader":.loaderক্লাসযুক্ত এলিমেন্টকে লোডিং ইন্ডিকেটর হিসেবে ব্যবহার করে, যা রিকোয়েস্ট পাঠানোর সময় প্রদর্শিত হয় এবং রেসপন্স পাওয়ার পরে অদৃশ্য হয়ে যায়।- CSS Loader Animation:
.loaderক্লাসে CSS@keyframesএর মাধ্যমে স্পিনিং ইফেক্ট তৈরি করা হয়েছে।
3. Content লোডিং এবং Slide-In Transition Effect যোগ করা
Content Update করার সময় Slide-In Transition Effect যোগ করে কন্টেন্টকে আরও আকর্ষণীয় করা যায়। নিচের উদাহরণে, নতুন কন্টেন্ট একটি Slide-In এফেক্ট সহ প্রদর্শিত হবে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTMX Slide-In Effect Example</title>
<script src="https://unpkg.com/htmx.org@1.8.4"></script>
<style>
/* Slide-in effect */
.slide-in {
transform: translateX(-100%);
opacity: 0;
transition: transform 0.5s ease-out, opacity 0.5s ease-out;
}
/* After content load */
.slide-in.htmx-added {
transform: translateX(0);
opacity: 1;
}
</style>
</head>
<body>
<h2>Slide-In Content Load</h2>
<!-- Slide-In Content Load Button -->
<button hx-get="/load-slide-content" hx-target="#slide-content" hx-swap="innerHTML">Load Slide-In Content</button>
<!-- Content container with slide-in effect -->
<div id="slide-content" class="slide-in">This content will slide in.</div>
</body>
</html>
ব্যাখ্যা:
hx-get="/load-slide-content":/load-slide-contentএ GET রিকোয়েস্ট পাঠায়।- CSS Slide-In Effect:
.slide-inক্লাস প্রথমেtransform: translateX(-100%)দিয়ে অদৃশ্য রাখে এবং.htmx-addedক্লাস যোগ হলেtranslateX(0)সেট করে যা কন্টেন্টকে স্লাইড ইন করে।
সংক্ষিপ্ত উপসংহার
HTMX এবং CSS এর মাধ্যমে AJAX রিকোয়েস্ট থেকে প্রাপ্ত Content Update করার সময় Transition Effects যোগ করে UI কে আরও ইন্টারঅ্যাকটিভ এবং ব্যবহারকারী-বান্ধব করা যায়।
মূল পয়েন্ট:
hx-targetএবংhx-swapব্যবহার করে Content Update এর নির্দিষ্ট স্থান এবং কিভাবে রেন্ডার হবে তা নির্ধারণ করা যায়।- CSS Animation এবং Transition Effects যেমন
fade-in,slide-in, এবং লোডার ব্যবহার করে কন্টেন্টকে আরও আকর্ষণীয় করা সম্ভব।
Read more
