Slide Animation

Blog post description.

Ai Computer Class

4/27/20254 min read

Interactive Sliding Boxes: Kaise Banaye aur Kaha Use Kare

By Akshita Institute | Published on April 27, 2025

Namaste dosto! Aaj hum Akshita Institute ke blog mein ek shandaar web development topic par baat karne ja rahe hain: Interactive Sliding Boxes. Ye ek aisa UI component hai jo modern websites ko attractive aur user-friendly banata hai. Is blog mein hum aapko batayenge ki isko kaise banaya ja sakta hai aur kahan iska istemal kiya ja sakta hai. To chaliye shuru karte hain!

Sliding Boxes Kya Hain?

Sliding boxes ek interactive UI element hain jo hover karne par ek chhota sa content box slide karke dikhata hai. Ye component transparent background, blurred effects, aur smooth animations ke saath aata hai, jo users ko ek premium feel deta hai. Isme ek main box hota hai (jo hum "top-box" kehte hain) aur ek hidden box (jo "slide-box" kehlata hai) jo hover karne par right side mein slide karta hai.

Features:

  • Fixed Desktop Layout: Desktop par 380px × 300px ka container.

  • Responsive Mobile Design: Mobile par 90vw width aur auto height.

  • Hover Effects: Top-box aur slide-box dono right mein slide karte hain.

  • Borders aur Transparency: Subtle borders aur frosted glass effect ke saath.

  • Accessibility: ARIA attributes ke saath keyboard-friendly.

Ye component dekhne mein sundar hai aur user engagement badhane ke liye perfect hai.

Isko Kaise Banaye?

Akshita Institute mein hum apko web development ke practical skills sikhate hain, aur ye sliding boxes banane ka ek mazedar project ho sakta hai. Chaliye step-by-step dekhte hain:

Step 1: HTML Structure

Sabse pehle, hum ek simple HTML structure banayenge jo container, top-box, aur slide-box ko define karega.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sliding Boxes</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div class="container"> <div class="top-box" aria-expanded="false"> Box 1 <div class="slide-box" role="region" aria-hidden="true">Content 1</div> </div> <!-- Similar boxes for Box 2 to Box 5 --> </div> </body> </html>

  • Container: Sabhi boxes ko hold karta hai.

  • Top-Box: Main box jo hover trigger karta hai.

  • Slide-Box: Hidden content jo slide karta hai.

Step 2: CSS Styling

Ab hum CSS ka istemal karke isko style aur animation denge. Niche ek simplified CSS code hai:

