一个图片滚动飞入的css特效

Posted 2020-11-21 曹增令

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一个图片滚动飞入的css特效相关的知识，希望对你有一定的参考价值。

 @keyframes bounceInLeft {
        from, 60%, 75%, 90%, to {animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);}
        0% {opacity: 0;transform: translate3d(-3000px, 0, 0);}
        60% {opacity: 1;transform: translate3d(25px, 0, 0);}
        75% {transform: translate3d(-10px, 0, 0);}
        90% {transform: translate3d(5px, 0, 0);}
        100% {opacity: 1;transform: none;}
    }
@keyframes bounceInRight {
        from, 60%, 75%, 90%, to {animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);}
        0% {opacity: 0;transform: translate3d(3000px, 0, 0);}
        60% {opacity: 1;transform: translate3d(-25px, 0, 0);}
        75% {transform: translate3d(10px, 0, 0);}
        90% {transform: translate3d(-5px, 0, 0);}
        100% {opacity: 1;transform: none;}
    }
.page5-tu1,.page5-tu2,.page5-tu3,.page5-tu4{
        position: absolute;
        width: REM(480);
        height: REM(206);
        left: 50%;
        margin-left: REM(-240);
        opacity: 0;
    }
    .page5-tu1{
        bottom: REM(778);
        animation: bounceInLeft 0.5s 0.25s linear forwards;
    }
    .page5-tu2{
        bottom: REM(548);
        animation: bounceInLeft 0.7s 0.45s linear forwards;
    }
    .page5-tu3{
        bottom: REM(314);
        animation: bounceInRight 0.9s 0.65s linear forwards;
    }
    .page5-tu4{
        bottom: REM(81);
        animation: bounceInRight 1.1s 0.85s linear forwards;
    }

(function animateUp(){
        var obj = $(‘.CfadeInUp‘);
        var objH= $(‘.CfadeInUp‘).outerHeight();
        var num = [];
        var wH  = $(window).height();
        var wScrollTop = $(window).scrollTop();

        // 获取页面所有obj的top位置，存入数组
        for(var i=0; i<obj.length;i++){
            num.push(obj.eq(i).offset().top+(objH/3));
        }
        // 循环数组，判断obj的位置是否在可视区中
        function judgeTop(){
            for(var j=0; j<num.length;j++){
                if (num[j] >= wScrollTop && num[j] < (wScrollTop+wH)) {
                    obj.eq(j).css({
                        ‘animation-name‘:‘bounceInRight‘,
                        ‘opacity‘:‘1‘
                    });
                }
            }
        };

        // 触发滚动事件调用判断函数
        $(window).scroll(function(event) {
            wH = $(window).height();
            wScrollTop = $(window).scrollTop();
            judgeTop();
        });
    })();

以上是关于一个图片滚动飞入的css特效的主要内容，如果未能解决你的问题，请参考以下文章

鼠标经过图片时，飞入另外一张图片。

文字一行一行从底部飞入 html5 css3 求大神。。。

多张图片滚动切换，css代码样式。

css代码背景超出长度屏幕跟随滚动到图片展示完就不动了

如何在css中把一组静态图片改成动态滚动的图片

jQuery实现飞入购物车功能

一个 图片 滚动 飞入的css特效

一个图片滚动飞入的css特效