Adding a New Section

1. Let's say we want to add a new section. First, we need to update the navigation menu by adding a new <li></li> element:

Always remember to add the classes nav__tab, nav__tab--[section number] as well as the data attribute ( data-tab=[section number] ) with its respective section number.

---

1. Then we can add the section content at the bottom of the code, after the section:

Remember to add the classes section__tab and section__tab--[section number] with its respective section number since it is necessary for the section to be displayed.

---

1. To make the index and title appear you can use the following structure:

---

1. Highlight Effect to a Title

To highlight a word in the title (or any other word in the template), follow these steps:

1. Wrap the word you want to highlight in a <span> tag.

2. Add the class marked to the <span> tag.

For example, in your HTML, it would look like this:

<h2 class="title-section w-100">
    New 
    <span class="marked">Section</span>
</h2>

---

1. How to Apply Animations to Elements:

• In the HTML, simply add the data-animation attribute to the element you want to animate, and assign the animation name.

For example:

<h3 class="title-section w-100" data-animation="slide-right">
    New 
    <span class="marked">Section</span>
</h3>

• The available animations in your template are defined in the CSS using @keyframes to create transformation and opacity transitions, as shown below:

/*==== Text and heading animations ====*/
.slide-up {
    animation: slide-up 1s ease forwards;
}

.slide-right {
    animation: slide-right 1s ease forwards;
}

.slide-left {
    animation: slide-left 1s ease forwards;
}

/* Keyframes */
@keyframes slide-up {
    from {
        transform: translateY(20%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slide-right {
    from {
        transform: translateX(5%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slide-left {
    from {
        transform: translateX(-5%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

Each animation has a set duration and transition type (e.g., ease, forwards) to control the timing and end state of the animation.

Ensure that the HTML elements you want to animate have the appropriate data-animation attribute.

• The animations are controlled by the app.js file located in the js folder. This script ensures that the correct animation is applied when the data-animation attribute is detected in the HTML.

---

1. How to Apply Animations Using the Intersection Observer:

Certain elements in the template are animated when they come into view, thanks to the Intersection Observer. These animations are triggered by adding either the animated-up or animated-scale class to an element.

HTML Structure

To animate an element, simply add the animated-up or animated-scale class to it. For example:

<article class="service animated-scale">
    <!--Content -->
</article>

CSS Animations

The animated-up and animated-scale classes are defined in the CSS to create the animations. When the element enters the viewport, these classes are animated with transitions for opacity and transform:

/* Observer animations */
.animated-up {
    opacity: 0;
    transform: translateY(80px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.animated-up.animated-up-item {
    opacity: 1;
    transform: translateY(0);
}

.animated-scale {
    opacity: 0;
    transform: scale(0);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.animated-scale.animated-scale-item {
    opacity: 1;
    transform: scale(1);
}

JavaScript (Intersection Observer)

The Intersection Observer in your app.js file handles the detection when an element with the animated or animated-scale class comes into view. When the element is visible, the observer adds the animated-item or animated-scale-item classes to trigger the animation:

// Observer
document.addEventListener("DOMContentLoaded", () => {
    const animatedItem = document.querySelectorAll(".animated");
    const animatedScale = document.querySelectorAll('.animated-scale')

    const observer = new IntersectionObserver(
        (entries) => {
            entries.forEach((entry, index) => {
                if (entry.isIntersecting) {
                    setTimeout(() => {
                        entry.target.classList.add("animated-item");
                        entry.target.classList.add("animated-scale-item");
                    }, index * 100);
                } else {
                    entry.target.classList.remove("animated-item");
                    entry.target.classList.remove("animated-scale-item");
                }
            });
        },{
            threshold: 0.1,
        }
    );

    animatedScale.forEach(item => observer.observe(item));
    animatedItem.forEach(item => observer.observe(item));
});

This script ensures that elements with the animated or animated-scale class are animated when they are scrolled into view. The setTimeout with the index * 100 adds a slight delay to each element to make the animations appear sequentially.