个人觉得这个动画效果比较适用。 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> <style type="text/css"> @charset "UTF-8";body,h1,h2,h3,h4,html,li,p,ul{padding:0;margin:0} li,ul{list-style:none} .main,body,html{height:100%} body{font-size:62.5%;font:16px "Helvetica Neue",Helvetica,STHeiTi,"微软雅黑",sans-serif;max-width:320px;margin:0 auto;} .flex-column{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;min-height:100vh} .flex{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex} .flex .flex-col-1{-webkit-box-flex:1;-moz-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1} .flex .flex-col-2{-webkit-box-flex:2;-moz-box-flex:2;-webkit-flex:2;-ms-flex:2;flex:2} .flex-center{-webkit-box-align:center;-webkit-flex-align:center;-moz-box-align:center;-ms-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center} .menu{transition:clip .2s;clip:rect(0,9999px,0,0);color:#fff;position:absolute;top:0;left:0;right:0;z-index:500;max-width:320px;margin:0 auto} .menu ul{padding-left:4.6875%;height:100%;background:rgba(0,0,0,.85)} .menu a{color:#fff;text-decoration:none} .menu .span1{height:10%} .menu .span2{height:20%} .menu .close-menu-btn{margin-left:-20px;padding-left:20px} .menu .close-menu-btn img{width:15px;height:15px;transition:transform .2s,-webkit-transform .2s} .show-menu .menu .close-menu-btn img{-webkit-transform:rotate(90deg);transform:rotate(90deg)} .menu .row-arr{margin-right:4.6875%;background:url(https://sqimg.qq.com/qq_product_operations/imb/menu-arrow.png) center right no-repeat;background-size:8.5px 14.5px} .menu .row-div{padding-right:4.6875%} .menu .row-div div{height:1px;background:rgba(255,255,255,.5);width:100%} .menu .row-btn{position:relative;margin-right:4.6875%} .menu .row-btn a{width:48%;display:inline-block;position:relative;top:50%;margin-top:-10%} .menu .row-btn a.menu-pc-btn{margin-left:2%} .menu .row-btn a img{width:100%} .show-menu .menu .fade-in-1{-webkit-transform:scale3d(1,1,1);-webkit-animation:before_fade_in .3s ease,fade_in .5s ease .3s 1} .show-menu .menu .fade-in-no-scale{-webkit-animation:before_fade_in .3s ease,fade_in_no_scale .5s ease .3s 1} .page-1 .overlay{background:url(https://sqimg.qq.com/qq_product_operations/im/qqlogo/imlogo-m.png) center top no-repeat;background-size:100%;overflow:hidden} .page-1 .overlay .menu-btn{z-index:450;display:block;width:10%;padding:2.34375% 6.25% 2.34375% 4.6875%} .page-1 .overlay .menu-btn img{width:100%} .page-bg {background-image: url(https://sqimg.qq.com/qq_product_operations/imb/page2-bg.jpg);background-size: cover;position: absolute;top: 0;bottom: 0;width: 100%;z-index: -10;max-width:320px;} @-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> <div class="page-bg"></div> <div class="main" id="skrollr-body"> <div class="page-1"> <div class="overlay"> <a class="menu-btn" href="javascript:void(0)"> <img class="radius-btn" src="http://sqimg.qq.com/qq_product_operations/imb/icon-menu.png"> </a> </div> </div> </div> <div class="menu" style="z-index: 15;"> <ul> <li class="span1 flex "> <a pvg="immobile.menuclose" href="javascript:;" class="flex-col-1 flex flex-center close-menu-btn"> <img src="http://sqimg.qq.com/qq_product_operations/imb/menu-close.png"> </a> </li> <li class="span1 row-arr flex fade-in-1"> <a id="imlogin" pvg="immobile.menulogin" href="javascript:;" class="flex-col-1 flex flex-center ">登录</a> </li> <li class="span1 row-arr flex fade-in-1"> <a pvg="immobile.menuzuce" href="javascript:;" class="flex-col-1 flex flex-center">注册</a> </li> <li class="span1 row-div flex flex-center fade-in-no-scale"> <div></div> </li> <li class="span1 row-arr flex fade-in-1"> <a pvg="immobile.menusafe" href="javascript:;" class="flex-col-1 flex flex-center">安全中心</a> </li> <li class="span1 row-arr flex fade-in-1"> <a pvg="immobile.menuhuiyuan" href="javascript:;" class="flex-col-1 flex flex-center">QQ会员</a> </li> <li class="span1 row-arr flex fade-in-1"> <a pvg="immobile.menuhelp" href="javascript:;" class="flex-col-1 flex flex-center">常用帮助</a> </li> <li class="span1 row-arr flex fade-in-1"> <a pvg="immobile.menufeedback" href="javascript:;" class="flex-col-1 flex flex-center">提交反馈</a> </li> <li class="span2 row-btn fade-in-1"> <a href="javascript:;" class=" "> <img pvg="immobile.menu_touch_index" class="radius-btn" src="http://sqimg.qq.com/qq_product_operations/imb/menu-qq-phone-btn.png"/> </a> <a href="javascript:;" class=" menu-pc-btn"> <img pvg="immobile.menu_pc_index" class="radius-btn" src="http://sqimg.qq.com/qq_product_operations/imb/menu-qq-pc-btn.png"/> </a> </li> </ul> </div> </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下载界面(手机模拟访问)
评论 (0 )
最新评论
暂无评论
赶紧努力消灭 0 回复