Home>

jquery.inview.min.js
I would like to make the elements appear fluffy when I use school by using a plug-in that says, but when I scroll down, the elements that should have been hidden are initially displayed. After that, it disappears and the specified movement is displayed, so it seems to blink for a moment.

Does anyone know the cause?

In the html file, css is loaded first.

$('h2').css('visibility','hidden');
$(window).scroll(function(){
 var windowHeight = $(window).height(),
     topWindow = $(window).scrollTop();
 $('h2').each(function(){
  var targetPosition = $(this).offset().top;
  if(topWindow >targetPosition-windowHeight + 0){
   $(this).addClass("fadeInDown");
  }
 });
});
.fadeInDown {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
 -webkit-animation-name: fadeInDown;
 animation-name: fadeInDown;
 visibility: visible !important;
}
@-webkit-keyframes fadeInDown {
 0% {opacity: 0;-webkit-transform: translateY(-20px);}
 100% {opacity: 1;-webkit-transform: translateY(0);}
}
@keyframes fadeInDown {
 0% {opacity: 0;-webkit-transform: translateY(-20px);-ms-transform: translateY(-20px);transform: translateY(-20px);}
 100% {opacity: 1;-webkit-transform: translateY(0);-ms-transform: translateY(0);transform: translateY(0);}
}
  • Answer # 1

    $('h2').css('visibility','hidden');


    Isn't this because it is not specified by default on CSS side instead of JS?
    Show CSS → Hidden by JS because CSS is loaded first but nothing is specified for h2
    I think it is just a movement.

Related articles