I specialize in javascript and am working on adding the CSS class .is-slideUp to each card__item element created from a data object, in order to achieve a sliding-up animation effect.
Although the .is-slideUp class name appears in the console, it does not reflect in the elements. I have attempted using setTimeout but it did not resolve the issue.
The desired outcome is to have each element structured like this:
<div class="card__item is-slideUp">If anyone has solutions or suggestions, your input would be greatly appreciated. Thank you!
const data = [
{
content: [
{ card: "Card Title 1", text: "Card Text 1 Card Text 1 Card Text 1" },
{ card: "Card Title 2", text: "Card Text 2 Card Text 2 Card Text 2" },
{ card: "Card Title 3", text: "Card Text 3 Card Text 3 Card Text 3" },
{ card: "Card Title 4", text: "Card Text 4 Card Text 4 Card Text 4" },
{ card: "Card Title 5", text: "Card Text 5 Card Text 5 Card Text 5" },
{ card: "Card Title 6", text: "Card Text 6 Card Text 6 Card Text 6" },
],
},
];
const output = document.querySelector(".card__output");
async function load() {
const json = await data;
for (let i in json) {
const wrap = document.createElement("div");
wrap.className = "card__wrap";
for (let j in json[i].content) {
const card = document.createElement("div");
card.className = "card__item";
const h3 = document.createElement("h3");
h3.className = "card__title";
h3.textContent = `${json[i].content[j].card}`;
const p = document.createElement("p");
p.className = "card__text";
p.textContent = `${json[i].content[j].text}`;
wrap.appendChild(card);
card.appendChild(h3);
card.appendChild(p);
}
output.appendChild(wrap);
}
}
load();
slideUp();
const windowHeight = window.innerHeight;
const cards = document.querySelectorAll(".card__item");
function slideUp() {
window.addEventListener("scroll", function () {
for (let i = 0; i < cards.length; i++) {
console.log(cards[i]);
if ( windowHeight > cards[i].getBoundingClientRect().top + windowHeight / 5 ) {
cards[i].classList.add("is-slideUp");
}
}
});
} * {
margin: 0;
padding: 0;
}
header,
footer {
height: 200px;
background: #ccc;
}
.card__output {
width: 100%;
height: 100%;
}
.card__wrap {
width: 100%;
display: flex;
flex-wrap: wrap;
flex-grow: 1;
margin-left: calc(-10% / 3);
}
.card__item {
/* opacity: 0; */
transition: all 1s;
transform: translateY(200px);
display: flex;
flex-direction: column;
width: 30%;
height: 300px;
margin-top: 30px;
margin-left: calc(10% / 3);
background: #ededed;
}
.card__title {
margin: 1.8rem auto;
font-size: 2.2rem;
font-weight: bold;
text-align: center;
}
.is-slideUp {
background: pink;
opacity: 1;
transform: translateY(0);
}<header>header</header>
<div class="card__output">
<!--output data object-->
</div>
<footer>footer</footer>