Adding animation effects to long vertical pages can significantly enhance the user’s visual experience.
In this article, we’ll explain how to implement scroll animations using the popular JavaScript library “aos.js (Animate On Scroll Library)”.
We provide detailed examples of CSS, HTML, and JavaScript so that even beginners with little coding experience can easily follow along.
What is aos.js?
aos.js is a library that executes animations based on scroll position.
It is simple, lightweight, and packed with a wide range of animation options, making it easy for beginners to use intuitively.
Key features include:
- Various animation effects (fade, zoom, flip, etc.)
- Lightweight and fast
- Responsive support
- Intuitive HTML attribute-based configuration
- Customizable options
CSS Code for Scroll Animations on Long Pages
Below is a CSS example for grid box areas (.aos-all, .aos-item, .aos-item__inner) using aos.js.
Load the aos.css file and define the CSS for the grid box area. Customize as needed.
<link rel="stylesheet" href="aos.css" />
<style type="text/css">
body{
text-align: center;
}
h1{
text-align: center;
font-size: 22px;
padding: 20px 0 0 0;
line-height: 2em;
}
*,
*:before,
*:after {
box-sizing: border-box;
}
.aos-all {
width: 1000px;
max-width: 98%;
margin: 10vh auto 0 auto;
}
.aos-item {
display: inline-block;
float: left;
width: 33.3333%;
height: 300px;
padding: 20px;
}
.aos-item__inner {
position: relative;
width: 100%;
height: 100%;
float: left;
background: #333333;
line-height: 260px;
text-align: center;
color: #fff;
}
@media screen and (max-width: 800px) {
.aos-item {
width: 50%;
}
}
</style>
HTML Code for Scroll Animations on Long Pages
Add the data-aos attribute to each box area to apply animations on scroll.
Prepare multiple grid box areas (class=”aos-item”) that will appear with animation when scrolling.
Specify the animation pattern with data-aos=”animation-pattern” for each box.
– fade-up
– fade-down
– fade-right
– fade-left
– fade-up-right
– fade-up-left
And many more animation options are available.
<h1>aos.jsを使って、縦長ページスクロールアニメーションを実装してます。<br>下にスクロールして見てください。</h1>
<div id="transcroller-body" class="aos-all">
<div class="aos-item" data-aos="fade-up">
<div class="aos-item__inner"><h3>1</h3></div>
</div>
<div class="aos-item" data-aos="fade-down">
<div class="aos-item__inner"><h3>2</h3></div>
</div>
<div class="aos-item" data-aos="zoom-out-down">
<div class="aos-item__inner"><h3>3</h3></div>
</div>
<div class="aos-item" data-aos="flip-down">
<div class="aos-item__inner"><h3>4</h3></div>
</div>
<div class="aos-item" data-aos="flip-up">
<div class="aos-item__inner"><h3>5</h3></div>
</div>
<div class="aos-item" data-aos="fade-down">
<div class="aos-item__inner"><h3>6</h3></div>
</div>
<div class="aos-item" data-aos="fade-in">
<div class="aos-item__inner"><h3>7</h3></div>
</div>
<div class="aos-item" data-aos="fade-down">
<div class="aos-item__inner"><h3>8</h3></div>
</div>
<div class="aos-item" data-aos="fade-in">
<div class="aos-item__inner"><h3>9</h3></div>
</div>
<div class="aos-item" data-aos="fade-down">
<div class="aos-item__inner"><h3>10</h3></div>
</div>
<div class="aos-item" data-aos="fade-up">
<div class="aos-item__inner"><h3>11</h3></div>
</div>
<div class="aos-item" data-aos="fade-down">
<div class="aos-item__inner"><h3>12</h3></div>
</div>
<div class="aos-item" data-aos="fade-in">
<div class="aos-item__inner"><h3>13</h3></div>
</div>
<div class="aos-item" data-aos="fade-up">
<div class="aos-item__inner"><h3>14</h3></div>
</div>
<div class="aos-item" data-aos="fade-in">
<div class="aos-item__inner"><h3>15</h3></div>
</div>
<div class="aos-item" data-aos="fade-up">
<div class="aos-item__inner"><h3>16</h3></div>
</div>
<div class="aos-item" data-aos="fade-down">
<div class="aos-item__inner"><h3>17</h3></div>
</div>
<div class="aos-item" data-aos="fade-up">
<div class="aos-item__inner"><h3>18</h3></div>
</div>
<div class="aos-item" data-aos="zoom-out">
<div class="aos-item__inner"><h3>19</h3></div>
</div>
<div class="aos-item" data-aos="fade-up">
<div class="aos-item__inner"><h3>20</h3></div>
</div>
<div class="aos-item" data-aos="zoom-out">
<div class="aos-item__inner"><h3>21</h3></div>
</div>
<div class="aos-item" data-aos="fade-in">
<div class="aos-item__inner"><h3>22</h3></div>
</div>
<div class="aos-item" data-aos="zoom-out-up">
<div class="aos-item__inner"><h3>23</h3></div>
</div>
<div class="aos-item" data-aos="zoom-out-down">
<div class="aos-item__inner"><h3>24</h3></div>
</div>
<div class="aos-item" data-aos="fade-in">
<div class="aos-item__inner"><h3>25</h3></div>
</div>
<div class="aos-item" data-aos="fade-in">
<div class="aos-item__inner"><h3>26</h3></div>
</div>
<div class="aos-item" data-aos="fade-in">
<div class="aos-item__inner"><h3>27</h3></div>
</div>
<div class="aos-item" data-aos="fade-in">
<div class="aos-item__inner"><h3>28</h3></div>
</div>
<div class="aos-item" data-aos="fade-in">
<div class="aos-item__inner"><h3>29</h3></div>
</div>
<div class="aos-item" data-aos="fade-in">
<div class="aos-item__inner"><h3>30</h3></div>
</div>
<div class="aos-item" data-aos="fade-in">
<div class="aos-item__inner"><h3>31</h3></div>
</div>
<div class="aos-item" data-aos="fade-in">
<div class="aos-item__inner"><h3>32</h3></div>
</div>
<div class="aos-item" data-aos="fade-in">
<div class="aos-item__inner"><h3>33</h3></div>
</div>
</div>
JavaScript Code for Implementing Scroll Animations with aos.js
Load aos.js and initialize the library using AOS.init({options}). You can also configure easing, delay, and other settings with options.
<script src="aos.js"></script>
<script>
AOS.init({
easing: 'ease-in-out-sine'
});
</script>
Demo Page Using aos.js for Scroll Animations on Long Pages
Below is a live demo page.
Demo page using aos.js for scroll animations on long pages
Source: AOS – Animate on Scroll Library
Here is the official source:
AOS – Animate on Scroll Library
Conclusion
Using aos.js, you can easily add dynamic animations to long web pages.
It’s a beginner-friendly library, so give it a try!
* Please use it at your own risk when reusing.
Do not copy the Google Analytics tag inside the head tag of the demo page.
