2017-12-27 127 views
5

Pracuję z OffCanvasMenuEffects i używam efektu menu falowego. Widać to menu w następujących:Jak zmienić pozycję animacji w Off-Canvas Menu Efekty

article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;} 
 

 
html, 
 
body, 
 
.container, 
 
.content-wrap { 
 
\t overflow: hidden; 
 
\t width: 100%; 
 
\t height: 100%; 
 
} 
 

 
.container { 
 
\t background: #373a47; 
 
} 
 

 
.menu-wrap a { 
 
\t color: #b8b7ad; 
 
} 
 

 
.menu-wrap a:hover, 
 
.menu-wrap a:focus { 
 
\t color: #c94e50; 
 
} 
 

 
.content-wrap { 
 
\t overflow-y: scroll; 
 
\t -webkit-overflow-scrolling: touch; 
 
} 
 

 
.content { 
 
\t position: relative; 
 
\t background: #b4bad2; 
 
} 
 

 
.content::before { 
 
\t position: absolute; 
 
\t top: 0; 
 
\t left: 0; 
 
\t z-index: 10; 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t background: rgba(0,0,0,0.3); 
 
\t content: ''; 
 
\t opacity: 0; 
 
\t -webkit-transform: translate3d(100%,0,0); 
 
\t transform: translate3d(100%,0,0); 
 
\t -webkit-transition: opacity 0.4s, -webkit-transform 0s 0.4s; 
 
\t transition: opacity 0.4s, transform 0s 0.4s; 
 
} 
 

 
/* Menu Button */ 
 
