🚀 Infinite Scroll UI

A smooth, modern infinite-scroll web app built with HTML, CSS, and JavaScript featuring animated cards, hover effects, loaders, and dynamic content generation using the Intersection Observer API.

---

📸 Preview

---

🎬 Demo Video

🎥 Watch Demo: click to watch

---

🔗 Live Demo

🌐 Live Link: https://dileep-kumawat.github.io/Infinite-Scroll-using-html-css-and-js/

---

📁 Project Structure

/project
 ├── index.html      # Main UI
 ├── style.css       # Full styling + animations
 └── script.js       # Infinite scroll logic

---

✨ Features

🎡 Infinite Scroll

• Uses IntersectionObserver
• Automatically loads 10 new cards every time the sentinel enters view
• Smooth loader animation while fetching new content

🧊 Modern Card UI

Each card includes:

• Dynamic SVG animation
• Like, comment & view buttons
• Hover animations & 3D-styled floating background
• Toggle switch UI

⚡ Optimized Performance

• Efficient DOM batching
• Minimal reflows
• Responsive grid layout
• Handles unlimited data loading

---

🛠️ Technologies Used

• HTML5

• CSS3 (Animations, Grid, 3D transforms)

• JavaScript

  • IntersectionObserver
  • DOM Manipulation
  • Asynchronous loading

---

🚀 How it Works

1. A sentinel element is placed at the bottom.

2. The IntersectionObserver watches when the sentinel appears on screen.

3. When triggered, loadElem() runs:

   • Shows loader
   • Adds 10 new cards dynamically
   • Hides loader
   • Repeats infinitely

---

🧩 Code Snippet — Infinite Scroll Core Logic

const observer = new IntersectionObserver(entries => {
    if (entries[0].isIntersecting) {
        loadElem();
    }
});

observer.observe(document.querySelector("#sentinel"));

---

📦 Installation & Usage

1. Clone the repo

git clone https://github.com/Dileep-kumawat/Infinite-Scroll-using-html-css-and-js.git

2. Open the project

cd infinite-scroll

3. Run it Just open index.html in your browser. No server needed.

---

🧑‍💻 Author

Built by Dileep 🔥 Passionate Frontend & Full-Stack Developer

• 📧 dileepkumawat525@gmail.com
• 🔗 LinkedIn

---

⭐ Show Your Support

If you like this project, please ⭐ it on GitHub!

---