CFXIXI工作室首页
CF西西的博客 | FullscreenOverlay全局菜单层效果

FullscreenOverlay全局菜单层效果

20. 二月 2014

 

 

 

实现方法:

1.载入css文件:

@charset "utf-8";
/* CSS Document */

.overlay-hugeinc.open {
    opacity: 1;
    visibility: visible;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
}

.overlay-hugeinc {
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 0.5s, visibility 0s 0.5s;
    transition: opacity 0.5s, visibility 0s 0.5s;
}


/* Effects */
.overlay-slidedown {
    visibility: hidden;
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
    -webkit-transition: -webkit-transform 0.4s ease-in-out, visibility 0s 0.4s;
    transition: transform 0.4s ease-in-out, visibility 0s 0.4s;
}

.overlay-slidedown.open {
    visibility: visible;
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    -webkit-transition: -webkit-transform 0.4s ease-in-out;
    transition: transform 0.4s ease-in-out;
}


/* Effects */
.overlay-corner {
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(50px) translateX(50px);
    transform: translateY(50px) translateX(50px);
    -webkit-transition: opacity 0.5s, -webkit-transform 0.5s, visibility 0s 0.5s;
    transition: opacity 0.5s, transform 0.5s, visibility 0s 0.5s;
}

.overlay-corner.open {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    -webkit-transition: opacity 0.5s, -webkit-transform 0.5s;
    transition: opacity 0.5s, transform 0.5s;
}


.overlay-scale {
    visibility: hidden;
    opacity: 0;
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    -webkit-transition: -webkit-transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
    transition: transform 0.2s, opacity 0.2s, visibility 0s 0.2s;
}

.overlay-scale.open {
    visibility: visible;
    opacity: 1;
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-transition: -webkit-transform 0.4s, opacity 0.4s;
    transition: transform 0.4s, opacity 0.4s;
}

.overlay-contentpush {
    background: rgba(153,204,51,1);
    visibility: hidden;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
    -webkit-transition: -webkit-transform 0.5s, visibility 0s 0.5s;
    transition: transform 0.5s, visibility 0s 0.5s;
}

.overlay-contentpush.open {
    visibility: visible;
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
    -webkit-transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
}


.overlay-contentscale {
    visibility: hidden;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
    -webkit-transition: -webkit-transform 0.5s, visibility 0s 0.5s;
    transition: transform 0.5s, visibility 0s 0.5s;
}

.overlay-contentscale.open {
    visibility: visible;
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
    -webkit-transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
}

.overlay {
    z-index: 1;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(153,204,51,0.9);
}

.overlay .overlay-close {
    width: 80px;
    height: 80px;
    position: absolute;
    right: 20px;
    top: 20px;
    overflow: hidden;
    border: none;
    background: url(../../img/cross.png) no-repeat center center;
    text-indent: 200%;
    color: transparent;
    outline: none;
    z-index: 100;
}

.overlay-hugeinc nav {
    -webkit-perspective: 1200px;
    perspective: 1200px;
}


.overlay nav {
    text-align: center;
    position: relative;
    top: 50%;
    height: 60%;
    font-size: 54px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}


.overlay-hugeinc.open nav ul {
    opacity: 1;
    -webkit-transform: rotateX(0deg);
    transform: rotateX(0deg);
}

.overlay-hugeinc nav ul {
    opacity: 0.4;
    -webkit-transform: translateY(-25%) rotateX(35deg);
    transform: translateY(-25%) rotateX(35deg);
    -webkit-transition: -webkit-transform 0.5s, opacity 0.5s;
    transition: transform 0.5s, opacity 0.5s;
}



.overlay ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    display: inline-block;
    height: 100%;
    position: relative;
}

.overlay ul li {
    display: block;
    height: 20%;
    height: calc(100% / 5);
    min-height: 54px;
}


.overlay ul li a {
    font-weight: 300;
    display: block;
    color: #fff;
    -webkit-transition: color 0.2s;
    transition: color 0.2s;
}

/*
a {
    color: #99cc33;
    text-decoration: none;
    outline: none;
}*/

2.载入js文件

modernizr.custom.js

classie.js

 

操作的JS:

/**
 * Created with JetBrains WebStorm.
 * User: ChenFeng
 * Date: 14-2-20
 * Time: 上午10:14
 * To change this template use File | Settings | File Templates.
 */
define(function(require, exports, module){

    var common = require('../common');





    var triggerBttn = document.getElementById( 'bbb' ),
        overlay = document.querySelector( 'div.overlay' ),
        closeBttn = overlay.querySelector( 'button.overlay-close' );
    transEndEventNames = {
        'WebkitTransition': 'webkitTransitionEnd',
        'MozTransition': 'transitionend',
        'OTransition': 'oTransitionEnd',
        'msTransition': 'MSTransitionEnd',
        'transition': 'transitionend'
    },
        transEndEventName = transEndEventNames[ Modernizr.prefixed( 'transition' ) ],
        support = { transitions : Modernizr.csstransitions };



    common.toggleOverlay1=function(){
        if( classie.has( overlay, 'open' ) ) {
            classie.remove( overlay, 'open' );
            classie.add( overlay, 'close' );
            var onEndTransitionFn = function( ev ) {
                if( support.transitions ) {
                    if( ev.propertyName !== 'visibility' ) return;
                    this.removeEventListener( transEndEventName, onEndTransitionFn );
                }
                classie.remove( overlay, 'close' );
            };
            if( support.transitions ) {
                overlay.addEventListener( transEndEventName, onEndTransitionFn );
            }
            else {
                onEndTransitionFn();
            }
        }
        else if( !classie.has( overlay, 'close' ) ) {
            classie.add( overlay, 'open' );
        }
    };



    /*triggerBttn.addEventListener( 'click', common.toggleOverlay1 );
    closeBttn.addEventListener( 'click', common.toggleOverlay1 );*/


    $("#bbb").hover().on("click",common.toggleOverlay1);

    $("div.overlay button.overlay-close").hover().on("click",common.toggleOverlay1);




});

Html代码:

		<div class="overlay overlay-hugeinc">
			<button type="button" class="overlay-close">Close</button>
			<nav>
				<ul>
					<li><a href="#">Home</a></li>
					<li><a href="#">About</a></li>
					<li><a href="#">Work</a></li>
					<li><a href="#">Clients</a></li>
					<li><a href="#">Contact</a></li>
				</ul>
			</nav>
		</div>

 

示例下载:

plugin.rar (83.79 kb)

javascript