.menu-button { 
 
\t position: fixed; 
 
\t bottom: 0; 
 
\t z-index: 1000; 
 
\t margin: 1em; 
 
\t padding: 0; 
 
\t width: 2.5em; 
 
\t height: 2.25em; 
 
\t border: none; 
 
\t text-indent: 2.5em; 
 
\t font-size: 1.5em; 
 
\t color: transparent; 
 
\t background: transparent; 
 
} 
 

 
.menu-button::before { 
 
\t position: absolute; 
 
\t top: 0.5em; 
 
\t right: 0.5em; 
 
\t bottom: 0.5em; 
 
\t left: 0.5em; 
 
\t background: linear-gradient(#373a47 20%, transparent 20%, transparent 40%, #373a47 40%, #373a47 60%, transparent 60%, transparent 80%, #373a47 80%); 
 
\t content: ''; 
 
} 
 

 
.menu-button:hover { 
 
\t opacity: 0.6; 
 
} 
 

 
/* Close Button */ 
 
.close-button { 
 
\t width: 16px; 
 
\t height: 16px; 
 
\t position: absolute; 
 
\t right: 1em; 
 
\t top: 1em; 
 
\t overflow: hidden; 
 
\t text-indent: 16px; 
 
\t border: none; 
 
\t z-index: 1001; 
 
\t background: transparent; 
 
\t color: transparent; 
 
} 
 

 
.close-button::before, 
 
.close-button::after { 
 
\t content: ''; 
 
\t position: absolute; 
 
\t width: 2px; 
 
\t height: 100%; 
 
\t top: 0; 
 
\t left: 50%; 
 
\t background: #888; 
 
} 
 

 
.close-button::before { 
 
\t -webkit-transform: rotate(45deg); 
 
\t transform: rotate(45deg); 
 
} 
 

 
.close-button::after { 
 
\t -webkit-transform: rotate(-45deg); 
 
\t transform: rotate(-45deg); 
 
} 
 

 
/* Menu */ 
 
.menu-wrap { 
 
\t position: absolute; 
 
\t bottom: 0; 
 
\t left: 0; 
 
\t z-index: 1001; 
 
\t width: 100%; 
 
\t height: 160px; 
 
\t font-size: 1.15em; 
 
\t -webkit-transform: translate3d(0,160px,0); 
 
\t transform: translate3d(0,160px,0); 
 
\t -webkit-transition: -webkit-transform 0.4s; 
 
\t transition: transform 0.4s; 
 
} 
 

 
.menu { 
 
\t position: absolute; 
 
\t width: 100%; 
 
\t z-index: 1000; 
 
\t text-align: center; \t 
 
\t top: 50%; 
 
\t padding: 0 1.5em; 
 
\t -webkit-transform: translate3d(0,-50%,0); 
 
\t transform: translate3d(0,-50%,0); 
 
} 
 

 
.icon-list a, 
 
.close-button { 
 
\t opacity: 0; 
 
\t -webkit-transform: translate3d(0,200px,0); 
 
\t transform: translate3d(0,200px,0); 
 
\t -webkit-transition: opacity 0.4s, -webkit-transform 0.4s; 
 
\t transition: opacity 0.4s, transform 0.4s; 
 
} 
 

 
.icon-list a { 
 
\t display: inline-block; 
 
\t padding: 0.8em; 
 
} 
 

 
.icon-list a i { 
 
\t vertical-align: middle; 
 
} 
 

 
.icon-list a span { 
 
\t display: inline-block; 
 
\t margin-left: 10px; 
 
\t font-size: 0.75em; 
 
\t vertical-align: middle; 
 
\t font-weight: 700; 
 
\t letter-spacing: 1px; 
 
} 
 

 
/* Morph Shape */ 
 
.morph-shape { 
 
\t position: absolute; 
 
\t width: 100%; 
 
\t width: calc(100% + 400px); 
 
\t height: 100%; 
 
\t top: 0; 
 
\t left: 0; 
 
\t fill: #373a47; 
 
\t -webkit-transition: -webkit-transform 0.4s; 
 
\t transition: transform 0.4s; 
 
\t -webkit-transform: translate3d(-400px,0,0); 
 
\t transform: translate3d(-400px,0,0); 
 
} 
 

 
/* Shown menu */ 
 
.show-menu .menu-wrap, 
 
.show-menu .icon-list a, 
 
.show-menu .close-button, 
 
.show-menu .morph-shape, 
 
.show-menu .content::before { 
 
\t -webkit-transform: translate3d(0,0,0); 
 
\t transform: translate3d(0,0,0); 
 
} 
 

 
.show-menu .menu-wrap, 
 
.show-menu .content::before { 
 
\t -webkit-transition-delay: 0s; 
 
\t transition-delay: 0s; 
 
} 
 

 
.show-menu .icon-list a, 
 
.show-menu .close-button, 
 
.show-menu .content::before { 
 
\t opacity: 1; 
 
} 
 

 
.show-menu .icon-list a:nth-child(2) { 
 
\t -webkit-transition-delay: 0.05s; 
 
\t transition-delay: 0.05s; 
 
} 
 

 
.show-menu .icon-list a:nth-child(3) { 
 
\t -webkit-transition-delay: 0.1s; 
 
\t transition-delay: 0.1s; 
 
} 
 

 
.show-menu .icon-list a:nth-child(4) { 
 
\t -webkit-transition-delay: 0.15s; 
 
\t transition-delay: 0.15s; 
 
} 
 

 
.show-menu .icon-list a:nth-child(5) { 
 
\t -webkit-transition-delay: 0.2s; 
 
\t transition-delay: 0.2s; 
 
} 
 

 
.show-menu .icon-list a:nth-child(6) { 
 
\t -webkit-transition-delay: 0.25s; 
 
\t transition-delay: 0.25s; 
 
} 
 

 
.show-menu .close-button { 
 
\t -webkit-transition-delay: 0.3s; 
 
\t transition-delay: 0.3s; 
 
} 
 

 
.show-menu .content::before { 
 
\t -webkit-transition: opacity 0.4s; 
 
\t transition: opacity 0.4s; 
 
}
<link rel="stylesheet" type="text/css" href="https://tympanus.net/Development/OffCanvasMenuEffects/fonts/font-awesome-4.2.0/css/font-awesome.min.css" /> 
 
    <script src="https://tympanus.net/Development/OffCanvasMenuEffects/js/snap.svg-min.js"></script> 
 

 
<div class="menu-wrap"> 
 
    <nav class="menu"> 
 
     <div class="icon-list"> 
 
     <a href="#"><i class="fa fa-fw fa-star-o"></i><span>Favorites</span></a> 
 
     <a href="#"><i class="fa fa-fw fa-bell-o"></i><span>Alerts</span></a> 
 
     <a href="#"><i class="fa fa-fw fa-envelope-o"></i><span>Messages</span></a> 
 
     <a href="#"><i class="fa fa-fw fa-comment-o"></i><span>Comments</span></a> 
 
     <a href="#"><i class="fa fa-fw fa-bar-chart-o"></i><span>Analytics</span></a> 
 
     <a href="#"><i class="fa fa-fw fa-newspaper-o"></i><span>Reading List</span></a> 
 
     </div> 
 
    </nav> 
 
    <button class="close-button" id="close-button">Close Menu</button> 
 
    <div class="morph-shape" id="morph-shape" data-morph-open="M0,100h1000V0c0,0-136.938,0-224,0C583,0,610.924,0,498,0C387,0,395,0,249,0C118,0,0,0,0,0V100z"> 
 
     <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1000 100" preserveAspectRatio="none"> 
 
     <path d="M0,100h1000l0,0c0,0-136.938,0-224,0c-193,0-170.235-1.256-278-35C399,34,395,0,249,0C118,0,0,100,0,100L0,100z"/> 
 
     </svg> 
 
    </div> 
 
    </div> 
 
    <button class="menu-button" id="open-button">Open Menu</button> 
 
    
 
    <script src="https://tympanus.net/Development/OffCanvasMenuEffects/js/classie.js"></script> 
 
    <script src="https://tympanus.net/Development/OffCanvasMenuEffects/js/main3.js"></script>

Obecnie Menu otwiera się od dołu do góry.

Moje pytanie brzmi: jak to jest możliwe, aby zmienić pozycję, w jaki Off ładunku menu płótno, domyślnie jest od dołu do góry z efektem fali konwertować do góry do dołu, jak tej strony: https://afriendofmine.nl

Jak to może być osiągnąć?

Próbowałem edytować menu, ale wynik nie był dobry! Edytuję klasę . I zastąpić bottom: 0; z top: 0; następująco:

.menu-wrap { 
    position: absolute; 
    top: 0; //edited 
    left: 0; 
    z-index: 1001; 
    width: 100%; 
    height: 160px; 
    font-size: 1.15em; 
    -webkit-transform: translate3d(0,160px,0); 
    transform: translate3d(0,160px,0); 
    -webkit-transition: -webkit-transform 0.4s; 
    transition: transform 0.4s; 
} 

Po tym wszystkim, w jaki sposób można sprawić, że menu do otwiera się od góry do dołu? jak tej strony: https://afriendofmine.nl

article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;} 
 

 
html, 
 
