CSS Transitions এবং Animations

Latest Technologies - এইচটিএমএক্স (HTMX)

268

CSS Transitions এবং Animations

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

১. CSS Transitions

১.১. বর্ণনা

CSS Transitions একটি উপাদানের স্টাইল পরিবর্তনের সময়কে নিয়ন্ত্রণ করে, যা একটি অবস্থান থেকে অন্য অবস্থানে পরিবর্তনের সময় একটি সুন্দর গতিশীলতা সৃষ্টি করে। এটি ব্যবহারকারী যখন উপাদানের উপর মাউস রেখে বা মাউস সরিয়ে নিয়ে যায়, তখন ঘটে।

১.২. কীভাবে কাজ করে

প্রপস: transition সম্পত্তি ব্যবহার করে একটি উপাদানের পরিবর্তন সময়সীমা এবং টাইপ নিয়ন্ত্রণ করা হয়।

১.৩. উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Transition Example</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: blue;
            transition: background-color 0.5s ease, transform 0.5s ease; /* Transition properties */
        }

        .box:hover {
            background-color: green; /* Change color on hover */
            transform: scale(1.2); /* Scale effect on hover */
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

ব্যাখ্যা: এখানে, .box ক্লাসের উপাদানটি যখন ব্যবহারকারী মাউসের সাথে সরিয়ে নেয়, তখন ব্যাকগ্রাউন্ড রঙ পরিবর্তিত হয় এবং স্কেল বাড়ে।

২. CSS Animations

২.১. বর্ণনা

CSS Animations আরও জটিল এবং নিয়ন্ত্রিত গতিশীলতা তৈরি করে। এটি keyframes এর মাধ্যমে কাজ করে, যেখানে বিভিন্ন অবস্থা এবং তাদের পরিবর্তন সময় নির্ধারণ করা হয়।

২.২. কীভাবে কাজ করে

@keyframes: CSS এ কিভাবে একটি অ্যানিমেশন চলবে তা নির্দেশ করে।

২.৩. উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Animation Example</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: red;
            animation: move 2s infinite; /* Animation properties */
        }

        @keyframes move {
            0% {
                transform: translateX(0); /* Initial position */
            }
            50% {
                transform: translateX(200px); /* Move right */
            }
            100% {
                transform: translateX(0); /* Return to initial position */
            }
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

ব্যাখ্যা: এখানে, .box ক্লাসের উপাদানটি 2 সেকেন্ডের জন্য ডানে চলে যায় এবং তারপর ফিরে আসে, যা একটি অসীম অ্যানিমেশন তৈরি করে।

৩. CSS Transitions এবং Animations এর মধ্যে পার্থক্য

বৈশিষ্ট্য	CSS Transitions	CSS Animations
ক্রিয়াকলাপ	এক অবস্থা থেকে অন্য অবস্থায় পরিবর্তন	নিয়ন্ত্রিত গতিশীলতা (keyframes)
সংকেত	একটি অবস্থা পরিবর্তন ঘটে	অ্যানিমেশন বিভিন্ন পর্যায়ের মাধ্যমে চলে
কাস্টমাইজেশন	সীমিত (উদাহরণস্বরূপ, শুধুমাত্র সঙ্গতিপূর্ণ পরিবর্তন)	উচ্চতর (বিভিন্ন keyframes এবং সময়)

সারসংক্ষেপ

CSS Transitions: সহজ এবং সরল পরিবর্তনের জন্য ব্যবহৃত হয়, যেখানে একটি অবস্থান থেকে অন্য অবস্থানে দ্রুত পরিবর্তন ঘটে।
CSS Animations: আরো জটিল এবং নিয়ন্ত্রিত গতিশীলতা তৈরি করে, যেখানে বিভিন্ন অবস্থান এবং সময়সীমা নির্ধারণ করা যায়।
উভয়ই ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে সাহায্য করে এবং স্নিগ্ধ ডিজাইন তৈরি করতে সহায়ক।

এই উদাহরণ এবং তথ্যগুলির মাধ্যমে CSS Transitions এবং Animations এর কার্যকারিতা এবং প্রয়োগ পদ্ধতি বোঝা যাবে।

Content added By

Md. Shakil khan

HTMX এবং CSS এর সংযোগ

196

HTMX এবং CSS এর সংযোগ

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

১. HTMX এর সাথে CSS Transitions

১.১. বর্ণনা

HTMX ব্যবহার করে যখন আমরা কোনও উপাদানে নতুন কন্টেন্ট লোড করি, তখন CSS Transitions ব্যবহার করে সেই পরিবর্তনগুলিকে মসৃণ করা যায়।

১.২. উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTMX with CSS Transitions</title>
    <script src="https://unpkg.com/htmx.org@1.8.4"></script>
    <style>
        #content {
            transition: opacity 0.5s ease;
            opacity: 0;
        }
        #content.loaded {
            opacity: 1;
        }
    </style>
