前端开发制作QQH5下载界面菜单的动画效果

前端开发 用到技术
前端开发主流技术
web前端开发技术第二版

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

<!DOCTYPE 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 0.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, 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 0.2s, -webkit-transform 0.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, 0.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 0.3s ease,
                fade_in 0.5s ease 0.3s 1;
        }
        .show-menu .menu .fade-in-no-scale {
            -webkit-animation: before_fade_in 0.3s ease,
                fade_in_no_scale 0.5s ease 0.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>
        <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>
    </body>
</html>

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

前端开发技术论坛
web前端开发前沿技术
前端开发用到的技术
» 本文来自:前端开发者 » 《前端开发制作QQH5下载界面菜单的动画效果》
» 本文链接地址:https://www.rokub.com/7915.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!