/Scroll-Animation

Primary LanguageHTML

Scroll-Animation

This is apart of the 50 projects in 50 days challenge and is the sixth project.

Table of contents

Overview

The challenge

  • To create a scroll animation, where the boxes transition to frame as you scroll down. The challenge involves HTML, CSS and Javascript.

Screenshot

Mobile Preview

screenshot

Mobile Preview - active

screenshot

Desktop Preview

screenshot

Desktop Preview - active

screenshot

Links

My process

Built with

  • Semantic HTML5 markup
  • Plain CSS
  • Vanilla Javascript
  • Flexbox

What I learned

I learned more about the window and getBoundingClientRect() property within Javascript and its use.

Javascript - close and open navbar:

window.addEventListener("scroll", checkBoxes)

function checkBoxes() {
    const triggerBottom = window.innerHeight / 5 * 4;

    boxes.forEach(box => {
        const boxTop = box.getBoundingClientRect().top;

        if(boxTop < triggerBottom) {
            box.classList.add("show");
        } else {
            box.classList.remove("show");
        }
    }) 
}

Continued development

For future developments, I should implement the features/concepts learned over the last few projects and future projects, into practical projects/challenges such as the frontendmentor.io projects.

Author