What is the best way to smoothly add or remove several classes to a div while scrolling?

Question

What is the best way to smoothly add or remove several classes to a div while scrolling?

Looking for assistance to create a fading effect where a logo fades out and a smaller version fades in as I scroll. The scaling aspect is currently functioning correctly on scroll (view JS Fiddle), but the fading transition needs some work, resulting in choppy animation (see JSFiddle here). Any advice on how to smooth out the fading transition would be greatly appreciated.

Javascript:

function scrollAnimation() {
  if ($(window).width() > 640){
    var scrollTop = $(window).scrollTop();

    if (scrollTop > 50) {
      $(".inner").addClass('scrolling');
      setTimeout(function() {
        $(".inner").removeClass('hide-logo').addClass('show-logo');
      }, 500);
    }
    else {
      $(".inner").addClass('hide-logo').removeClass('show-logo scrolling');
    };
  } else {
    $(".inner").removeClass('show-logo scrolling');
    $(".inner").addClass('hide-logo');
  }
}

$(window).on('scroll resize', function () {
  scrollAnimation();
});

javascript jquery html css

Answer 1

Answer №1

The CSS property known as transition-delay allows you to control the timing of a transition's start, making it possible to delay the transition based on different triggers such as scrolling down.

If you need to wait for a transition to end before executing another action, you can utilize the transitionend event and attach a handler function to it.

// Keep track of logo state
var isLogoFullSize = true;

// Add listener to trigger fade-in effect after fade-out has finished
$(".site-header").on('transitionend', function() {
  $(this).removeClass('fade-out');
});

function handleScrollAnimation() {

    var scrollTopPosition = $(window).scrollTop();

    if (scrollTopPosition > 50 && isLogoFullSize) { // Change to smaller logo
      $(".logo").addClass('scrolling');
      $(".site-header").addClass('fade-out');
      isLogoFullSize = false;
    }

    if (scrollTopPosition < 50 && !isLogoFullSize) { // Switch back to full-size logo
      $(".logo").removeClass('scrolling');
      $(".site-header").addClass('fade-out');
      isLogoFullSize = true;
    }
}

$(window).on('scroll resize', handleScrollAnimation);

.site-header {
  position: sticky;
  top: 0;
  width: 100%;
  background-color: #000;
  opacity: 1;
  transition-property: opacity;
  transition-duration: .2s;
  transition-timing-function: easeInExpo;
}

img.logo {
  display: block;
  margin: 0 auto;
  height: 120px;
  padding: 5%;
  transition-property: height;
  transition-duration: .2s;
  transition-delay: .2s;
}

img.scrolling {
  height: 50px;
}

.site-header.fade-out {
  opacity: 0.6;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="site-header">
  <span class="inner">
  <img class="logo" src="http://upload.wikimedia.org/wikipedia/fr/c/c8/Twitter_Bird.svg" />
  </span>
</div>

<div class="text">
  <p>
    Insert your unique content here.
  </p>
  ...
  <p>
    More unique content goes in here.
  </p>
  <p>
    And more original text to showcase the rewritten passage.
  </p>
</div>

Answer 2

The CSS property known as transition-delay allows you to control the timing of a transition's start, making it possible to delay the transition based on different triggers such as scrolling down.

If you need to wait for a transition to end before executing another action, you can utilize the transitionend event and attach a handler function to it.

// Keep track of logo state
var isLogoFullSize = true;

// Add listener to trigger fade-in effect after fade-out has finished
$(".site-header").on('transitionend', function() {
  $(this).removeClass('fade-out');
});

function handleScrollAnimation() {

    var scrollTopPosition = $(window).scrollTop();

    if (scrollTopPosition > 50 && isLogoFullSize) { // Change to smaller logo
      $(".logo").addClass('scrolling');
      $(".site-header").addClass('fade-out');
      isLogoFullSize = false;
    }

    if (scrollTopPosition < 50 && !isLogoFullSize) { // Switch back to full-size logo
      $(".logo").removeClass('scrolling');
      $(".site-header").addClass('fade-out');
      isLogoFullSize = true;
    }
}

$(window).on('scroll resize', handleScrollAnimation);

.site-header {
  position: sticky;
  top: 0;
  width: 100%;
  background-color: #000;
  opacity: 1;
  transition-property: opacity;
  transition-duration: .2s;
  transition-timing-function: easeInExpo;
}

img.logo {
  display: block;
  margin: 0 auto;
  height: 120px;
  padding: 5%;
  transition-property: height;
  transition-duration: .2s;
  transition-delay: .2s;
}

img.scrolling {
  height: 50px;
}

.site-header.fade-out {
  opacity: 0.6;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="site-header">
  <span class="inner">
  <img class="logo" src="http://upload.wikimedia.org/wikipedia/fr/c/c8/Twitter_Bird.svg" />
  </span>
</div>

<div class="text">
  <p>
    Insert your unique content here.
  </p>
  ...
  <p>
    More unique content goes in here.
  </p>
  <p>
    And more original text to showcase the rewritten passage.
  </p>
</div>

What is the best way to smoothly add or remove several classes to a div while scrolling?

Answer №1

Similar questions

Tips for utilizing the value obtained from an AJAX URL in Yii

The precision of CSS width percentages

Execute an asynchronous request using Javascript to communicate with a Spring Controller

Troubleshooting a dropdown selection problem in an HTML form

What is the best way to use jQuery to toggle the visibility of a background?

Some suggestions for updating two div elements using only one Ajax response

Start the Nuxt.js project using docker-compose

Troubleshooting a Multi-dimensional Array Reference Issue

Steps to generating a dynamic fabric canvas upon opening a new window

Having Trouble with Auth0 React Quickstart Login: Error 401 Unauthorized

Ways to modify the gap between buttons using CSS

Having trouble with Angular JS's ngRoute feature not functioning properly

stop all HTML5 videos when a specific video is played using jQuery

How to specify a single kind of JavaScript object using Typescript

CloudFront for Amazon - Limit MP3 playback to designated website

Creating and customizing forms using React JS

Having trouble viewing the page of a new package you published on the NPM Website?

Is the video failing due to excessive adjustments of the video's currentTime?

Tips for customizing the CSS styling of the validation ng-class error

Using Jquery to toggle the visibility of divs based on radio button selections