CSS更改滚动,但滚动速度

时间:2014-12-17 12:24:58

标签: javascript jquery css animation scroll

我想在滚动时执行通常的“标题更改”。现在,“改变”动画是纯粹的CSS3动画,这意味着动画自己运行,但我希望它能够同时运行滚动速度。

现在:

<script type="text/javascript">
    $(document).on("scroll",function(){
        if($(document).scrollTop()>100){
            $("#header").removeClass("large").addClass("small");
        } else{
            $("#header").removeClass("small").addClass("large");
        }
    });
</script>

这就是我所做的(你可以看到我想要连接动画/滚动的原因): http://thomasmaier.me/beispiel/

这是我想要的一个例子:http://www.apple.com/imac-with-retina/。 (您可能需要等待一段时间才会出现巨大的壁纸。当您滚动时,css会以与滚动相同的速度更改。)

我怎么能这样做(用jQuery)? (我不是专业人士)或者你有更好,更美丽的解决方案吗?

最佳

托马斯

2 个答案:

答案 0 :(得分:1)

添加HTML属性(onscroll),您将在其中进行滚动的父块。

// HTML BLOCK

<main onscroll = myfunction(event) </main>   //make sure you pass the event parameter

// JS BLOCK

function myfunction(e){
   window.MainBlock = e.target; //set event element to a variable
   window.ScrollVert = e.scrollY; //live feed of vertical scroll position

   //add simple if statement based on values to change zoom value based on the scrollY.
   MainBlock.style.zoom = "100%"
}
//CSS BLOCK
.main {
  zoom: 150%;
}

答案 1 :(得分:1)

为了复制与Mac视网膜网页类似的效果,我会尝试捕捉功能事件,而不是用类动画徽标(“Neue Liberale”),我会调整它的大小而只让窗口如果徽标的大小已减小到一定大小,则滚动。

例如,您在页面加载时的徽标宽度为442px,假设您希望在启动类动画并让用户向下滚动之前将其缩小25%。

CSS:

html.noscroll,
body.noscroll {
    overflow-y:hidden;
}

JS:

$(document).ready(function() {
    $("hmtl, body").addClass("noscroll");
    // Storing variables under window so they can be accessed by other scripts as well
    window.logoWidth = $("#logo").width();
    window.animated = false;
    // 'animateOnce' Will run the logo animation only once if set to true
    window.animateOnce = false;
});

$(document).on("mousewheel", function (e) {
    var switchClass = function() {
            $("html, body").removeClass("noscroll");
            if ($(document).scrollTop() > 10) {
                $("#logo").removeAttr("style");
                $("#header").removeClass("large").addClass("small");
            } else {
                $("#header").removeClass("small").addClass("large");
            }
        };
    if( e.originalEvent.wheelDeltaY > 0 ) {
        switchClass();
        return true;
    }  else {
        var animate = window.animated;
        if( !animate ) {
            var targetW = window.logoWidth * 0.75,
                currW = $("#logo").width(),
                // You can seed the animation up or down by changing the 'increment' (the higer the faster)
                increment = 0.20;
            if( currW > targetW ) {
                $("#logo").width( currW - (currW * increment) ); 
                return false;
            } else {
                if( window.animateOnce )
                    window.animated = true;
                switchClass();
                return true; 
            }
        } else {
            switchClass();
        }
    }
});

的jsfiddle:

这是一个JSFiddle供参考。