Scribd Logo
Upload

Welcome to Scribd!

  • Create Animated Unfolding

    Uploaded by

    Morpheu
    5 views1 page
    Create Animated Unfolding

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    Create Animated Unfolding

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    5 views1 page

    Create Animated Unfolding

    Uploaded by

    Morpheu
    Create Animated Unfolding

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 1

    Li htBox

    Pusher

    How to create animated


    unfolding content
    Use Javascript and CSS animation to create an expanding menu that uses an unfolding effect

    1. Page initiation var top = nodes[0].previousElementSibling. 6. CSS: open button


    The first step is to define the HTML structure of the web offsetHeight; The first child selector is used to reference the first
    page document. This consists of the web page’s HTML for(var i=0; i<nodes.length; i++){ element of the foldout navigation. This is set to animate
    container, which stores a head and body section. While nodes[i].style.transitionDelay = over half a second. It has a default rotation, and a
    the head section loads the external CSS and JavaScript time+”s”; z-index layer set to a high number, placing it above other
    files, it’s the body section that’s used to store the page nodes[i].style.top = top+”px”; content elements.
    content elements created in step 2. nodes[i].style.zIndex = (nodes.
    length-i); nav.foldout > *:first-child{
    <!DOCTYPE html> time += 0.2; user-select: none;
    <html> top += nodes[i].offsetHeight; -moz-user-select: none;
    <head> } transition: transform .5s;
    <title>Unfolding Menu</title> *** STEP 4 HERE font-size: 2em;
    <link href=”styles.css” rel=”stylesheet” }); transform: rotate(0deg);
    type=”text/css” /> z-index: 99999;
    <script src=”code.js”></script> 4. JavaScript: toggle menu }
    <body> In addition to controlling the presentation of link
    *** STEP 2 elements, this step defines the code used to search 7. CSS: navigation links
    </body> for the first element of the child of the foldout Each of the links have padding, border, content colour and
    </head> navigation. Each of these items has a “click” event background colour applied for their standard open
    </html> listener applied that will use the parent navigation’s presentation. Transform settings position the element with
    class list toggle function to apply or remove the rotation and skew that are out of view, with transition settings
    2. Navigation container “open class to the navigation. that will animate changes. A transform origin allows animated
    The page content consists of a navigation container and changes to the rotation to show as folding out from the top.
    its content. The navigation is marked with a “foldout” var nodes = document.querySelectorAll
    class, and stores the options for the navigation. The only (“nav.foldout > *:first-child”); nav.foldout > a{
    exception is the first child element, which is to be used for(var i=0; i<nodes.length; i++){ padding: 0 1em 0 1em;
    as the open/close button. The CSS and JavaScript nodes[i].addEventListener(“click”,functi text-decoration: none;
    created in later steps will define how these elements are on(){ color: #777;
    presented and respond to user interaction. this.parentNode.classList.toggle(“open”); border: .5mm solid black;
    }); background: white;
    <nav class=”foldout”> } margin-top: -1em;
    <span>+</span> width: 100%;
    <a href=”#”>One</a> 5. CSS: initiate elements transform: rotateX(90deg) skewX(40deg);
    <a href=”#”>Two</a> Create a new file called “styles.css”. This sets up each transform-origin: center top;
    <a href=”#”>Three</a> of the elements with their position settings. The transition: transform 1s, margin-top 1s;
    <a href=”#”>Four</a> navigation container is set to use relative positioning, }
    </nav> so that absolute positioning, applied to its child
    elements, are placed in relation to the location of the 8. CSS: open settings
    navigation container. Child elements of the navigation This step defines the settings for when the parent navigation
    3. JavaScript: link search are also set to display as block elements for later has the “open” class applied. The first element is rotated so
    Create a new file called “code.js”. All JavaScript code must steps, along with them having a pointer cursor icon that the + cross becomes a closing x. Each link has its
    take place after the document has loaded, hence the code when hovered. transform and margin-top attributes changed, which in turn
    being placed inside a load event listener placed on the triggers an animation effect due to the transition set in step 7.
    window. This step searches for all of the “a” link tags inside nav{
    the foldout navigation, and applies calculated settings for position: relative; nav.foldout.open > *:first-child{
    their transition delay, vertical top position and z-index layer. } transform: rotate(45deg);
    nav > *{ }
    window.addEventListener(“load”, function(){ position: absolute; nav.foldout.open > a{
    var time = 0; display: block; transform: rotateX(0) skewX(0);
    var nodes = document.querySelectorAll cursor: pointer; margin-top: 0;
    (“nav.foldout > a”); } }

    lightbox������������������������������������������������ 23

    You might also like