title: How to add css animation effects that apply on scroll to only specific divs?
body: <p>The idea is there are 5 sections named section1, section2 etc.</p>
  <p>Each section has its own image.</p>
  <p>When the user scrolls, the image should 'fade out' and in by changing the opacity, and there is a slight zoom in/out effect using transform3D.</p>
  <p>I'm trying to acheive results identical to this:</p>
  <p><a href="http://www.moxhe.com.au/" rel="nofollow noreferrer">http://www.moxhe.com.au/</a></p>
  <p>My attempt at starting something is this</p>
  <pre><code>  jQuery(document).ready(function() {
          jQuery(window).scroll(function(event) {
              let scroll = jQuery(this).scrollTop();
              let opacity = 1 - (scroll / 1000);
              var x = (scroll / 100);
              if (opacity &gt;= 0) {
                  jQuery('#section1').css({'opacity': opacity , 'transform': &quot;scale(&quot; + x + &quot;,&quot; + x + &quot;)&quot;});
              }
          });
      });
  </code></pre>
  <p>Now, this does create the opacity changing on effect when you scroll - the issue is, it applies to the whole page on scroll, but i want the effects to happen only when you user scrolls in/around the div with ID named section1</p>
  <p>I know it;s applying to the whole window because the .scroll is being applied to jQuery(window). I have tried using jQuery('#section1') but if i do this nothing happens.</p>
  <p>I have tried adding a transform3D effect like shown on <a href="http://www.moxhe.com.au/" rel="nofollow noreferrer">http://www.moxhe.com.au/</a> but am struggling to get it work too, there should be a small decrease scrolling downwards and small increase scrolling upwards ONLY if user is scrolling around a specific div with the bg image.</p>
  <p>Long story short, i need to make css animations identical to <a href="http://www.moxhe.com.au/" rel="nofollow noreferrer">http://www.moxhe.com.au/</a> but am struggling with applying the css effects to a specific part of the page / div with an ID as supposed to the whole page.</p>