OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Remove and add class depending on scroll up and down values to change between animations

  • Thread starter Thread starter Beata
  • Start date Start date
B

Beata

Guest
I try to make an animation in hero banner containing:

  1. first - a static image
  2. second (expanding) animation after the user scrolls down 150 pixels
  3. third (folding) animation after the user goes back and scrolls up to the visible area of the hero banner
  4. static image again when user reaches the top of the viewport


Code:
$(window).scroll(function() {
  if ($(this).scrollTop() > 150) {
    $('.first-img').addClass('hidden');
    $('.second-video-anim').removeClass('hidden');
  } else {
    $('.first-img').removeClass('hidden');
    $('.second-video-anim').addClass('hidden');
  }
});

$(document).ready(function() {
  $(".second-video-anim video, .third-video-anim video").each(function() {
    $(this).prop({
      controls: false,
      controlslist: "nodownload"
    });
    const observer = new window.IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          if (this.paused) {
            $(this).prop("muted", true);
            this.play();
          }
        } else {
          this.pause();
        }
      }, {
        threshold: 0.5,
      }
    );
    observer.observe(this);
  });
});

Code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="container">
  <div class="hero-section">
    <div class="first-img">
      <img src="https://7186369.fs1.hubspotusercontent-na1.net/hubfs/7186369/Home_Page_first_section_image.svg" al="">
    </div>
    <div class="second-video-anim video-anim hidden">
      <figure style="">
        <video playsinline="" autoplay="" muted="" preload="auto" width="100%" height="" id="homeVidDesktop" class="mobile-hide">
          <source src="https://7186369.fs1.hubspotusercontent-na1.net/hubfs/7186369/Animations/Home_Page_anim_extend_cropped.mp4" type="video/mp4">
        </video>
      </figure>
    </div>
    <div class="third-video-anim video-anim hidden">
      <figure style="">
        <video playsinline="" autoplay="" muted="" preload="auto" width="100%" height="" id="homeVidDesktop" class="mobile-hide">
          <source src="https://7186369.fs1.hubspotusercontent-na1.net/hubfs/7186369/Animations/anim_2_reversed.mp4" type="video/mp4">
        </video>
      </figure>
    </div>
  </div>
</div>
<div class="snd-section" style="height: 400px;background: red;"></div>
<div class="trd-section" style="height: 400px;background: pink;"></div>

I made first 2 steps but wondering how then display my third element when user scrolls up to banner visible area. Animation videos are .mp4 files.

My code: https://codepen.io/Beata-Jakubowska/pen/RwmMWoW?editors=1010 (see in the full page view).

<p>I try to make an animation in hero banner containing:</p>
<ol>
<li>first - a static image</li>
<li>second (expanding) animation after the user scrolls down 150 pixels</li>
<li>third (folding) animation after the user goes back and scrolls up to the visible area of the hero banner</li>
<li>static image again when user reaches the top of the viewport</li>
</ol>
<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>$(window).scroll(function() {
if ($(this).scrollTop() > 150) {
$('.first-img').addClass('hidden');
$('.second-video-anim').removeClass('hidden');
} else {
$('.first-img').removeClass('hidden');
$('.second-video-anim').addClass('hidden');
}
});

$(document).ready(function() {
$(".second-video-anim video, .third-video-anim video").each(function() {
$(this).prop({
controls: false,
controlslist: "nodownload"
});
const observer = new window.IntersectionObserver(
([entry]) => {
if (entry.isIntersecting) {
if (this.paused) {
$(this).prop("muted", true);
this.play();
}
} else {
this.pause();
}
}, {
threshold: 0.5,
}
);
observer.observe(this);
});
});</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="container">
<div class="hero-section">
<div class="first-img">
<img src="https://7186369.fs1.hubspotusercontent-na1.net/hubfs/7186369/Home_Page_first_section_image.svg" al="">
</div>
<div class="second-video-anim video-anim hidden">
<figure style="">
<video playsinline="" autoplay="" muted="" preload="auto" width="100%" height="" id="homeVidDesktop" class="mobile-hide">
<source src="https://7186369.fs1.hubspotusercont.../Animations/Home_Page_anim_extend_cropped.mp4" type="video/mp4">
</video>
</figure>
</div>
<div class="third-video-anim video-anim hidden">
<figure style="">
<video playsinline="" autoplay="" muted="" preload="auto" width="100%" height="" id="homeVidDesktop" class="mobile-hide">
<source src="https://7186369.fs1.hubspotusercontent-na1.net/hubfs/7186369/Animations/anim_2_reversed.mp4" type="video/mp4">
</video>
</figure>
</div>
</div>
</div>
<div class="snd-section" style="height: 400px;background: red;"></div>
<div class="trd-section" style="height: 400px;background: pink;"></div></code></pre>
</div>
</div>
</p>
<p>I made first 2 steps but wondering how then display my third element when user scrolls up to banner visible area. Animation videos are .mp4 files.</p>
<p>My code: <a href="https://codepen.io/Beata-Jakubowska/pen/RwmMWoW?editors=1010" rel="nofollow noreferrer">https://codepen.io/Beata-Jakubowska/pen/RwmMWoW?editors=1010</a> (see in the full page view).</p>
 

Latest posts

Top