15.08.14, 14:52
0 комментарий
  Уроки

Closing Door Menu

Этот эффект вдохновлен эффектом меню Enjoy Aiia. Это - заключительное дверное меню, где 2 стороны меню объединяются за кадром, чтобы создать заключительное меню. Я создал 4 изменения, 2 вертикальных и 2 горизонтальных меню, каждого с 2 различными мультипликациями: нормальный и сильный удар.

Закрытие дверной структуры меню

Это - горизонтальный стиль. У этого есть левое меню с текстовыми ссылками и правильная часть меню со связями символа. Также средняя эмблема может также быть фирменной связью.

<div class="menu">
  <div class="left-menu">
    <a class="menu-button" href="#"><i class="fa fa-times"></i>Close Menu</a>
    <ul>
      <li><a href="">Important Link 1</a></li>
      <li><a href="">Important Link 2</a></li>
      <li><a href="">Other Link</a></li>
      <li><a href="">Social Media Link</a></li>
    </ul>
    <div class="circle"><a href="http://www.webdesigncrowd.com"><img src="http://www.webdesigncrowd.com/wp-content/themes/tanzaku/images/logo.png"></a></div>
  </div>
 
  <div class="right-preview">
    <a href=""><img src="images/icon-book.png"></a>
    <a href=""><img src="images/icon-clock.png"></a>
    <a href=""><img src="images/icon-pencil.png"></a>
  </div>
</div>


Стиль CSS

Вот стиль для горизонтального меню. В основном это достигает эффекта, используя переходы.

/* Closing Door Menu */
 
.menu {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
}
  /* Horizontal */
  .menu .left-menu {
    width: 30%;
    height: 100%;
    position: absolute;
    display: table;
    border-right: 1px solid #444;
    z-index: 1;
    left: -50%;
    background-color: #444;
 
    -webkit-transition: .4s;
    transition: .4s;
  }
    .menu .left-menu a.menu-button {
      position: absolute;
      left: 0;
      right: 0;
      top: 20px;
      text-align: center;
      font-size: 11px;
      text-transform: uppercase;
    }
      .menu .left-menu a.menu-button i { 
        font-size: 28px; 
        margin: -3.5px 10px 0 0;
        vertical-align: middle;
      }
    .menu .left-menu ul {
      display: table-cell;
      width: 100%;
      vertical-align: middle;
      text-align: left;
    }
    .menu .left-menu li {
      font-size: 28px;
      line-height: 30px;
      margin: 10px;
    }
    .menu.in .left-menu { left: 0; }
    .menu.bounce.in .left-menu {
      -moz-animation-name:bounce-right;
      -moz-animation-duration:.8s;
      -moz-animation-fill-mode:backwards;
       
      -webkit-animation-name:bounce-right;
      -webkit-animation-duration:.8s;
      -webkit-animation-fill-mode:backwards;
       
      animation-name:bounce-right;
      animation-duration:.8s;
      animation-fill-mode:backwards;
    }
    .menu .circle {
      height: 150px;
      width: 150px;
      border-radius: 50%;
      background-color: #CCC;
       
      position: absolute;
      top: 50%;
      right: 0;
      margin-right: -75px;
      margin-top: -75px;
    }
      .menu .circle a {
        position: relative;
        top: 50px;
        margin: 0;
 
        /* IE 8 */
        -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
        /* IE 5-7 */
        filter: alpha(opacity=80);
        /* Netscape */
        -moz-opacity: 0.8;
        /* Safari 1.x */
        -khtml-opacity: 0.8;
        /* Good browsers */
        opacity: 0.8;
      }
 
  .menu .right-preview {
    width: 70%;
    height: 100%;
    position: absolute;
    right: -70%;
    background-color: #ffb9b5;
    z-index: 0;
 
    -webkit-transition: .4s;
    transition: .4s;
  }
    .menu .right-preview a {
      position: relative;
      top: 50%;
      margin-top: -64px;
      height: 128px;
      display: inline-block;
      padding: 0 50px;
      -webkit-transition: .2s;
      transition: .2s;
    }
     .menu .right-preview a:hover {
        top: 48%;
      }
    .menu.in .right-preview { right: 0; }
    .menu.bounce.in .right-preview {
      -moz-animation-name:bounce-left;
      -moz-animation-duration:.8s;
      -moz-animation-fill-mode:backwards;
       
      -webkit-animation-name:bounce-left;
      -webkit-animation-duration:.8s;
      -webkit-animation-fill-mode:backwards;
       
      animation-name:bounce-left;
      animation-duration:.8s;
      animation-fill-mode:backwards;
    }


Мультипликация сильного удара

Вот keyframe мультипликация для горизонтальной мультипликации сильного удара. Это в основном использует переменную непринужденность - в, мультипликации непринужденности, чтобы снизить меню и назад вверх и вниз, таким образом, похоже, что подпрыгивает.

