title: How to apply this function to an array without reusing all elements
body: <p>I'm fairly new to programming and I'm working on a project,</p>
  <hr />
  <p><strong>HTML</strong></p>
  <pre><code>&lt;div class=&quot;textAnimation&quot;&gt;
          &lt;span&gt;&lt;h2 class=&quot;animatedHeader&quot;&gt;Text1&lt;/h2&gt;&lt;/span&gt;
          &lt;span
            &gt;&lt;h2 class=&quot;animatedHeader twoH&quot;&gt;Text2&lt;/h2&gt;&lt;/span
          &gt;
          &lt;span
            &gt;&lt;h2 class=&quot;animatedHeader&quot;&gt;Text3&lt;/h2&gt;&lt;/span
          &gt;
          &lt;span
            &gt;&lt;h2 class=&quot;animatedHeader&quot;&gt;text4&lt;/h2&gt;&lt;/span
          &gt;
          &lt;span&gt;&lt;h2 class=&quot;animatedHeader&quot;&gt;text5&lt;/h2&gt;&lt;/span&gt;
          &lt;span&gt;&lt;h2 class=&quot;animatedHeader&quot;&gt;text6&lt;/h2&gt;&lt;/span&gt;
          &lt;span&gt;&lt;h2 class=&quot;animatedHeader&quot;&gt;text7&lt;/h2&gt;&lt;/span&gt;
          &lt;span&gt;&lt;h2 class=&quot;animatedHeader&quot;&gt;text8&lt;/h2&gt;&lt;/span&gt;
          &lt;span&gt;&lt;h2 class=&quot;animatedHeader&quot;&gt;text9&lt;/h2&gt;&lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  <hr />
  <p><strong>JavaScript</strong></p>
  <pre><code>// Check if is in viewport &amp; animate
        const headers2 = document.querySelector(&quot;.twoH&quot;);
        function elementInViewportTWO() {
          let bounding = headers2.getBoundingClientRect();
  
          if (
            bounding.top &gt;= 0 &amp;&amp;
            bounding.left &gt;= 0 &amp;&amp;
            bounding.right &lt;=
              (window.innerWidth || document.documentElement.clientWidth) &amp;&amp;
            bounding.bottom &lt;=
              (window.innerHeight || document.documentElement.clientHeight)
          ) {
            headers2.style.opacity = 1;
          } else {
            headers2.style.opacity = 0.6;
          }
        }
        setInterval(elementInViewportTWO, 10);
  </code></pre>
  <hr />
  <p>My questions is, how to apply this effect, given an array of 9 headings without reusing so much code, how do I make my function work with an array of elements?
  (My code highlights text when a certain element is in a viewport)</p>