如何实现元素随着滚动条向下滑动逐渐变小

Question

主要是从一个元素过渡到另一个元素，不想display:block/none这样太突兀，有个平滑地过渡

滑动条向下拉 一个元素慢慢变小，另一个渐渐出现

Answer 1

不用css3 js控制zoom也可以

Answer 2

transform:scale(x,y)实现缩放 根据滚动条下拉的距离 来设置缩放的倍数

Answer 3

你可以控制高度啊。动画效果改变div的高度:
@keyframes H_change
{

from {height: 100%;}
to {height: 0;}

}

Answer 4

//向下滚动 背景图片变大 变模糊
//向上滚动 还原. 那些参数自己调试的

   
        $(document).bind("scroll",function(){

            clearTimeout(timeout);
            timeout = setTimeout(function() {

                p = $(this).scrollTop();

                if(p <= 500)
                {
                    if (t <= p) {
                        //下滚
                        scrollSpan = p-t;
                        blurValue = blurValue + (scrollSpan*0.03);

                        scaleValuex=scaleValuex+(scrollSpan * 0.0005);
                        scaleValuey= scaleValuey+(scrollSpan * 0.0005);
                        var scale = scaleValuex+ ','+scaleValuey+','+scaleValuez;
                        opacityValue = opacityValue - (scrollSpan * 0.005);

                        //视频变模糊
                        $('#vedioCover').css('-webkit-filter','blur('+blurValue +'px)');
                        //视屏放大效果
                        $('#vedioCover').css('transform','translate3d(0px, 0px, 0px) scale3d('+scale+')');

                        //视频变模糊
                        $('#mobileCover').css('-webkit-filter','blur('+blurValue +'px)');
                        //视屏放大效果
                        $('#mobileCover').css('transform','translate3d(0px, 0px, 0px) scale3d('+scale+')');

                        //$('#hotelSearchSection').css('opacity',opacityValue).css('-webkit-filter','blur('+blurValue +'px)');

                    }

                    else {//上滚
                        scrollSpan = t-p;
                        blurValue = blurValue - (scrollSpan*0.03);

                        scaleValuex=scaleValuex-(scrollSpan * 0.0005);
                        scaleValuey= scaleValuey-(scrollSpan * 0.0005);
                        var scale = scaleValuex+ ','+scaleValuey+','+scaleValuez;
                        opacityValue = opacityValue + (scrollSpan * 0.005);
                        $('#vedioCover').css('-webkit-filter','blur('+blurValue +'px)');
                        $('#vedioCover').css('transform','translate3d(0px, 0px, 0px) scale3d('+scale+')');

                        $('#mobileCover').css('-webkit-filter','blur('+blurValue +'px)');
                        $('#mobileCover').css('transform','translate3d(0px, 0px, 0px) scale3d('+scale+')');

                       // $('#hotelSearchSection').css('opacity',opacityValue).css('-webkit-filter','blur('+blurValue +'px)');
                    }

                    setTimeout(function () {
                        t = p;
                    }, 0);
                }

            }, 10);
        })