title: Fade in/Fade Out on Scroll using Vue.js
body: <p>I've used the following function in the past to fade items into view when they're on the user's screen. An example is one of my projects, <a href="https://jordanchude.netlify.app" rel="nofollow noreferrer">here</a>.</p>
  <p>I found the original solution to this (with jQuery) <a href="https://www.superhi.com/blog/how-to-add-web-design-elements-that-fade-in-and-out-on-scroll" rel="nofollow noreferrer">here</a>.</p>
  <p>Here's the CSS code I used.</p>
  <pre><code>.card, .contact-div, .jumbotron-text, .jumbotron-button {
      opacity: 0;
      transform: translate(0, 20px); 
      transition: all 1.5s;
  }
  
  .visible {
      opacity: 1;
      transform: translate(0, 0);
  }
  </code></pre>
  <p>Here's the jQuery I used.</p>
  <pre><code>$(document).on(&quot;scroll&quot;, function() {
      //variable to see how far down the page scrolled
      var $pageTop = $(document).scrollTop();
      var $pageBottom = $pageTop + $(window).height();
      
      //fade in classes set to variables
      var $cards = $('.card');
      var $contact = $('.contact-div');
  
      //loop to see if card is in frame
      for (let i = 0; i &lt; $cards.length; i++) {
          let card = $cards[i];
          //if in frame, make card visible
         if ($(card).position().top &lt; $pageBottom) {
             $(card).addClass(&quot;visible&quot;);
         }
      }
      // if div is in frame, make div visible
      if ($($contact).position().top &lt; $pageBottom) {
          $($contact).addClass(&quot;visible&quot;);
      }
  });
  </code></pre>
  <p>I am using Vue in my application this time and need the same effect but only using Vue or pure JS.</p>
  <p>Can someone help me translate this to Vue (preferably) or vanilla JS (to avoid loading another framework, jQuery, into my application)?</p>