Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Aprenda Adding AOS to Your Project | Getting Started with AOS
HTML Scroll Animations with AOS

bookAdding AOS to Your Project

To add AOS to your project, start by including the AOS stylesheet in the <head> section of your HTML using a CDN link. This provides all the necessary animation styles. Next, add the AOS JavaScript file just before the closing </body> tag, also via CDN. Initializing AOS with AOS.init(); activates the library and prepares it to animate elements as they scroll into view.

To animate an element, add the data-aos attribute directly to the HTML tag you want to animate. The value of this attribute, such as "fade-up", tells AOS which built-in animation to apply. In the example above, the heading will smoothly fade in and move upward as you scroll to it, demonstrating that AOS is working correctly.

question mark

What is the primary purpose of the data-aos attribute in the HTML example above?

Select the correct answer

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 1. Capítulo 2

Pergunte à IA

expand

Pergunte à IA

ChatGPT

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

Suggested prompts:

Can you show me an example of how to use the `data-aos` attribute in my HTML?

What are some other animation options I can use with AOS?

How do I customize the duration or delay of the animations with AOS?

bookAdding AOS to Your Project

Deslize para mostrar o menu

To add AOS to your project, start by including the AOS stylesheet in the <head> section of your HTML using a CDN link. This provides all the necessary animation styles. Next, add the AOS JavaScript file just before the closing </body> tag, also via CDN. Initializing AOS with AOS.init(); activates the library and prepares it to animate elements as they scroll into view.

To animate an element, add the data-aos attribute directly to the HTML tag you want to animate. The value of this attribute, such as "fade-up", tells AOS which built-in animation to apply. In the example above, the heading will smoothly fade in and move upward as you scroll to it, demonstrating that AOS is working correctly.

question mark

What is the primary purpose of the data-aos attribute in the HTML example above?

Select the correct answer

Tudo estava claro?

Como podemos melhorá-lo?

Obrigado pelo seu feedback!

Seção 1. Capítulo 2
some-alt