文章 - 扒了一个QQH5下载界面菜单的动画效果

个人觉得这个动画效果比较适用。
QQ的网页上这个动画用到了skrollr，就是一个视觉差动效的插件。
具体用到的功能在注释里有写。
话不多说，贴代码。
html 代码

<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <title>Flex</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js" charset="utf-8"></script>
    <script src="http://prinzhorn.github.io/skrollr/dist/skrollr.min.js" charset="utf-8"></script>
</head>

@-webkit-keyframes before_fade_in {
    0% {
        opacity: 0;
    }

100% {
        opacity: 0;
    }
}

@-webkit-keyframes fade_in {
    0% {
        -webkit-transform: scale3d(0.9, 0.9, 1);
        opacity: 0;
    }

50% {
        -webkit-transform: scale3d(1.051, 1.051, 1);
    }

100% {
        -webkit-transform: scale3d(1, 1, 1);
        opacity: 1;
    }
}

@-webkit-keyframes fade_in_no_scale {
    0% {
        opacity: 0;
    }

100% {
        opacity: 1;
    }
}
</style>

</body>
</html>
<script type="text/javascript">
$(function(){
  var $body = $('body');
  var $menu = $('.menu');
  var $pageBGs = $('.page-bg');
  var viewH = window.innerHeight;
  var screenH = (window.screen.height - window.innerHeight) > 120 ? window.innerHeight : window.screen.height;
  var mySkrollr;

/*设定高度*/
  initHight();
  $(window).resize(initHight);
  function initHight() {
    window.scrollTo(0, 1);
    screenH = window.innerHeight;
    viewH = window.innerHeight;
    $body.css('height', viewH);
    $menu.css('height', viewH);
    $pageBGs.css('height', screenH);
    setTimeout(function() {
      if (mySkrollr) {
        mySkrollr.destroy();
      }
      initSkrollr();
    }, 0);
  }

/*菜单*/
  //由于显示菜单和关闭菜单的按钮位置重叠， skrollr 会在关闭菜单的时候抛出一个 tap 事件，这里可以防止这个事件导致菜单刚被关闭就被打开
  var dontShowMenu = false;
  //同样由于按钮位置重叠，安卓端某些原生浏览器会以为已经按下关闭按钮，所以这里做同样的处理
  var dontHideMenu = false;
  $('#skrollr-body').on('tap click touch iscrollTap', '.menu-btn', function() {
    if (!dontShowMenu) {
      dontHideMenu = true;
      $body.addClass('show-menu');
      $menu.css('clip', 'rect(0,9999px,' + viewH + 'px,0)');
      mySkrollr && mySkrollr.destroy();
      $body.css('overflow', 'hidden');
      $body.css('height', viewH);
      setTimeout(function() {
        dontHideMenu = false;
      }, 500);
    }
  });

$('.close-menu-btn').on('tap click touch', function(e) {
    if (!dontHideMenu) {
      $body.removeClass('show-menu');
      dontShowMenu = true;
      $menu.css('clip', 'rect(0,9999px,0px,0)');

initSkrollr();

setTimeout(function() {
        dontShowMenu = false;
      }, 500);
    }
    return false;
  })

function initSkrollr() {
    mySkrollr = skrollr.init({
      smoothScrolling: false,
      mobileDeceleration: 0.002
    });
  }

})
</script>

参考：QQH5下载界面(手机模拟访问)

扒了一个QQH5下载界面菜单的动画效果

评论 ( 0 )

最新评论

暂无评论

扒了一个QQH5下载界面菜单的动画效果

评论 ( 0 )

最新评论

暂无评论

欢迎您回来

创建账号

找回密码