Header Banner Animations

September 2, 2023 1 min read Banner Examples AOS Animations

Apply AOS animations on header banner title and description.

On this page

Donate

Configurations

You’ll need to turn on the markup.goldmark.parser.attribute.block, to attach attributes on title and description.

Similarly, you can attach the AOS animations on any content.

hugo.toml

1[markup]
2  [markup.goldmark]
3    [markup.goldmark.parser]
4      [markup.goldmark.parser.attribute]
5        block = true
6        title = true

hugo.yaml

1markup:
2  goldmark:
3    parser:
4      attribute:
5        block: true
6        title: true

hugo.json

 1{
 2   "markup": {
 3      "goldmark": {
 4         "parser": {
 5            "attribute": {
 6               "block": true,
 7               "title": true
 8            }
 9         }
10      }
11   }
12}

Requirements

Module
`github.com/hbstack/header/modules/banner`
`github.com/hugomods/aos`

Source Code

 1---
 2header:
 3  banner:
 4    description: |
 5      Apply AOS animations on titles and descriptions to make the page impressive.
 6      { data-aos="fade-up" data-aos-delay="200" }      
 7    img: /images/banners/black.jpg
 8    title: |
 9      Header Banner Animations
10      { data-aos="fade-up" }      
11---