jQuery 10 responsive fullscreen mask layers with different animation effects

There are many mask layers. Today I introduce this jQuery responsive full-screen mask layer with 10 different animation effects.

 

Effect preview

download link

example code

<div class="container">
            <header class="sucaihuo-header">
                <h1>Full screen mask effect</h1>
                <nav class="sucaihuo-demos">
                    <a class="current-demo" href="index.html">Huge Inc</a>
                    <a href="index2.html">Corner</a>
                    <a href="index3.html">Slide down</a>
                    <a href="index5.html">Scale</a>
                    <a href="index6.html">Door</a>
                    <a href="index7.html">Content Push</a><br/>
                    <a href="index8.html">Content Scale</a>
                    <a href="index9.html">Corner Shape</a>
                    <a href="index10.html">Little Boxes</a>
                    <a href="index11.html">Simple Genie</a>
                    <a href="index12.html">Genie</a>
                </nav>
            </header>
            <section>
                <p>Overlay fades in and menu rotates slightly in perspective. As seen on <a href="http://hugeinc.com">Huge</a></p>
                <p><button id="trigger-overlay" type="button">Open Overlay</button></p>
            </section>
        </div><!-- /container -->
        <!-- open/close -->
        <div class="overlay overlay-hugeinc">
            <button type="button" class="overlay-close">Close</button>
            <nav>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">jQuery</a></li>
                    <li><a href="#">Html5</a></li>
                    <li><a href="#">Css3</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav>
        </div>
        <script src="js/classie.js"></script>
        <script src="js/demo1.js"></script>