html, body { margin: 0; padding: 0; height: 400px; width: 380px; } body { font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: flex-start; background: transparent; backdrop-filter: blur(10px); } .container { width: 380px; height: 300px; display: flex; flex-direction: column; gap: 10px; margin-top: 20px; background: rgba(245, 245, 245, 0.1); backdrop-filter: blur(10px); border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.3); } .top-box { position: relative; width: 200px; height: 40px; background-color: rgba(44, 62, 80, 0.8); color: #ecf0f1; display: flex; justify-content: center; align-items: center; font-size: 16px; font-weight: bold; border-radius: 5px; cursor: pointer; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); border: 1px solid rgba(255, 255, 255, 0.5); transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease; } .slide-box { position: absolute; top: 50px; left: 0; width: 200px; height: 60px; background-color: rgba(236, 240, 241, 0.8); color: #2c3e50; display: flex; justify-content: center; align-items: center; font-size: 14px; border-radius: 0 5px 5px 5px; opacity: 0; transform: translateX(100%); transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.5s ease; border: 1px solid rgba(44, 62, 80, 0.5); } .top-box:hover, .slide-box:hover { transform: translateX(20px); } .top-box:hover .slide-box, .slide-box:hover { opacity: 1; transform: translateX(90%); } /* Mobile Responsive */ @media (max-width: 768px) { html, body { height: auto; width: 90vw; max-width: 380px; } .container { width: 90vw; height: auto; border: 1px solid rgba(255, 255, 255, 0.2); } .top-box { width: 60vw; height: 35px; font-size: clamp(12px, 3.5vw, 14px); border: 1px solid rgba(255, 255, 255, 0.4); } .slide-box { width: 60vw; height: 50px; top: 45px; font-size: clamp(12px, 3vw, 12px); border: 1px solid rgba(44, 62, 80, 0.4); } }

Step 3: Key Features Add Kare

  • Hover Animation: transform: translateX ka use karke top-box 20px aur slide-box 180px right slide karta hai.

  • Relative Positioning: Slide-box hamesha top-box ke 10px niche rehta hai (top: 50px desktop par, top: 45px mobile par).

  • Accessibility: ARIA attributes jaise aria-expanded aur aria-hidden add kiye hain.

Step 4: Testing

  • Desktop: Chrome, Firefox, aur Safari par test karein ki animations smooth hain.

  • Mobile: iPhone aur Android devices par responsive design check karein.

  • Performance: backdrop-filter: blur low-end devices par slow ho sakta hai, to fallback style add karein:

    @supports not (backdrop-filter: blur(10px)) { .container { background: rgba(245, 245, 245, 0.5); } }

Iska Istemal Kahan Kar Sakte Hain?

Ye sliding boxes component versatile hai aur kai jagah use kiya ja sakta hai. Akshita Institute ke experts ne kuch ideas compile kiye hain:

  1. Navigation Menus:

    • Websites ke dropdown ya sidebar menus ke liye use karein. Slide-box mein sub-menu items dikhaye ja sakte hain.

    • Example: Ek e-commerce site par categories (Electronics, Fashion) ke sub-items slide karke dikhayein.

  2. Portfolio Websites:

    • Apne projects ya skills ko showcase karne ke liye. Top-box mein project title aur slide-box mein description ya link daalein.

    • Example: Ek designer apne artwork ke thumbnails dikhaye, hover par details slide kare.

  3. FAQ Sections:

    • Frequently Asked Questions ke liye interactive UI banayein. Top-box mein question aur slide-box mein answer dikhayein.

    • Example: Ek coaching institute ke website par courses ke FAQs ke liye.

  4. Product Features:

    • E-commerce ya SaaS websites par product features highlight karne ke liye. Top-box mein feature ka naam aur slide-box mein details.

    • Example: Ek software company apne tools ke benefits dikhaye.

  5. Interactive Dashboards:

    • Admin panels ya user dashboards mein quick info dikhane ke liye. Top-box mein category aur slide-box mein summary.

    • Example: Ek analytics tool mein metrics (Sales, Traffic) ke details slide karein.

Akshita Institute Ke Saath Seekhein

Akshita Institute mein hum aapko HTML, CSS, aur JavaScript jaise skills sikhate hain jo aapko aise interactive components banane mein madad karte hain. Hamare courses mein aap practical projects ke through real-world applications seekh sakte hain. Is sliding boxes project ko banane ke liye hum aapko:

  • Step-by-Step Guidance: HTML structure se lekar CSS animations tak.

  • Responsive Design: Mobile aur desktop ke liye optimized coding.

  • Accessibility: ARIA aur keyboard navigation jaise best practices.

  • Performance Optimization: Fast aur smooth UI ke liye tips.

Hamare Web Development Bootcamp mein enroll karein aur apni skills ko next level par le jayein! Visit Akshita Institute for more details.

Conclusion

Sliding boxes ek powerful aur visually appealing UI component hain jo modern web design mein user experience ko enhance karte hain. Is blog mein humne dekha ki isko HTML aur CSS ke saath kaise banaya ja sakta hai aur iska istemal navigation, portfolios, FAQs, aur dashboards mein kaise kiya ja sakta hai. Akshita Institute ke saath aap aise projects banane ke liye zaruri skills seekh sakte hain.

Aapko ye blog kaisa laga? Kya aap is component ko apne project mein use karna chahte hain? Comment mein batayein aur hume follow karein for more web development tips!

Happy Coding!
Team Akshita Institute

Note: Code snippets simplified hain for clarity. Full code aur advanced features ke liye hamare course join karein!