Question

当我点击第一个网页上的按钮时，我想让第二页向下滑动，然后反弹几次。我到目前为止已经为滑动操作获得了一个javascript函数，但我无法弄清楚如何让页面反弹。有没有javascript弹跳功能？我应该使用关键帧吗？如果我使用css关键帧，我如何将它们与我的初始javascript函数相关联？

<script type="text/javascript">

(function() {

    var windowH = $(window).height(),
        documElem = $(document),
        slideDownPage = $('.slide-down-page'),
        content = $('.content'),
        btns = $('.btn'),
        animSpeed = 500;

    slideDownPage.css({
        height: windowH + 'px',
        top: -windowH + 'px'
    });

  content.css({
  height: windowH+'px',})

    btns.on('click', function(e) {
        if ( $(this).hasClass('open') ) {
            slideDownPage.animate({'top': 0}, animSpeed);
            content.animate({'margin-top': windowH + 'px'}, animSpeed);
        }
        else {
            slideDownPage.animate({'top': -windowH + 'px'}, animSpeed);
            content.animate({'margin-top': 0}, animSpeed);
        }
        e.preventDefault();
    });

    documElem.on('scroll', function() {
        if ( $(this).scrollTop() > slideDownPage.height() && slideDownPage.css('top') === '0px' ) {
            slideDownPage.css('top', -windowH + 'px');
            content.css('margin-top', 0);
            documElem.scrollTop(0);
        }
    });         
})();      
</script>

Answer 1

你可以使用css keyframs，这个例子来自How to create bouncing div animation。

HTML：

<div class="bounce"></div>

CSS：

.bounce {
    -webkit-animation:bounce 1s infinite;
}

@-webkit-keyframes bounce {
      0%       { bottom:5px; }
      25%, 75% { bottom:15px; }
      50%      { bottom:20px; }
      100%     { bottom:0;}
}

详细了解css关键帧here。

Page Transition Slide Down＆amp;弹跳

1 个答案: