使用Lottie.js实现的全屏画布外菜单动画

Full Screen Nav Menu with Lottie.js

h5, menu, template, lottie

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 3246
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

// Show an element
var show = function(elem) {
    elem.classList.add('is-visible');
};

// Toggle element visibility
var toggle = function(elem) {
    elem.classList.toggle('is-visible');
};

// Listen for click events
document.addEventListener('click', function(event) {

// Make sure clicked element is our toggle
    if (!event.target.classList.contains('toggle')) return;

// Prevent default link behavior
    event.preventDefault();

// Get the content
    var content = document.querySelector(event.target.hash);
    if (!content) return;

// Toggle the content
    toggle(content);

}, false);

var ham = {
    container: document.getElementById('toggle'),
    renderer: 'svg',
    loop: false,
    autoplay: false,
    prerender: false,
    path: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1229210/burger.json',
    rendererSettings: {
        progressiveLoad: false,
        preserveAspectRatio: 'none'
    }
};

var ham = lottie.loadAnimation(ham);

ham.setDirection(-1);

var anim = {
    container: document.getElementById('modal-nav-overlay'),
    renderer: 'svg',
    loop: false,
    autoplay: false,
    prerender: false,
    path: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/1229210/transition_anim.json',
    rendererSettings: {
        progressiveLoad: false,
        preserveAspectRatio: 'none'
    }
};

var anim = lottie.loadAnimation(anim);

var body = document.body;
var takeover = document.querySelector("#modal-nav-overlay");
var menu = document.querySelector("#modal");

// set initial animation direction
anim.setDirection(-1);

document.getElementById("toggle").addEventListener("click", function() {
    // If the menu is invisible, play the open animation to visible
    if (anim.playDirection == -1) {
        takeover.style.zIndex = "20";
        menu.style.zIndex = "21";
        anim.setDirection(1);
        anim.play();
        anim.addEventListener("complete", function() {
            body.classList.remove("close")
            body.classList.add("open")
        });
    }

if (ham.playDirection == -1) {
        ham.setDirection(1);
        // ham.play();
        ham.goToAndPlay([15], true);
        ham.playSegments([15, 34], true);
        ham.addEventListener("complete", function() {
            body.classList.remove("close")
            body.classList.add("open")
        });
    }

// Ensure everything is invisible and launch takeover animation and links out if not
    else {
        body.classList.remove("open")
        body.classList.add("close")
        anim.setDirection(-1);
        anim.play();
        setTimeout(delayit, 600);

function delayit() {
            takeover.style.zIndex = "4";
        }
        setTimeout(delaymodal, 600);

function delaymodal() {
            menu.style.zIndex = "-1";
        }
        anim.addEventListener("complete", function() {
            body.classList.remove("open")
            body.classList.add("close")
        });

ham.setDirection(-1);
        ham.play();
        ham.addEventListener("complete", function() {
            body.classList.remove("open")
            body.classList.add("close")
        });

}
});

编译

CSS

@import url('https://fonts.googleapis.com/css?family=Quicksand');
body {
    position: relative;
    font-family: "Quicksand", sans-serif;
}
html,
body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
#modal {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}
.modal__content {
    opacity: 0;
    display: none;
    pointer-events: none;
    -webkit-transform: scale(0.8) translate3D(0, -20px, 0);
    transform: scale(0.8) translate3D(0, -20px, 0);
    transition: opacity 0.2s, -webkit-transform 0.8s cubic-bezier(0.09, 0.52, 0.25, 1);
    -webkit-transition: opacity 0.2s, -webkit-transform 0.8s cubic-bezier(0.09, 0.52, 0.25, 1);
    transition: opacity 0.2s, transform 0.8s cubic-bezier(0.09, 0.52, 0.25, 1);
    transition: opacity 0.2s, transform 0.8s cubic-bezier(0.09, 0.52, 0.25, 1), -webkit-transform 0.8s cubic-bezier(0.09, 0.52, 0.25, 1);
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    padding: 1em;
}
.open .modal__content {
    opacity: 1;
    display: block;
    pointer-events: all;
    -webkit-transform: scale(1) translate3D(0, 0, 0);
    transform: scale(1) translate3D(0, 0, 0);
}
ul {
    font-family: "Quicksand", sans-serif;
    list-style-type: none;
    padding-left: 0;
    font-size: 2.5em;
    line-height: 2em;
}
li {
    -webkit-transition: all .75s ease;
    transition: all .75s ease;
}
li:hover {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}
a {
    text-decoration: none;
    color: #a9efff;
    -webkit-transition: all .5s ease;
    transition: all .5s ease;
    cursor: pointer;
}
#trigger {
    position: absolute;
    top: 10px;
    left: 20px;
    z-index: 100px;
}
.toggle {
    position: fixed;
    top: 15px;
    left: 10px;
    z-index: 99;
    width: 50px;
    height: 50px;
    overflow: hidden;
    background: #fff;
    -webkit-box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 2px 2px 10px 0px rgba(0, 0, 0, 0.2);
}
#toggle svg {
    position: absolute;
    top: -124px;
    left: -175px;
    width: 400px !important;
    height: auto !important;
}
.toggle-content {
    position: absolute;
    top: 15px;
    left: 0px;
    z-index: 5;
    color: #0b0b26;
    font-size: 18px;
    line-height: 1.75;
    margin: 80px;
}
.disable {
    display: none;
}
.enable {
    display: block;
    z-index: 6;
}
.modal-nav-overlay {
    width: 100%;
    height: 100%;
    position: fixed;
    overflow: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    text-align: center;
}
#modal-nav-overlay {
    position: fixed;
}
.modal-nav-overlay.is-visible {
    z-index: 6;
}

HTML

<div id="modal">
        <div class="modal__content">
            <ul class="menu-options">
                <li><a href="#">Home</a>
                </li>
                <li><a href="#">About</a>
                </li>
                <li><a href="#">Work</a>
                </li>
                <li><a href="#">Services</a>
                </li>
                <li><a href="#">Contact</a>
                </li>
            </ul>
        </div>
    </div>

<div class="toggle-content">
        <p>With the ever growing impact of science on our lives, religion and spirituality have a greater role to play reminding us of our humanity. There is no contradiction between the two. Each gives us valuable insights into the other. Both science and
            the teachings of the Buddha tell us of the fundamental unity of all things.</p>
        <p>It is clear that feelings of love, affection, closeness and compassion bring happiness. I believe that every one of us has the means to be happy, to access the warm and compassionate states of mind that bring happiness. In fact, it is one of my
            fundamental beliefs that not only do we inherently possess the potential for compassion, but I believe that the basic or underlying nature of human beings is gentleness.</p>
    </div>

</div>

Full Screen Nav Menu with Lottie.js

h5, menu, template, lottie

编辑器支持Emmet

快捷键

Full Screen Nav Menu with Lottie.js

h5, menu, template, lottie

使用CSS3 :focus-within实现的屏幕外导航菜单

使用path-slider.js实现的环形路径菜单

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：