body, 
 
.container, 
 
.content-wrap { 
 
\t overflow: hidden; 
 
\t width: 100%; 
 
\t height: 100%; 
 
} 
 

 
.container { 
 
\t background: #373a47; 
 
} 
 

 
.menu-wrap a { 
 
\t color: #b8b7ad; 
 
} 
 

 
.menu-wrap a:hover, 
 
.menu-wrap a:focus { 
 
\t color: #c94e50; 
 
} 
 

 
.content-wrap { 
 
\t overflow-y: scroll; 
 
\t -webkit-overflow-scrolling: touch; 
 
} 
 

 
.content { 
 
\t position: relative; 
 
\t background: #b4bad2; 
 
} 
 

 
.content::before { 
 
\t position: absolute; 
 
\t top: 0; 
 
\t left: 0; 
 
\t z-index: 10; 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t background: rgba(0,0,0,0.3); 
 
\t content: ''; 
 
\t opacity: 0; 
 
\t -webkit-transform: translate3d(100%,0,0); 
 
\t transform: translate3d(100%,0,0); 
 
\t -webkit-transition: opacity 0.4s, -webkit-transform 0s 0.4s; 
 
\t transition: opacity 0.4s, transform 0s 0.4s; 
 
} 
 

 
/* Menu Button */ 
 