</head>
<body>
    <h1>HTMX with CSS Transitions</h1>
    <button hx-get="/load-content" hx-target="#content" hx-swap="innerHTML" hx-on="htmx:afterSwap: this.classList.add('loaded');">Load Content</button>
    <div id="content"></div>

    <script>
        // This part can be integrated with a backend to load existing content
    </script>
</body>
</html>

ব্যাখ্যা: এখানে বোতামে ক্লিক করলে নতুন কন্টেন্ট #content ডিভে লোড হবে এবং loaded ক্লাস যুক্ত হবে, যা CSS Transition কে সক্রিয় করবে। ফলে কন্টেন্ট লোড হওয়ার সময় একটি স্নিগ্ধ ফেড ইন অ্যাফেক্ট দেখা যাবে।

২. HTMX এর সাথে CSS Animations

২.১. বর্ণনা

HTMX এবং CSS Animations একসাথে ব্যবহার করে, আমরা একটি উপাদানের উপর ইনপুট বা ইভেন্টের ভিত্তিতে জটিল অ্যানিমেশন তৈরি করতে পারি।

২.২. উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTMX with CSS Animations</title>
    <script src="https://unpkg.com/htmx.org@1.8.4"></script>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color: blue;
            animation: move 1s infinite alternate;
        }
        @keyframes move {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(200px);
            }
        }
    </style>
</head>
<body>
    <h1>HTMX with CSS Animations</h1>
    <button hx-get="/start-animation" hx-target=".box">Start Animation</button>
    <div class="box"></div>

    <script>
        // This part can be integrated with a backend to control animations
    </script>
</body>
</html>

ব্যাখ্যা: এখানে বোতামে ক্লিক করলে .box ক্লাসের উপাদানটি অ্যানিমেশন শুরু করবে। HTMX ব্যবহার করে, আমরা সার্ভার থেকে অ্যানিমেশন শুরু করার জন্য একটি রিকোয়েস্ট পাঠাতে পারি।

৩. HTMX এর সাথে CSS Styles

৩.১. বর্ণনা

HTMX ব্যবহার করে লোড হওয়া কন্টেন্টের উপর CSS Styles প্রয়োগ করা যায়। এতে ডাইনামিক কন্টেন্টের মধ্যে ফর্ম্যাটিং এবং স্টাইলিং আরও সহজ হয়।

