Skip to content

Instantly share code, notes, and snippets.

@paingpyi

paingpyi/Bounce-Menu.markdown

Forked from anonymous/Bounce-Menu.markdown
Created March 6, 2014 04:12
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save paingpyi/9382274 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save paingpyi/9382274 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. @invalid-email-address Anonymous created this gist Mar 6, 2014.
    8 changes: 8 additions & 0 deletions Bounce-Menu.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,8 @@
    Bounce Menu
    -----------
    Menu animation based on the work of CreativeDash.
    http://dribbble.com/shots/1239862-iPad-Mini-Showcase-Template

    A [Pen](http://codepen.io/matthoiland/pen/gmFJs) by [Matt Hoiland](http://codepen.io/matthoiland) on [CodePen](http://codepen.io/).

    [License](http://codepen.io/matthoiland/pen/gmFJs/license).
    18 changes: 18 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,18 @@
    <div class="device">
    <div class="screen">
    <div class="menu">
    <ul>
    <li class="lock"><a href="">Lock</a></li>
    <li class="share"><a href="">Share</a></li>
    <li class="download"><a href="">Download</a></li>
    </ul>
    </div>
    <div class="toggle">
    <div class="x"></div>
    <div class="y"></div>
    </div>
    <div class="content"></div>
    </div>
    </div>
    <div class="circle"></div>
    <script src="http://code.jquery.com/jquery-latest.min.js">
    66 changes: 66 additions & 0 deletions script.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,66 @@

    /* Define Click Event for Mobile */
    if( 'ontouchstart' in window ){ var click = 'touchstart'; }
    else { var click = 'click'; }


    /* Click menu toggle */
    $('div.toggle').on(click, function(){
    if( flag ){
    if( !$(this).hasClass('minus') ){ openMenu(); }
    else { closeMenu(); }
    }
    });


    /* Click menu icons */
    $('div.menu ul li a').on(click, function(e){
    e.preventDefault();
    closeMenu();
    });


    /* Open/ Close Menu Functions */
    var flag = true; // Prevent menu change while animating
    function openMenu(){
    flag = false;

    // Remove circle
    $('div.circle').remove();

    // Update toggle
    $('div.toggle').addClass('minus');
    $('div.y').addClass('minus');
    setTimeout(function(){ $('div.x').addClass('stretch'); }, 100);
    setTimeout(function(){ $('div.x').removeClass('stretch'); }, 300);

    // Move content
    $('div.content').addClass('bounce');
    setTimeout(function(){ $('div.content').removeClass('bounce').addClass('open'); }, 250);

    // Animate menu icons
    $('div.menu ul li').addClass('animate');
    $('div.menu ul li').addClass('move');
    setTimeout(function(){ $('div.menu ul li').addClass('color'); }, 200);
    setTimeout(function(){ flag = true; }, 400);
    }

    function closeMenu(){
    flag = false;

    // Update toggle
    $('div.toggle').removeClass('minus');
    $('div.y').removeClass('minus');
    $('div.x').addClass('shrink');
    setTimeout(function(){ $('div.x').removeClass('shrink'); }, 200);

    // Move content
    $('div.content').removeClass('open');

    // Reset menu icons
    setTimeout(function(){
    $('div.menu ul li').removeClass('animate');
    $('div.menu ul li').removeClass('color move');
    flag = true;
    }, 300);
    }
    171 changes: 171 additions & 0 deletions style.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,171 @@
    /* Reset & General */
    * { margin: 0px; padding: 0px; }
    body {
    background: #2e2c35;
    width: 100%; height: 100%;
    }

    a.codepen {
    display: block;
    height: 43px; width: 150px;
    background: url('http://creativeda.sh/sandbox/bounce_menu/img/codepen.png');
    text-indent: -9999px; font-size: 0px;
    position: absolute;
    top: 50%; left: 50%;
    z-index: 200;
    margin: 420px 0px 0px -72px;
    }

    div.circle {
    height: 77px; width: 77px;
    background: url('http://creativeda.sh/sandbox/bounce_menu/img/circle.png');
    position: absolute;
    top: 50%; left: 50%;
    z-index: 1000;
    margin: 164px 0px 0px -168px;
    pointer-events: none;
    animation: pulse 5s infinite;
    -webkit-animation: pulse 1.5s infinite;
    opacity: 0;
    }
    @keyframes pulse {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
    }
    @-webkit-keyframes pulse {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
    }


    /* Device & Screen */
    div.device {
    height: 798px; width: 378px;
    width: 440px; height: 807px;
    background: url('http://creativeda.sh/sandbox/bounce_menu/img/iphone_black.png') no-repeat center center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    position: absolute; margin: auto;
    top: 0px; bottom: 100px; left: 0px; right: 0px;
    }
    div.screen {
    height: 568px; width: 320px;
    position: absolute;
    top: 119px; left: 60px;
    overflow: hidden;
    }
    div.content {
    height: 568px; width: 320px;
    background: #375585;
    position: absolute;
    top: 0px; left: 0px;
    z-index: 300;
    -webkit-transition: all 250ms ease;
    -moz-transition: all 250ms ease;
    -ms-transition: all 250ms ease;
    -o-transition: all 250ms ease;
    transition: all 250ms ease;
    }
    div.content.bounce {
    -webkit-transform: translate3d(70px, -65px, 0px);
    -moz-transform: translate3d(70px, -65px, 0px);
    -o-transform: translate3d(70px, -65px, 0px);
    transform: translate3d(70px, -65px, 0px);
    }
    div.content.open {
    -webkit-transform: translate3d(60px, -55px, 0px);
    -moz-transform: translate3d(60px, -55px, 0px);
    -o-transform: translate3d(60px, -55px, 0px);
    transform: translate3d(60px, -55px, 0px);
    }


    /* Toggle & Menu */
    div.toggle {
    height: 30px; width: 40px;
    position: absolute;
    bottom: 15px; left: 10px;
    z-index: 500;
    cursor: pointer;
    }
    div.x,
    div.y {
    position: absolute; margin: auto;
    top: 0px; bottom: 0px;
    left: 0px; right: 0px;
    background: #fff;
    -webkit-transition: all 200ms ease-out;
    -moz-transition: all 200ms ease-out;
    -ms-transition: all 200ms ease-out;
    -o-transition: all 200ms ease-out;
    transition: all 200ms ease-out;
    }
    div.x { height: 4px; width: 30px; }
    div.y { height: 30px; width: 4px; }
    div.x.stretch { width: 40px; }
    div.x.shrink { width: 15px; }
    div.y.minus { height: 0px; }

    div.menu {
    background: #222;
    height: 568px; width: 320px;
    position: absolute;
    top: 0px; left: 0px;
    z-index: 100;
    }
    div.menu ul {
    list-style: none;
    padding: 0px; margin: 0px;
    height: 150px;
    width: 35px;
    position: absolute;
    bottom: 60px; left: 11px;
    }
    div.menu ul li {
    margin-top: 15px;
    }
    div.menu ul li a {
    display: block;
    height: 31px; width: 31px;
    text-indent: -9999px; font-size: 0px;
    background: #375585 center center;
    }
    div.menu ul li.animate a {
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    transition: all 300ms ease-out;
    }
    div.menu ul li.lock a {
    background-image: url('http://creativeda.sh/sandbox/bounce_menu/img/icon_lock.png');
    -webkit-transform: translate3d(-50px, -30px, 0px);
    -moz-transform: translate3d(-50px, -30px, 0px);
    -o-transform: translate3d(-50px, -30px, 0px);
    transform: translate3d(-50px, -30px, 0px);
    }
    div.menu ul li.share a {
    background-image: url('http://creativeda.sh/sandbox/bounce_menu/img/icon_share.png');
    -webkit-transform: translate3d(-50px, 0px, 0px);
    -moz-transform: translate3d(-50px, 0px, 0px);
    -o-transform: translate3d(-50px, 0px, 0px);
    transform: translate3d(-50px, 0px, 0px);
    }
    div.menu ul li.download a {
    background-image: url('http://creativeda.sh/sandbox/bounce_menu/img/icon_download.png');
    -webkit-transform: translate3d(-50px, 30px, 0px);
    -moz-transform: translate3d(-50px, 30px, 0px);
    -o-transform: translate3d(-50px, 30px, 0px);
    transform: translate3d(-50px, 30px, 0px);
    }
    div.menu ul li.color a { background-color: #fff; }
    div.menu ul li.move a {
    -webkit-transform: translate3d(0px, 0px, 0px);
    -moz-transform: translate3d(0px, 0px, 0px);
    -o-transform: translate3d(0px, 0px, 0px);
    transform: translate3d(0px, 0px, 0px);
    }