I want to display elements on the web when scrolling but it only works for me with one of the classes. If I try to add elements, none of them work anymore. In the code below, it works perfectly for the "paragraphsmov" class, and all the paragraphs do what I want, but I'm trying to add this same effect to the Id "symptomsArticle". I have tried to add it to the same code as another variable and it does not work. Also in another JS document but no way. The code is not applied to the id "sintomasArticle". Not only this, but by adding it, the paragraphs don't work either.
window.addEventListener('scroll', function() {
let element = document.getElementsByClassName('parrafosmov');
let elementSintomas= document.getElementsById('sintomasArticle');
let screenSize = window.innerHeight;
if(elementSintomas.getBoundingClientRect().top +300 < screenSize) {
elementSintomas.classList.add('visible');
} else {
elementSintomas.classList.remove('visible');
}
for (let index = 0; index < element.length; index++) {
const elements = element[index];
if(elements.getBoundingClientRect().top +300 < screenSize) {
elements.classList.add('visible');
} else {
elements.classList.remove('visible');
}
}
});
window.addEventListener('scroll', function() {
let element = document.getElementsByClassName('parrafosmov');
let screenSize = window.innerHeight;
for (let index = 0; index < element.length; index++) {
const elements = element[index];
if(elements.getBoundingClientRect().top +300 < screenSize) {
elements.classList.add('visible');
} else {
elements.classList.remove('visible');
}
}
});
.parrafosmov {
padding-top: 50px;
flex-wrap: wrap;
width: 50%;
margin-left: 50px;
color: white;
font-size: 20px;
font-family: sans-serif;
text-shadow: 0 1px 0 white, 0 2px 0 #c9c9c9, 0 6px 1px rgba(0, 0, 0, 0.1),
0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3),
0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25),
0 10px 10px rgba(0, 0, 0, 0.2), 0 20px 20px rgba(0, 0, 0, 0.15);
opacity: 0;
transform: translate(-10vh, 0vh);
transition: all 1s;
}
.seccion2 {
display: flex;
justify-content: space-between;
width: 100%;
height: auto;
margin-top: 200px;
}
#sintomasArticle {
margin-top: 75px;
width: 90%;
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
opacity: 0;
transform: translate(-10vh, 0vh);
transition: all 1s;
}
.sintomas {
margin-left: 50px;
color: white;
font-family: "mifuente";
font-size: auto;
text-align: center;
text-shadow: 0 0 0.05em #e95f35, 0 0 0.2em #e72e19, 0 0 0.3em #d80505;
}
.visible {
opacity: 1;
transform: translate(0, 0);
}
<section class="seccion2" >
<article class="parrafosmov">
<h2>¿Qué síntomas puedo experimentar?</h2><br><br><br>
<p> Tanto la Hemodiálisis, como la diálisis peritoneal, a la cual
dedicaremos un apartado más adelante, son tratamientos
de suma importancia, ya que mantienen con vida a la persona hasta la llegada de
un riñón compatible.
</p><br><br>
<p>No obstante, como en cualquier otro tratamiento, pueden aparecer una serie de
efectos secundarios y adversos que pueden ponernos en riesgo durante la terapia.
</p><br><br>
<p>Es por ello que quiero que aprendas los más frecuentes.
La mayoría de síntomas, si se consiguen identificar a tiempo,
son relativamente fácil de eliminar.
</p><br><br>
<p>¡¡ No dudes en avisar a tu enfermera con cualquier cosa diferente!! </p>
</article>
</section>
<article id="sintomasArticle" class="sintomasJs">
<div class="sintomas">DOLOR DE CABEZA</div>
<div class="sintomas">MAREO</div>
<div class="sintomas">NAUSEAS</div>
<div class="sintomas">CALAMBRES</div>
<div class="sintomas">HORMIGUEO</div>
<div class="sintomas">SOFOCO</div>
</article>