javascript [在页面滚动上设置动画粘贴CTA]这将在滚动时为点击元素设置动画，并在用户点击时将其关闭。 #javascript #css #sitewre

Posted 2021-05-04

@keyframes cta-clickme {
  0%,
  20%,
  50%,
  80%,
  100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-9px);
  }
  60% {
    transform: translateY(-5px);
  }
}

.cta-clickme {
  -webkit-animation-name: cta-clickme;
  animation-name: cta-clickme;
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

/* ==========================================================================
animate CTA
========================================================================== */


$(window).scroll(function() {    
    var scroll = $(window).scrollTop();

     //>=, not <=
    if (scroll >= 1050) {
        $(".lead-capture-form").addClass("cta-clickme");
        $(".formmodule.lead-capture-form").click(function(){
          if ($('.formmodule.lead-capture-form').hasClass('cta-clickme')) {
            $(this).removeClass('cta-clickme');
          }
        });
    } 
    else {
        $(".lead-capture-form").removeClass("cta-clickme");
    }
});