@-webkit-keyframes bounce-right {
  0%  { left:-30%; -webkit-animation-timing-function:ease-in;  }
  37%   { left:0; -webkit-animation-timing-function:ease-out; }
  55%   { left:-7.5%; -webkit-animation-timing-function:ease-in;  }
  73%   { left:0; -webkit-animation-timing-function:ease-out; }
  82%   { left:-2.1%; -webkit-animation-timing-function:ease-in;  }
  91%   { left:0; -webkit-animation-timing-function:ease-out; }
  96%   { left:-0.6%; -webkit-animation-timing-function:ease-in;  }
  100%  { left:0; }
}
@-moz-keyframes bounce-right {
  0%  { left:-30%; -moz-animation-timing-function:ease-in;  }
  37%   { left:0; -moz-animation-timing-function:ease-out; }
  55%   { left:-7.5%; -moz-animation-timing-function:ease-in;  }
  73%   { left:0; -moz-animation-timing-function:ease-out; }
  82%   { left:-2.1%; -moz-animation-timing-function:ease-in;  }
  91%   { left:0; -moz-animation-timing-function:ease-out; }
  96%   { left:-0.6%; -moz-animation-timing-function:ease-in;  }
  100%  { left:0; }
}
@keyframes bounce-right {
  0%  { left:-30%; -moz-animation-timing-function:ease-in;  }
  37%   { left:0; -moz-animation-timing-function:ease-out; }
  55%   { left:-7.5%; -moz-animation-timing-function:ease-in;  }
  73%   { left:0; -moz-animation-timing-function:ease-out; }
  82%   { left:-2.1%; -moz-animation-timing-function:ease-in;  }
  91%   { left:0; -moz-animation-timing-function:ease-out; }
  96%   { left:-0.6%; -moz-animation-timing-function:ease-in;  }
  100%  { left:0; }
}
 
/* left */
@-webkit-keyframes bounce-left {
  0%  { right:-70%; -webkit-animation-timing-function:ease-in;  }
  37%   { right:0; -webkit-animation-timing-function:ease-out; }
  55%   { right:-17.5%; -webkit-animation-timing-function:ease-in;  }
  73%   { right:0; -webkit-animation-timing-function:ease-out; }
  82%   { right:-4.9%; -webkit-animation-timing-function:ease-in;  }
  91%   { right:0; -webkit-animation-timing-function:ease-out; }
  96%   { right:-1.4%; -webkit-animation-timing-function:ease-in;  }
  100%  { right:0; }
}
@-moz-keyframes bounce-left {
  0%  { right:-70%; -moz-animation-timing-function:ease-in;  }
  37%   { right:0; -moz-animation-timing-function:ease-out; }
  55%   { right:-17.5%; -moz-animation-timing-function:ease-in;  }
  73%   { right:0; -moz-animation-timing-function:ease-out; }
  82%   { right:-4.9%; -moz-animation-timing-function:ease-in;  }
  91%   { right:0; -moz-animation-timing-function:ease-out; }
  96%   { right:-1.4%; -moz-animation-timing-function:ease-in;  }
  100%  { right:0; }
}
@keyframes bounce-left {
  0%  { right:-70%; -moz-animation-timing-function:ease-in;  }
  37%   { right:0; -moz-animation-timing-function:ease-out; }
  55%   { right:-17.5%; -moz-animation-timing-function:ease-in;  }
  73%   { right:0; -moz-animation-timing-function:ease-out; }
  82%   { right:-4.9%; -moz-animation-timing-function:ease-in;  }
  91%   { right:0; -moz-animation-timing-function:ease-out; }
  96%   { right:-1.4%; -moz-animation-timing-function:ease-in;  }
  100%  { right:0; }
}


jQuery

Работа jQuery только к z-индексам пуговицы вначале и концу мультипликации.

(function($){
    $(function(){
       
        $('.menu-button').click(function (e){
            e.preventDefault();
            var menu = $('.menu');
 
            if (menu.hasClass('in')) {
                setTimeout(function (){
                    menu.css('z-index', '-1');
                }, 400); // how long do you want the delay to be?   
            }
            else {
                menu.css('z-index', '1');
            }
 
            menu.toggleClass('in');
 
        });
 
    }); // end of document ready
})(jQuery); // end of jQuery name space


СКАЧАТЬ

Вес файла
33.33 Kb

Реклама

Напишите своё мнение

  • acuteaggressiveair_kissangel
    badbbbeachbeee
    biggrinbig_bossblumblush
    boastbombboredombye
    clappingcraycrazycurtsey
    dancedashdeclarediablo
    diroldon-t_mentiondownloaddrinks
    first_moveflirtfocusfool
    friendsgive_heartgive_rosegood
    hangheartheathelp
    hihunterhystericireful
    kingkisslaughlazy
    lolmail1mambaman_in_love
    mdamega_shokmoilmosking
    musicneanegativenew_russian
    okon_the_quietpardonparting
    partypilotpioneerpleasantry
    popcormpranksterprevedpunish
    roflrtfmrussiansad
    sarcasticscarescratchsearch
    secretsensoredshokshout
    slowsmilesmokesoldier
    soldier_girlsorryspitefulspruce_up
    stinkersuicidesunsuperstition
    swoonteasetenderthanks
    thisto_pick_ones_noseto_take_umbragetreaten
    umnikunknwvampirevava
    victorywackowhistlewink
    wizardyahooyesyu
    e101e102e103e104
    e105e106e107e108
    e109e110e111e112
    e113e114e115e116
    e117e118e119e120
    e121e122e123e124
    e125e126e127e128
    e129e130e131e132
    e133e134e135e136
    e137e138e139e140
    e141e142e143e144
    e145e146e147e148
    e149e150e151e152
    e153e154e155e156
    e157e158e159e160
    e161e162e163e164
    e165e166e167e168
    e169e170e171e172
    e173e174e175e176
    e177e178e179e180
    e181e182e183e184
    e185e186e187e188
    e189e190e191e192
    e193e194e195e196
    e197e198e199e200
    e201e202e203e204