title: Fading element in the center of window by scrolling
body: <p>I use a script in which elements fade in from the left and right as soon as the respective element has been scrolled completely into view. The problem is, the fade-in remains until the element has completely disappeared from the field of view. I try to implement it in such a way that it fades out as soon as it is no longer completely in sight. Otherwise, all elements are shown at the same time when scrolling.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function Utils() {}
  Utils.prototype = {
    constructor: Utils,
    isElementInView: function(element, fullyInView) {
      var pageTop = $(window).scrollTop();
      var pageBottom = pageTop + $(window).height();
      var elementTop = $(element).offset().top;
      var elementBottom = elementTop + $(element).height();
  
      if (fullyInView === true) {
        return ((pageTop &lt; elementTop) &amp;&amp; (pageBottom &gt; elementBottom));
      } else {
        return ((elementTop &lt;= pageBottom) &amp;&amp; (elementBottom &gt;= pageTop));
      }
    }
  };
  
  var Utils = new Utils();
  $(window).on('load', addFadeIn());
  
  $(window).scroll(function() {
    addFadeIn(true);
  });
  
  function addFadeIn(repeat) {
    var classToFadeIn = ".will-fadeIn";
  
    $(classToFadeIn).each(function(index) {
      var isElementInView = Utils.isElementInView($(this), false);
      if (isElementInView) {
        if (!($(this).hasClass('fadeInRight')) &amp;&amp; !($(this).hasClass('fadeInLeft'))) {
          if (index % 2 == 0) $(this).addClass('fadeInRight');
          else $(this).addClass('fadeInLeft');
        }
      } else if (repeat) {
        $(this).removeClass('fadeInRight');
        $(this).removeClass('fadeInLeft');
      }
    });
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#locations-mobile {
       height: auto;
       display: block;
  }
   #loc1, #loc2, #loc3, #loc4 {
       height: 300px;
       background-size: cover;
  }
   .locimg {
       width: 100%;
       background-size: cover;
       background-repeat: no-repeat;
  }
   .loc {
       cursor: pointer;
       height: 100%;
       width: 100%;
       background-size: cover;
       background-repeat: no-repeat;
       background-position: center;
       position: relative;
       overflow: hidden;
       text-align: center;
  }
   .loc .fadedbox, .loc-selected {
       background-color: #202020;
       position: absolute;
       top: 0;
       left: 0;
       color: #fff;
       -webkit-transition: all 300ms ease-out;
       -moz-transition: all 300ms ease-out;
       -o-transition: all 300ms ease-out;
       -ms-transition: all 300ms ease-out;
       transition: all 300ms ease-out;
       opacity: 0;
       width: 100%;
       height: 100%;
  }
   .loc:hover .fadedbox, .loc-selected {
       opacity: 0.8;
  }
   .loc .text, .loc .text a, .will-fadeIn .text, .will-fadeIn .text p, .will-fadeIn .text p a {
       top: 0%;
       left: 0%;
       position: relative;
       text-align: center;
       color: #fff;
       text-decoration: none;
       -webkit-transition: all 300ms ease-out;
       -moz-transition: all 300ms ease-out;
       -o-transition: all 300ms ease-out;
       -ms-transition: all 300ms ease-out;
       transition: all 300ms ease-out;
       transform: translateY(50px);
       -webkit-transform: translateY(50px);
  }
   .loc .text, .loc .text a, .will-fadeIn .text, .will-fadeIn .text p, .will-fadeIn .text p a {
       transform: translateY(30px);
       -webkit-transform: translateY(30px);
  }
   .loc .title {
       font-size: 2.5em;
       text-align: center;
       text-transform: uppercase;
       opacity: 0;
       transition-delay: 0.2s;
       transition-duration: 0.3s;
  }
   .will-fadeIn .text .title a {
       color: #fff;
       font-size: 2.5em;
  }
   #loc1 {
       grid-area: 1 / 1 / 2 / 2;
       background-image: url(https://images.pexels.com/photos/380769/pexels-photo-380769.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=750&amp;w=1260) 
  }
   #loc2 {
       grid-area: 1 / 2 / 2 / 3;
       background-image: url(https://images.pexels.com/photos/380769/pexels-photo-380769.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=750&amp;w=1260) 
  }
   #loc3 {
       grid-area: 1 / 3 / 2 / 4;
       background-image: url(https://images.pexels.com/photos/380769/pexels-photo-380769.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=750&amp;w=1260) 
  }
   #loc4 {
       grid-area: 1 / 4 / 2 / 5;
       background-image: url(https://images.pexels.com/photos/380769/pexels-photo-380769.jpeg?auto=compress&amp;cs=tinysrgb&amp;dpr=2&amp;h=750&amp;w=1260) 
  }
   .doing {
       transform: rotate(-35deg);
       display: block;
       position: absolute;
       top: 0;
       left: -90px;
       margin-top: 25px;
       text-align: center;
       width: 300px;
       color: #fff;
  }
   .will-fadeIn {
       display: block;
       width: 100%;
       max-width: 640px;
       margin: 0px auto;
       height: 100%;
       background-color: #202020;
  }
   .fadeInRight {
       -webkit-animation: fadeInRight .5s ease .4s both;
       -moz-animation: fadeInRight .5s ease .4s both;
       -ms-animation: fadeInRight .5s ease .4s both;
       -o-animation: fadeInRight .5s ease .4s both;
       animation: fadeInRight .5s ease .4s both;
  }
   @media (prefers-reduced-motion) {
       .fadeInRight .animated {
           -webkit-animation: unset !important;
           animation: unset !important;
           -webkit-transition: none !important;
           transition: none !important;
      }
  }
   .fadeInLeft {
       -webkit-animation: fadeInLeft .5s ease .4s both;
       -moz-animation: fadeInLeft .5s ease .4s both;
       -ms-animation: fadeInLeft .5s ease .4s both;
       -o-animation: fadeInLeft .5s ease .4s both;
       animation: fadeInLeft .5s ease .4s both;
  }
   @media (prefers-reduced-motion) {
       .fadeInLeft .animated {
           -webkit-animation: unset !important;
           animation: unset !important;
           -webkit-transition: none !important;
           transition: none !important;
      }
  }
   @-webkit-keyframes fadeInRight {
       from {
           opacity: 0;
           -webkit-transform: translate3d(100%, 0, 0);
           -moz-transform: translate3d(100%, 0, 0);
           -ms-transform: translate3d(100%, 0, 0);
           -o-transform: translate3d(100%, 0, 0);
           transform: translate3d(100%, 0, 0);
      }
       to {
           opacity: .8;
           -webkit-transform: translate3d(0, 0, 0);
           -moz-transform: translate3d(0, 0, 0);
           -ms-transform: translate3d(0, 0, 0);
           -o-transform: translate3d(0, 0, 0);
           transform: translate3d(0, 0, 0);
      }
  }
   @-moz-keyframes fadeInRight {
       from {
           opacity: 0;
           -webkit-transform: translate3d(100%, 0, 0);
           -moz-transform: translate3d(100%, 0, 0);
           -ms-transform: translate3d(100%, 0, 0);
           -o-transform: translate3d(100%, 0, 0);
           transform: translate3d(100%, 0, 0);
      }
       to {
           opacity: .8;
           -webkit-transform: translate3d(0, 0, 0);
           -moz-transform: translate3d(0, 0, 0);
           -ms-transform: translate3d(0, 0, 0);
           -o-transform: translate3d(0, 0, 0);
           transform: translate3d(0, 0, 0);
      }
  }
   @-ms-keyframes fadeInRight {
       from {
           opacity: 0;
           -webkit-transform: translate3d(100%, 0, 0);
           -moz-transform: translate3d(100%, 0, 0);
           -ms-transform: translate3d(100%, 0, 0);
           -o-transform: translate3d(100%, 0, 0);
           transform: translate3d(100%, 0, 0);
      }
       to {
           opacity: .8;
           -webkit-transform: translate3d(0, 0, 0);
           -moz-transform: translate3d(0, 0, 0);
           -ms-transform: translate3d(0, 0, 0);
           -o-transform: translate3d(0, 0, 0);
           transform: translate3d(0, 0, 0);
      }
  }
   @-o-keyframes fadeInRight {
       from {
           opacity: 0;
           -webkit-transform: translate3d(100%, 0, 0);
           -moz-transform: translate3d(100%, 0, 0);
           -ms-transform: translate3d(100%, 0, 0);
           -o-transform: translate3d(100%, 0, 0);
           transform: translate3d(100%, 0, 0);
      }
       to {
           opacity: .8;
           -webkit-transform: translate3d(0, 0, 0);
           -moz-transform: translate3d(0, 0, 0);
           -ms-transform: translate3d(0, 0, 0);
           -o-transform: translate3d(0, 0, 0);
           transform: translate3d(0, 0, 0);
      }
  }
   @keyframes fadeInRight {
       from {
           opacity: 0;
           -webkit-transform: translate3d(100%, 0, 0);
           -moz-transform: translate3d(100%, 0, 0);
           -ms-transform: translate3d(100%, 0, 0);
           -o-transform: translate3d(100%, 0, 0);
           transform: translate3d(100%, 0, 0);
      }
       to {
           opacity: .8;
           -webkit-transform: translate3d(0, 0, 0);
           -moz-transform: translate3d(0, 0, 0);
           -ms-transform: translate3d(0, 0, 0);
           -o-transform: translate3d(0, 0, 0);
           transform: translate3d(0, 0, 0);
      }
  }
   @-webkit-keyframes fadeInLeft {
       from {
           opacity: 0;
           -webkit-transform: translate3d(-100%, 0, 0);
           -moz-transform: translate3d(-100%, 0, 0);
           -ms-transform: translate3d(-100%, 0, 0);
           -o-transform: translate3d(-100%, 0, 0);
           transform: translate3d(-100%, 0, 0);
      }
       to {
           opacity: .8;
           -webkit-transform: translate3d(0, 0, 0);
           -moz-transform: translate3d(0, 0, 0);
           -ms-transform: translate3d(0, 0, 0);
           -o-transform: translate3d(0, 0, 0);
           transform: translate3d(0, 0, 0);
      }
  }
   @-moz-keyframes fadeInLeft {
       from {
           opacity: 0;
           -webkit-transform: translate3d(-100%, 0, 0);
           -moz-transform: translate3d(-100%, 0, 0);
           -ms-transform: translate3d(-100%, 0, 0);
           -o-transform: translate3d(-100%, 0, 0);
           transform: translate3d(-100%, 0, 0);
      }
       to {
           opacity: .8;
           -webkit-transform: translate3d(0, 0, 0);
           -moz-transform: translate3d(0, 0, 0);
           -ms-transform: translate3d(0, 0, 0);
           -o-transform: translate3d(0, 0, 0);
           transform: translate3d(0, 0, 0);
      }
  }
   @-ms-keyframes fadeInLeft {
       from {
           opacity: 0;
           -webkit-transform: translate3d(-100%, 0, 0);
           -moz-transform: translate3d(-100%, 0, 0);
           -ms-transform: translate3d(-100%, 0, 0);
           -o-transform: translate3d(-100%, 0, 0);
           transform: translate3d(-100%, 0, 0);
      }
       to {
           opacity: .8;
           -webkit-transform: translate3d(0, 0, 0);
           -moz-transform: translate3d(0, 0, 0);
           -ms-transform: translate3d(0, 0, 0);
           -o-transform: translate3d(0, 0, 0);
           transform: translate3d(0, 0, 0);
      }
  }
   @-o-keyframes fadeInLeft {
       from {
           opacity: 0;
           -webkit-transform: translate3d(-100%, 0, 0);
           -moz-transform: translate3d(-100%, 0, 0);
           -ms-transform: translate3d(-100%, 0, 0);
           -o-transform: translate3d(-100%, 0, 0);
           transform: translate3d(-100%, 0, 0);
      }
       to {
           opacity: .8;
           -webkit-transform: translate3d(0, 0, 0);
           -moz-transform: translate3d(0, 0, 0);
           -ms-transform: translate3d(0, 0, 0);
           -o-transform: translate3d(0, 0, 0);
           transform: translate3d(0, 0, 0);
      }
  }
   @keyframes fadeInLeft {
       from {
           opacity: 0;
           -webkit-transform: translate3d(-100%, 0, 0);
           -moz-transform: translate3d(-100%, 0, 0);
           -ms-transform: translate3d(-100%, 0, 0);
           -o-transform: translate3d(-100%, 0, 0);
           transform: translate3d(-100%, 0, 0);
      }
       to {
           opacity: .8;
           -webkit-transform: translate3d(0, 0, 0);
           -moz-transform: translate3d(0, 0, 0);
           -ms-transform: translate3d(0, 0, 0);
           -o-transform: translate3d(0, 0, 0);
           transform: translate3d(0, 0, 0);
      }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;section id="locations-mobile"&gt;
    &lt;div id="loc1"&gt;
      &lt;div class="fadedbox will-fadeIn"&gt;
        &lt;div class="text"&gt;
          &lt;p class="title"&gt;&lt;a href="/standorte/1#"&gt;#&lt;/a&gt;&lt;/p&gt;
          &lt;p&gt;
            &lt;a href="#" target="_blank"&gt;
              &lt;i class="fas fa-map-marker-alt"&gt;&lt;/i&gt;#&lt;br /&gt; #
            &lt;/a&gt;
          &lt;/p&gt;
          &lt;p&gt;&lt;a href="#"&gt;&lt;i class="fas fa-phone"&gt;&lt;/i&gt;#&lt;/a&gt;&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="loc2"&gt;
      &lt;div class="fadedbox will-fadeIn"&gt;
        &lt;div class="text"&gt;
          &lt;p class="title"&gt;&lt;a href="/standorte/2#"&gt;#&lt;/a&gt;&lt;/p&gt;
          &lt;p&gt;
            &lt;a href="#" target="_blank"&gt;
              &lt;i class="fas fa-map-marker-alt"&gt;&lt;/i&gt;#&lt;br /&gt; #
            &lt;/a&gt;
          &lt;/p&gt;
          &lt;p&gt;&lt;a href="#"&gt;&lt;i class="fas fa-phone"&gt;&lt;/i&gt;#&lt;/a&gt;&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="loc3"&gt;
      &lt;div class="fadedbox will-fadeIn"&gt;
        &lt;div class="text"&gt;
          &lt;p class="title"&gt;&lt;a href="/standorte/3#"&gt;#&lt;/a&gt;&lt;/p&gt;
          &lt;p&gt;
            &lt;a href="#" target="_blank"&gt;
              &lt;i class="fas fa-map-marker-alt"&gt;&lt;/i&gt;#&lt;br /&gt; #
            &lt;/a&gt;
          &lt;/p&gt;
          &lt;p&gt;&lt;a href="#"&gt;&lt;i class="fas fa-phone"&gt;&lt;/i&gt;#&lt;/a&gt;&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="loc4"&gt;
      &lt;div class="fadedbox will-fadeIn"&gt;
        &lt;div class="text"&gt;
          &lt;p class="title"&gt;&lt;a href="/standorte/4#"&gt;#&lt;/a&gt;&lt;/p&gt;
          &lt;p&gt;
            &lt;a href="#" target="_blank"&gt;
              &lt;i class="fas fa-map-marker-alt"&gt;&lt;/i&gt;#&lt;br /&gt; #
            &lt;/a&gt;
          &lt;/p&gt;
          &lt;p&gt;&lt;a href="#"&gt;&lt;i class="fas fa-phone"&gt;&lt;/i&gt;#&lt;/a&gt;&lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>