Изменение стиля нескольких объектов с помощью javascript

Question

Я создаю веб-сайт с помощью WordPress, поэтому контент создается динамически. Элементы идентификатор также динамически генерируемые

Каждый контейнер может иметь эти элементы (контейнер может иметь несколько - но не то же самое):
t_1
f_1
f_2
F_3

Я также добавить количество контейнеров в конце идентификатора элементов, поэтому каждый элемент будет иметь уникальный идентификатор

Предположим, PHP создаст такой HTML-код:

<div id="container_1"> 
    <div id=f_1_1> 
    //content 
    </div> 
    <div id=f_2_1> 
    //content 
    </div> 
</div> 
<div id="container_2"> 
    <div id=t_1_2> 
    //content 
    </div> 
</div> 
<div id="container_3"> 
    <div id=f_1_3> 
    //content 
    </div> 
</div> 

Я хотел бы, чтобы оживить положение этих элементов как прокрутке, я добавил Javascript, чтобы сделать это:

var scroll = window.pageYOffset; 
window.addEventListener('scroll', function() { 
    scroll = window.pageYOffset; 
    requestAnimationFrame(scroll) 
}, false) 

function scroll() { 
    document.getElementById("f_1_1").style.top = scroll * 10 + 'px'; 
} 

Так вот проблема, я не знаю, какие элементы я должен получить по ID.
Я думал о создании цикла, где я проверяю каждый контейнер для элементов внутри, однако я думаю, что он будет использовать слишком много ресурсов и будет отставать, поскольку функция запускается каждый раз, когда пользователь прокручивает.

Другое решение, которое я пробовал, заключается в том, чтобы динамически добавлять javascript в каждый контейнер, чтобы я точно знал, какие элементы мне нужны для анимации. Он работал только для первого контейнера, как, когда я добавил следующий контейнер были множественные функции с тем же именем, и только последняя функция была выполнена

<div id="container_1"> 
    <div id=f_1_1> 
    //content 
    </div> 
    <script type="text/javascript"> 
    function scroll() { 
     document.getElementById("f_1_"+<?php echo $pagecounter?>).style.top = scroll * 10 + 'px'; 
    } 
    </script> 
</div> 

Answer 1

Вы можете использовать - WOW.js для анимации, когда элемент приходит в окне просмотра ,

<div id="container_1"> 
    <div id=f_1_1 class="wow myCustomAnimation"> 
    //content 
    </div> 
    <div id=f_2_1 class="wow myCustomAnimation"> 
    //content 
    </div> 
</div> 
<div id="container_2"> 
    <div id=t_1_2 class="wow myCustomAnimation"> 
    //content 
    </div> 
</div> 
<div id="container_3"> 
    <div id=f_1_3 class="wow myCustomAnimation"> 
    //content 
    </div> 
</div> 

Где вы должны написать myCustomAnimation как на ваше требование.