day6 Scroll Animation

 

 

 

 

HTML

 

CSS

.box:nth-of-type(even) {

transform: translateX(-200%);

}

.box.show {

transform: translateX(0);

}

 

JS

window.addEventListener("scroll", checkBoxes);

 

scroll event

 

The scroll event fires when the document view has been scrolled. To detect when scrolling has completed, see the Document: scrollend event. For element scrolling, see Element: scroll event.

addEventListener("scroll", (event) => {});

onscroll = (event) => {};

 

 

 

boxes.forEach((box) => {

const boxTop = box.getBoundingClientRect().top;

if (boxTop < triggerBottoms) {

box.classList.add("show");

} else {

box.classList.remove("show");

}

classList

 

The Element.classList is a read-only property

returns a live DOMTokenList collection of the class attributes of the element. This can then be used to manipulate the class list.

Although the classList property itself is read-only, you can modify its associated DOMTokenList using the add(), remove(), replace(), and toggle() methods.

1.add()

2.remove()

3.replace()

4.toggle()