A collection of modern CSS UI components with smooth animations and effects, designed to enhance user experience. Each component is lightweight, responsive, and easy to integrate into any project.
A beautiful scroll animation effect where elements fade and slide in as they come into view.
✔ CSS-only animation (No JavaScript required)
✔ Smooth entry effect using @keyframes
✔ Works with multiple elements
✔ Lightweight and easy to integrate
git clone https://github.com/RitikRK96/Css-Animations.git
cd Css-Animations/Animate on Scroll
start index.html # Windows
open index.html # macOS
An elegant 3D hover effect for cards using pure CSS. The card zooms forward while adjacent cards react dynamically.
✔ Pure CSS (No JavaScript required)
✔ 3D Perspective Effect
✔ Smooth Hover Transitions
✔ Fully Responsive
git clone https://github.com/RitikRK96/Css-Animations.git
cd Css-Animations/Card Hover
start index.html # Windows
open index.html # macOS
A sleek, autoplaying image carousel with text overlays on each slide. The carousel automatically transitions every 3 seconds, ensuring a smooth and visually appealing experience.
✔ Autoplay functionality (every 3 seconds)
✔ Smooth scrolling transition
✔ Text overlays with headings and descriptions
✔ Dark-themed background for a modern look
✔ Responsive & mobile-friendly
git clone https://github.com/RitikRK96/Css-Animations.git
cd Css-Animations/Carousel
start index.html # Windows
open index.html # macOS
This project showcases an image gallery where images with varying aspect ratios are displayed in a responsive and stylish layout.
✔ Responsive Image Layout
✔ Multi-column Design
✔ Text Section with Multiple Columns
✔ CSS Grid & Flexbox for Layout Management
✔ Lightweight & Simple Design
git clone https://github.com/RitikRK96/Css-Animations.git
cd Css-Animations/Different Aspect Ratio
start index.html # Windows
open index.html # macOS
A stunning background animation using HTML5 Canvas and JavaScript, featuring a network of interconnected particles that dynamically move, creating an engaging and futuristic effect.
✔ Smooth Animated Particle Network
✔ Lightweight & Optimized Performance
✔ Fully Responsive Canvas Background
✔ Customizable Particle Size & Speed
✔ Easy to Integrate into Any Website
git clone https://github.com/RitikRK96/Css-Animations.git
cd Css-Animations/Background Animations
start index.html # Windows
open index.html # macOS
You can tweak animation settings in script.js:
const settings = {
particleCount: 50,
lineOpacity: 0.2,
speed: 2
};
Simply update these values to customize the animation!
This repository will include more CSS components like buttons, loaders, navigation bars, and more. Stay tuned!
⭐ Star this repo if you find it helpful!
📌 Author: Ritik Kumar
💡 Contributions & Suggestions Welcome!