৩.২. উদাহরণ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTMX with CSS Styles</title>
    <script src="https://unpkg.com/htmx.org@1.8.4"></script>
    <style>
        .highlight {
            background-color: yellow;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>HTMX with CSS Styles</h1>
    <button hx-get="/highlight-content" hx-target="#styled-content">Load Highlighted Content</button>
    <div id="styled-content"></div>

    <script>
        // This part can be integrated with a backend to load styled content
    </script>
</body>
</html>

ব্যাখ্যা: এখানে বোতামে ক্লিক করলে HTMX সার্ভার থেকে এমন কন্টেন্ট লোড করবে যা .highlight ক্লাসের সাথে স্টাইল করা হয়েছে, যেমন ব্যাকগ্রাউন্ড রঙ হলুদ।

সারসংক্ষেপ

HTMX: AJAX কলের মাধ্যমে ডাইনামিক কন্টেন্ট লোড করে এবং ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করে।
CSS Transitions: HTMX এর মাধ্যমে লোড হওয়া কন্টেন্টে স্নিগ্ধ পরিবর্তন যোগ করে।
CSS Animations: জটিল গতিশীলতা তৈরি করে, যা ব্যবহারকারীর অভিজ্ঞতাকে আরো উন্নত করে।
CSS Styles: HTMX লোড হওয়া কন্টেন্টে CSS স্টাইল প্রয়োগের মাধ্যমে কন্টেন্টের উপস্থাপনাকে উন্নত করে।

HTMX এবং CSS একসাথে ব্যবহার করে, আপনি আরও ইন্টারঅ্যাকটিভ এবং ব্যবহারকারী-বান্ধব ওয়েব অ্যাপ্লিকেশন তৈরি করতে পারবেন।

Content added By

Md. Shakil khan

CSS Transitions এবং hx-swap-oob ব্যবহার করে অ্যানিমেশন

242

CSS Transitions এবং `hx-swap-oob` ব্যবহার করে অ্যানিমেশন

HTMX এর hx-swap-oob (out-of-band) ফিচার এবং CSS Transitions একসাথে ব্যবহার করে আমরা একটি ওয়েব পৃষ্ঠায় স্নিগ্ধ অ্যানিমেশন এবং ডাইনামিক কন্টেন্ট আপডেট তৈরি করতে পারি। এখানে দেখানো হবে কিভাবে এই দুটি প্রযুক্তি একসাথে কাজ করে।

১. `hx-swap-oob` কি?

hx-swap-oob একটি HTMX ফিচার যা সার্ভার থেকে প্রাপ্ত নতুন কন্টেন্টকে DOM-এ একটি ভিন্ন উপায়ে যুক্ত করতে সহায়তা করে, অর্থাৎ এটি মূল লক্ষ্য উপাদানের বাইরে থাকা উপাদানগুলি আপডেট করতে পারে। এটি সাধারণত কন্টেন্ট সন্নিবেশের জন্য ব্যবহার হয় যা পেজের অন্যান্য অংশের সাথে ইন্টারঅ্যাক্ট করে।

২. উদাহরণ সেটআপ

২.১. HTML ফাইল তৈরি করা

প্রথমে একটি HTML ফাইল তৈরি করুন, উদাহরণস্বরূপ index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Transitions with hx-swap-oob</title>
    <script src="https://unpkg.com/htmx.org@1.8.4"></script> <!-- HTMX CDN -->
    <style>
        /* Basic styles */
        .box {
            width: 100px;
            height: 100px;
            background-color: blue;
            margin: 20px;
            transition: transform 0.5s, opacity 0.5s;
            opacity: 1;
        }
        .box.hidden {
            opacity: 0;
            transform: scale(0.5);
        }
        .box.visible {
            opacity: 1;
            transform: scale(1);
        }
    </style>
</head>
<body>
    <h1>CSS Transitions and hx-swap-oob</h1>

    <!-- Button to add new box -->
    <button hx-get="/add-box" hx-target="#container" hx-swap="outerHTML" hx-swap-oob="true">Add Box</button>

    <div id="container">
        <div class="box visible"></div>
    </div>

    <script>
        document.addEventListener('htmx:beforeSwap', function(event) {
            // Add the hidden class to the box before it's replaced
            if (event.detail.target.id === 'container') {
                const boxes = event.detail.target.querySelectorAll('.box');
                boxes.forEach(box => box.classList.add('hidden'));
            }
        });

        document.addEventListener('htmx:afterSwap', function(event) {
            // Remove the hidden class after the new box is added
            const newBox = event.detail.elt.querySelector('.box');
            if (newBox) {
                newBox.classList.remove('hidden');
                newBox.classList.add('visible');
            }
        });
    </script>
</body>
</html>

২.২. সার্ভার সাইড কোড (Flask)

একটি নতুন Python ফাইল তৈরি করুন, উদাহরণস্বরূপ app.py এবং নিচের কোডটি যুক্ত করুন:

from flask import Flask, render_template_string

app = Flask(__name__)

@app.route('/')
def index():
    return render_template_string(open('index.html').read())

@app.route('/add-box')
def add_box():
    return '''
    <div class="box visible"></div>
    '''

if __name__ == '__main__':
    app.run(debug=True)

৩. সার্ভার চালানো

৩.১. টার্মিনালে সার্ভার চালান

python app.py

৪. ব্রাউজারে পরীক্ষা করা

ব্রাউজারে http://127.0.0.1:5000/ URL এ যান।
"Add Box" বোতামে ক্লিক করুন এবং দেখুন কিভাবে নতুন বক্স যুক্ত হচ্ছে এবং অ্যানিমেশন হচ্ছে।

সারসংক্ষেপ

CSS Transitions: উপাদানের স্টাইল পরিবর্তনের সময় স্নিগ্ধ গতিশীলতা তৈরি করে।
hx-swap-oob: সার্ভার থেকে প্রাপ্ত কন্টেন্টকে DOM-এ সন্নিবেশ করার জন্য ব্যবহৃত হয়, যা ব্যবহারকারী ইন্টারঅ্যাকশনের সময় আরো কার্যকরী হয়।
অ্যানিমেশন: HTMX এবং CSS এর মাধ্যমে একসাথে কাজ করে, যা ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করে।

HTMX এবং CSS Transitions একসাথে ব্যবহার করে, আপনি আরও ইন্টারঅ্যাকটিভ এবং কার্যকরী ওয়েব অ্যাপ্লিকেশন তৈরি করতে পারবেন।

Content added By

Md. Shakil khan

Content লোড এবং Transition Effects তৈরি করা

207

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": রেসপন্সটি #content div এ রেন্ডার করা হবে।
hx-swap="innerHTML": #content div এর ভিতরের কন্টেন্ট প্রতিস্থাপিত হবে।
CSS Fade-in Effect: .fade-in ক্লাসটি opacity শুরুতে 0 রাখে, এবং transition ব্যবহার করে ধীরে ধীরে opacity 1 এ আসে, যখন 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, এবং লোডার ব্যবহার করে কন্টেন্টকে আরও আকর্ষণীয় করা সম্ভব।

Content added By

Md. Shakil khan

উদাহরণসহ CSS এবং HTMX Integration

199

CSS এবং HTMX Integration উদাহরণ

HTMX এবং CSS একসাথে ব্যবহার করে আমরা ডাইনামিক ওয়েব অ্যাপ্লিকেশনগুলিতে স্নিগ্ধ স্টাইল এবং অ্যানিমেশন যোগ করতে পারি। এই উদাহরণে, আমরা একটি সরল To-Do List অ্যাপ তৈরি করব যেখানে ব্যবহারকারী নতুন টাস্ক যোগ করতে পারবেন এবং CSS ব্যবহার করে কিছু অ্যানিমেশন যুক্ত করব।

১. পরিবেশ সেটআপ

১.১. HTML ফাইল তৈরি করুন

প্রথমে একটি HTML ফাইল তৈরি করুন, উদাহরণস্বরূপ index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTMX and CSS Integration</title>
    <script src="https://unpkg.com/htmx.org@1.8.4"></script> <!-- HTMX CDN -->
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .task {
            padding: 10px;
            background-color: #f4f4f4;
            border: 1px solid #ddd;
            margin-bottom: 5px;
            transition: transform 0.3s ease, opacity 0.3s ease; /* CSS Transition */
        }
        .task.hidden {
            opacity: 0;
            transform: scale(0.9);
        }
    </style>
</head>
<body>
    <h1>My To-Do List</h1>
    <form hx-post="/add-task" hx-target="#task-list" hx-swap="beforeend">
        <input type="text" name="task" placeholder="Add a new task" required>
        <button type="submit">Add Task</button>
    </form>
    
    <h2>Tasks</h2>
    <div id="task-list">
        <!-- New tasks will be added here -->
    </div>
</body>
</html>

২. সার্ভার সাইড কোড (Flask)

২.১. Python Flask ব্যবহার করে সার্ভার তৈরি করুন

একটি নতুন Python ফাইল তৈরি করুন, উদাহরণস্বরূপ app.py, এবং নিচের কোডটি যুক্ত করুন:

from flask import Flask, render_template_string, request

app = Flask(__name__)

tasks = []

@app.route('/')
def index():
    return render_template_string(open('index.html').read())

@app.route('/add-task', methods=['POST'])
def add_task():
    task = request.form['task']
    tasks.append(task)
    return f'<div class="task">{task}</div>'  # Return new task as a div

if __name__ == '__main__':
    app.run(debug=True)

৩. সার্ভার চালানো

৩.১. টার্মিনালে সার্ভার চালান

python app.py

৪. ব্রাউজারে পরীক্ষা করা

ব্রাউজারে http://127.0.0.1:5000/ URL এ যান।
একটি নতুন টাস্ক যোগ করতে ফর্মটি ব্যবহার করুন এবং "Add Task" বোতামে ক্লিক করুন। এটি নতুন টাস্কটি #task-list এ যুক্ত করবে।

৫. অ্যানিমেশন যুক্ত করা

৫.১. অ্যানিমেশন যুক্ত করা

নতুন টাস্ক যুক্ত করার সময় অ্যানিমেশন প্রদর্শন করতে নিচের JavaScript কোডটি HTML ফাইলে যুক্ত করুন:

<script>
    document.addEventListener('htmx:afterSwap', function(event) {
        const newTask = event.detail.elt.querySelector('.task');
        if (newTask) {
            newTask.classList.remove('hidden'); // Remove hidden class to fade in
            setTimeout(() => newTask.classList.add('hidden'), 3000); // Add hidden class after 3 seconds
        }
    });
</script>

ব্যাখ্যা: এখানে, নতুন টাস্ক যুক্ত করার পরে একটি অ্যানিমেশন তৈরি করা হয়েছে। টাস্ক যুক্ত হওয়ার সময় hidden ক্লাসটি সরিয়ে দেওয়া হয় এবং 3 সেকেন্ড পরে এটি আবার যুক্ত করা হয়, যা অ্যানিমেশন তৈরি করে।

সারসংক্ষেপ

HTMX: AJAX কলের মাধ্যমে ডাইনামিক কন্টেন্ট লোড করে।
CSS Transitions: টাস্ক যোগ করার সময় স্নিগ্ধ পরিবর্তন তৈরি করে।
JavaScript: HTMX এর মাধ্যমে লোড হওয়া কন্টেন্টে অ্যানিমেশন যুক্ত করে।

HTMX এবং CSS এর সংযোগ ব্যবহার করে আপনি আরও কার্যকরী এবং আকর্ষণীয় ওয়েব অ্যাপ্লিকেশন তৈরি করতে সক্ষম হবেন।

Content added By

Md. Shakil khan

HTMX পরিচিতি HTMX এর বেসিক ধারণা HTMX ইন্সটলেশন এবং সেটআপ HTMX Attributes এবং তাদের ব্যবহার AJAX অনুরোধ এবং Partial Page Updates

CSS Transitions এবং Animations