A lightweight JavaScript library for adding scroll-triggered animations to your web projects. Easily integrate animated elements that come into view during scrolling.
Follow these steps to use the Simple AOS Library in your projects:
- Clone this repository to your local machine:
git clone https://github.com/Pawanhirumina/simple-aos-library.git- Copy the
aos.jsandaos.cssfiles from the cloned repository to your project directory.
- Include the Simple AOS Library files in the section of your HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="aos.css">
<script src="aos.js"></script>
<title>Your Project with Simple AOS</title>
</head>
<body>
<!-- Your content here -->
<script>
document.addEventListener('DOMContentLoaded', function () {
const aosItems = document.querySelectorAll('.aos-item');
function isElementInViewport(el) {
const rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)
);
}
function handleScroll() {
aosItems.forEach(item => {
const aosType = item.getAttribute('data-aos');
const hasAnimationClass = item.classList.contains(`aos-${aosType}`);
if (isElementInViewport(item) && !hasAnimationClass) {
// Add the animation class
item.classList.add(`aos-${aosType}`);
} else if (!isElementInViewport(item) && hasAnimationClass) {
// Remove the animation class if the element is no longer in view
item.classList.remove(`aos-${aosType}`);
}
});
}
window.addEventListener('scroll', handleScroll);
window.addEventListener('resize', handleScroll);
// Initial check on page load
handleScroll();
});
</script>
</body>
</html>Now, you can add the data-aos attribute to the HTML elements you want to animate:
<div class="aos-item" data-aos="fade-up">
<h1>Welcome to Your Project</h1>
</div>
<div class="aos-item" data-aos="fade-left">
<p>This is a simple example of using Simple AOS.</p>
</div>
<div class="aos-item" data-aos="fade-right">
<p>Scroll down to see animations in action.</p>
</div>Customize your animations by adjusting settings in the aos.init() function in the included JavaScript script. Open your HTML file in a web browser, and scroll down to see the animations in action.
That's it! You have successfully integrated the Simple AOS Library into your project. Happy scrolling and animating! 🚀