Hello, I am learning to connect libraries, while it is not very successful, so I turned to you for advice =) I chose the link to the githabb for this unpretentious library. As I understand it, you just need to connect scripts, styles and add such an attribute data-aos = "animation_name" to the element, which I did, but nothing works. Can you tell me what I did wrong? I attach my simple layout, maybe there is an error.

*{ padding: 0; margin: 0; } header{ background-color: #6C8AD5; height: 100vh; display: flex; justify-content: center; align-items: center; } header div h1{ color: white; } .container{ display: flex; justify-content: space-around; flex-wrap: wrap; background-color: #FFC040; } .item{ background-color: #FFD173; min-width: 200px; min-height: 300px; margin:20px; } 
 <!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Пример</title> <link rel="stylesheet" type="text/css" href="css/style.css"> <link rel="stylesheet" type="text/css" href="bower_components/aos/dist/aos.css"> </head> <body> <header> <div><h1>Пробная страница</h1></div> </header> <div class="container"> <div class="item"><h1>1</h1></div> <div class="item"><h1>2</h1></div> <div class="item"><h1>3</h1></div> </div> <!-- JS SECTION --> <script src="bower_components/aos/dist/aos.js"></script> </body> </html>

  • most likely you have an error in the path to the file bower_components/aos/dist/aos.js What error does the console write? - Dmitriy Kondratiuk

1 answer 1

In your example, you need to fix a few things:

№1 Check that aos.css and aos.js are loaded - they should be either in the folder with your project and connected locally, or connected via CDN:

 <link href="https://cdn.rawgit.com/michalsnik/aos/2.0.4/dist/aos.css"> <script src="https://cdn.rawgit.com/michalsnik/aos/2.0.4/dist/aos.js">

№2 Add attributes for data-aos blocks, like this:

 <div class="container"> <div class="item" data-aos="zoom-out-left"> <h1>1</h1> </div> <div class="item" data-aos="zoom-out-down"> <h1>2</h1> </div> <div class="item" data-aos="zoom-out-right"> <h1>3</h1> </div> </div>

№3 Initialize AOS - for this write js-file with your scripts:

 AOS.init();

Or add the <script> tag to your layout:

 <script> AOS.init(); </script>

Then everything will work. Working example: https://jsfiddle.net/gambala/0L7vyz4v/