html 滚动时淡出和滑动内容

Posted 2021-05-10

    function viewport(){
        var viewport = $(window).width();
        if(viewport >= 1025){
            return "nonmobile";
        } else {
            return "mobile";
        }
    }
    
    //fade & slide content on scroll

    (function animateContent(){

        var bottomAnimateDistance = -125;

        if (viewport() == "nonmobile"){
            bottomAnimateDistance = -250;
        }

        if($().scrollSpy && $(".scroll-animate").length > 0){

            $(".scroll-animate")
            .scrollSpy({
                offsetTop:0, offsetBottom:bottomAnimateDistance
            })
            .on("scrollSpy:enter", function() {
                $(this).addClass("init-animate");
            })
            .on("scrollSpy:exit", function() {
            });

        }

    })();

.scroll-animate .scroll-animate_top,.scroll-animate .scroll-animate_bottom,.scroll-animate .scroll-animate_left,.scroll-animate .scroll-animate_right {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0)
}

.scroll-animate .scroll-animate_top {
  -webkit-transform: translateY(-120px);
  -moz-transform: translateY(-120px);
  transform: translateY(-120px)
}

.scroll-animate .scroll-animate_bottom {
  -webkit-transform: translateY(120px);
  -moz-transform: translateY(120px);
  transform: translateY(120px)
}

.scroll-animate .scroll-animate_left {
  -webkit-transform: translateX(-80px);
  -moz-transform: translateX(-80px);
  transform: translateX(-80px)
}

.scroll-animate .scroll-animate_right {
  -webkit-transform: translateX(80px);
  -moz-transform: translateX(80px);
  transform: translateC(80px)
}

.scroll-animate .scroll-animate_top,.scroll-animate .scroll-animate_bottom,.scroll-animate .scroll-animate_left,.scroll-animate .scroll-animate_right {
  -webkit-transition: -webkit-transform .5s,opacity .5s;
  -moz-transition: -moz-transform .5s,opacity .5s;
  transition: transform 0.5s, opacity 0.5s;
  opacity: 0
}

.scroll-animate.init-animate .scroll-animate_top,.scroll-animate.init-animate .scroll-animate_bottom {
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  transform: translateY(0);
  opacity: 1
}

.scroll-animate.init-animate .scroll-animate_left,.scroll-animate.init-animate .scroll-animate_right {
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  transform: translateX(0);
  opacity: 1
}

<div class="scroll-animate init-animate">
	<div class="scroll-animate_bottom"></div>
</div>