.menu-button { 
 
\t position: fixed; 
 
\t bottom: 0; 
 
\t z-index: 1000; 
 
\t margin: 1em; 
 
\t padding: 0; 
 
\t width: 2.5em; 
 
\t height: 2.25em; 
 
\t border: none; 
 
\t text-indent: 2.5em; 
 
\t font-size: 1.5em; 
 
\t color: transparent; 
 
\t background: transparent; 
 
} 
 

 
.menu-button::before { 
 
\t position: absolute; 
 
\t top: 0.5em; 
 
\t right: 0.5em; 
 
\t bottom: 0.5em; 
 
\t left: 0.5em; 
 
\t background: linear-gradient(#373a47 20%, transparent 20%, transparent 40%, #373a47 40%, #373a47 60%, transparent 60%, transparent 80%, #373a47 80%); 
 
\t content: ''; 
 
} 
 

 
.menu-button:hover { 
 
\t opacity: 0.6; 
 
} 
 

 
/* Close Button */ 
 
.close-button { 
 
\t width: 16px; 
 
\t height: 16px; 
 
\t position: absolute; 
 
\t right: 1em; 
 
\t top: 1em; 
 
\t overflow: hidden; 
 
\t text-indent: 16px; 
 
\t border: none; 
 
\t z-index: 1001; 
 
\t background: transparent; 
 
\t color: transparent; 
 
} 
 

 
.close-button::before, 
 
.close-button::after { 
 
\t content: ''; 
 
\t position: absolute; 
 
\t width: 2px; 
 
\t height: 100%; 
 
\t top: 0; 
 
\t left: 50%; 
 
\t background: #888; 
 
} 
 

 
.close-button::before { 
 
\t -webkit-transform: rotate(45deg); 
 
\t transform: rotate(45deg); 
 
} 
 

 
.close-button::after { 
 
\t -webkit-transform: rotate(-45deg); 
 
\t transform: rotate(-45deg); 
 
} 
 

 
/* Menu */ 
 
.menu-wrap { 
 
\t position: absolute; 
 
\t top: 0; //edited 
 
\t left: 0; 
 
\t z-index: 1001; 
 
\t width: 100%; 
 
\t height: 160px; 
 
\t font-size: 1.15em; 
 
\t -webkit-transform: translate3d(0,160px,0); 
 
\t transform: translate3d(0,160px,0); 
 
\t -webkit-transition: -webkit-transform 0.4s; 
 
\t transition: transform 0.4s; 
 
} 
 

 
.menu { 
 
\t position: absolute; 
 
\t width: 100%; 
 
\t z-index: 1000; 
 
\t text-align: center; \t 
 
\t top: 50%; 
 
\t padding: 0 1.5em; 
 
\t -webkit-transform: translate3d(0,-50%,0); 
 
\t transform: translate3d(0,-50%,0); 
 
} 
 

 
.icon-list a, 
 
.close-button { 
 
\t opacity: 0; 
 
\t -webkit-transform: translate3d(0,200px,0); 
 
\t transform: translate3d(0,200px,0); 
 
\t -webkit-transition: opacity 0.4s, -webkit-transform 0.4s; 
 
\t transition: opacity 0.4s, transform 0.4s; 
 
} 
 

 
.icon-list a { 
 
\t display: inline-block; 
 
\t padding: 0.8em; 
 
} 
 

 
.icon-list a i { 
 
\t vertical-align: middle; 
 
} 
 

 
.icon-list a span { 
 
\t display: inline-block; 
 
\t margin-left: 10px; 
 
\t font-size: 0.75em; 
 
\t vertical-align: middle; 
 
\t font-weight: 700; 
 
\t letter-spacing: 1px; 
 
} 
 

 
/* Morph Shape */ 
 
.morph-shape { 
 
\t position: absolute; 
 
\t width: 100%; 
 
\t width: calc(100% + 400px); 
 
\t height: 100%; 
 
\t top: 0; 
 
\t left: 0; 
 
\t fill: #373a47; 
 
\t -webkit-transition: -webkit-transform 0.4s; 
 
\t transition: transform 0.4s; 
 
\t -webkit-transform: translate3d(-400px,0,0); 
 
\t transform: translate3d(-400px,0,0); 
 
} 
 

 
/* Shown menu */ 
 
.show-menu .menu-wrap, 
 
.show-menu .icon-list a, 
 
.show-menu .close-button, 
 
.show-menu .morph-shape, 
 
.show-menu .content::before { 
 
\t -webkit-transform: translate3d(0,0,0); 
 
\t transform: translate3d(0,0,0); 
 
} 
 

 
.show-menu .menu-wrap, 
 
.show-menu .content::before { 
 
\t -webkit-transition-delay: 0s; 
 
\t transition-delay: 0s; 
 
} 
 

 
.show-menu .icon-list a, 
 
.show-menu .close-button, 
 
.show-menu .content::before { 
 
\t opacity: 1; 
 
} 
 

 
.show-menu .icon-list a:nth-child(2) { 
 
\t -webkit-transition-delay: 0.05s; 
 
\t transition-delay: 0.05s; 
 
} 
 

 
.show-menu .icon-list a:nth-child(3) { 
 
\t -webkit-transition-delay: 0.1s; 
 
\t transition-delay: 0.1s; 
 
} 
 

 
.show-menu .icon-list a:nth-child(4) { 
 
\t -webkit-transition-delay: 0.15s; 
 
\t transition-delay: 0.15s; 
 
} 
 

 
.show-menu .icon-list a:nth-child(5) { 
 
\t -webkit-transition-delay: 0.2s; 
 
\t transition-delay: 0.2s; 
 
} 
 

 
.show-menu .icon-list a:nth-child(6) { 
 
\t -webkit-transition-delay: 0.25s; 
 
\t transition-delay: 0.25s; 
 
} 
 

 
.show-menu .close-button { 
 
\t -webkit-transition-delay: 0.3s; 
 
\t transition-delay: 0.3s; 
 
} 
 

 
.show-menu .content::before { 
 
\t -webkit-transition: opacity 0.4s; 
 
\t transition: opacity 0.4s; 
 
}
<link rel="stylesheet" type="text/css" href="https://tympanus.net/Development/OffCanvasMenuEffects/fonts/font-awesome-4.2.0/css/font-awesome.min.css" /> 
 
    <script src="https://tympanus.net/Development/OffCanvasMenuEffects/js/snap.svg-min.js"></script> 
 

 
<div class="menu-wrap"> 
 
    <nav class="menu"> 
 
     <div class="icon-list"> 
 
     <a href="#"><i class="fa fa-fw fa-star-o"></i><span>Favorites</span></a> 
 
     <a href="#"><i class="fa fa-fw fa-bell-o"></i><span>Alerts</span></a> 
 
     <a href="#"><i class="fa fa-fw fa-envelope-o"></i><span>Messages</span></a> 
 
     <a href="#"><i class="fa fa-fw fa-comment-o"></i><span>Comments</span></a> 
 
     <a href="#"><i class="fa fa-fw fa-bar-chart-o"></i><span>Analytics</span></a> 
 
     <a href="#"><i class="fa fa-fw fa-newspaper-o"></i><span>Reading List</span></a> 
 
     </div> 
 
    </nav> 
 
    <button class="close-button" id="close-button">Close Menu</button> 
 
    <div class="morph-shape" id="morph-shape" data-morph-open="M0,100h1000V0c0,0-136.938,0-224,0C583,0,610.924,0,498,0C387,0,395,0,249,0C118,0,0,0,0,0V100z"> 
 
     <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 1000 100" preserveAspectRatio="none"> 
 
     <path d="M0,100h1000l0,0c0,0-136.938,0-224,0c-193,0-170.235-1.256-278-35C399,34,395,0,249,0C118,0,0,100,0,100L0,100z"/> 
 
     </svg> 
 
    </div> 
 
    </div> 
 
    <button class="menu-button" id="open-button">Open Menu</button> 
 
    
 
    <script src="https://tympanus.net/Development/OffCanvasMenuEffects/js/classie.js"></script> 
 
    <script src="https://tympanus.net/Development/OffCanvasMenuEffects/js/main3.js"></script>

+1

Czy próbowałeś jakieś rozwiązanie? Jeśli tak, pokaż nam, co próbujesz. – ItamarG3

+0

@ ItamarG3 Próbowałem edytować menu, ale wynik nie był dobry! Edytowałem css pod tym linkiem: https://jsfiddle.net/hz7hfdk9/1/ –

+0

Dobrze, że już coś wypróbowałeś (tak naprawdę jest: D), ale powinieneś to uwzględnić w swoim pytaniu. – ItamarG3

Odpowiedz

Powiązane problemy