Event is fired when an element appears in a window[jQuery]

It’s jQuery, and you can add an event when the element is displayed in the window.
I will introduce it because it was very convenient because it could be applied in various ways.

jQuery plugin: jquery.inview

github jquery.inview

It’s very easy to use.

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="../jquery.inview.min.js" />

・・・

// code
$(function() {
  $('.inview').on('inview', function(event, isInView) {
    if (isInView) {
        // element is now visible in the viewport
    } else {
        // element has gone out of viewport
    }
  });
});

In the above example, the event will be fired when the element for which class inview is specified is displayed on the screen. It is OK to write briefly as follows.

$('.inview').on('inview', function(){
        $(this).addClass('active');
});

 
The above example adds class active to the displayed element.
It is convenient because it can be animated when it is displayed and has various uses.

Tweet