이 효과/전환/애니메이션을 다시 만들려면 어떻게해야합니까? (HTML/CSS/JQuery)

this site에서 볼 수 있듯이 전환/변환 효과를 일부 수행하려고합니다. 여기서 네비게이션이 페이지의 중간에서 전환되고 다른 것으로 전환됩니다.이 효과/전환/애니메이션을 다시 만들려면 어떻게해야합니까? (HTML/CSS/JQuery)

두 개의 네비게이션이있는 jsfiddle을 만들었습니다. .mobilenav은 스크롤 할 때 변경해야하며, .desktopnav은 볼 수있는 것처럼 슬라이드됩니다. 그러나 이제 나는 그 변화를 어떻게 재창조 할 수 있는지 궁금해하고있었습니다. (변화하는 탐색이 장치의 대답에 경우, 다른 문과 또는 ($(window).scrollTop() > 500)

출처

2016-12-17 Panic

나는 시뮬레이션 한 그 과정의 일부 단순화와 함께, 내 바이올린에 아주 가까이 NAV : https://jsfiddle.net/pttsky/0anpeLj0/

주요 개념의 몇 가지가 있습니다

실제로에만있다가 상태 변경을 나타 내기 위해서 .full 클래스를 추가하는 nav.
는 nav의 용기, 실제 nav와 그 자식 li 요소
CSS 전환 및 자신의 위치, 불투명도 및 배경을 변경 애니메이션을 소유 한 목록에 위의 각이있다.

해당 사이트와 같이 축소 된 것에서 전체 너비로 변경하는 것에 대해 더 자세히 이야기합니다.

컨테이너 블록이 위쪽으로 약간 위로 내립니다. 그것은 불투명하게되어 border-radius이 nav에서 사라 졌다는 환상을 주지만, 실제로 우리가 border-radius를 움직이게한다면 그것은 추한 것입니다. MENU 링크를 제외하고
```
.nav-container { 
    display: block; 
    position: fixed; 
    width: 100%; 
    z-index: 2; 
    top: 0; 
    padding: 25px 25px 15px; 
    -webkit-transition: .8s; 
    transition: .8s; 
} 
.full { 
    background: #fff; 
    padding-top: 15px; 
} 
```

자식 요소는 기본적으로 max-width: 0 있습니다. 메뉴를 가리킬 때 전체 폭 상태에있을 때, 또는 요소 max-width: 200px 있고, MENU 행동 반전했습니다 아웃 후 페이드 I 상태를 변경하는 경우, 탐색의 모든 항목이 페이드처럼 보인다

.nav-main .item { 
    display: block; 
    float: left; 
    max-width: 0; 
    opacity: 0; 
    -webkit-transition: .8s; 
    transition: .8s; 
    /* limit width */ 
    overflow: hidden; 
    line-height: 3em; 
} 

.nav-main .toggle { 
    max-width: 200px; 
    opacity: 1; 
    -webkit-transition: .6s .4s; 
    transition: .6s .4s; 
} 

.full .nav-main .item { 
    max-width: 200px; 
    opacity: 1; 
} 

.full .nav-main .item + .item { 
    margin-left: 12vw; 
} 

.full .nav-main .toggle { 
    max-width: 0; 
    opacity: 0; 
    -webkit-transition: .1s; 
    transition: .1s; 

}

합니다. 노력에 대한

/* nav full-width */ 
@keyframes blink { 
    0%, 100% { 
    opacity: 1; 
    } 
    50% { 
    opacity: 0; 
    } 
} 

.full .nav-main { 
    animation: blink .8s; 
}

출처

2016-12-17 15:07:05 pttsky

많은 노력과 도움을 가져 주셔서 감사합니다! 감사! – Panic

와 JQuery와 이루어집니다, 당신은 대신이 NAVS를 사용하는 동일한 효과를 얻기 위해 하나의 탐색에 CSS 전환을 사용할 수 있습니다.

을 순자산 가치 (NAV)에 클래스를 전환하여 당신은 전환을 트리거 할 수 및 올바른 위치에 내비게이션을 배치

JS :.

$(document).ready(function() { 
    var nav = $('.desktopnav'); 
    $(window).scroll(function() { 
    var scrolltop = $(window).scrollTop(); 
    if (scrolltop > 500 && !nav.hasClass('scrolled')) { 
     nav.addClass('scrolled'); 
    } 
    else if (scrolltop <= 500 && nav.hasClass('scrolled')) { 
     nav.removeClass('scrolled'); 
    } 
    }); 
});

CSS :

.desktopnav { 
    /* ... snipped, unchanged ... */ 
    transition: all 0.2s ease-out; 
} 

.desktopnav>ul { 
    transition: all 0.2s ease-out; 
} 

.desktopnav>ul>.dropdown { 
    /* ... snipped, unchanged ... */ 
    transition: all 0.2s ease-out; 
} 

/* ... snipped unchanged styles for the unscrolled menu ... */ 

.desktopnav.scrolled { 
    top: 0px; 
    right: auto; 
    left: 0px; 
    width: 100%; 
} 

.desktopnav.scrolled>ul { 
    margin-top:0px; 
    background: #fff; 
} 

.desktopnav.scrolled>ul>.dropdown { 
    border-radius: 0px; 
} 

.desktopnav.scrolled>ul>.dropdown .dropdown-content { 
    max-width: 1000px; 
    float: none; 
    display: inline-block; 
    vertical-align: middle; 
    margin-left: 19px; 
}

https://jsfiddle.net/q80k0y7v/1/

출처

2016-12-17 13:18:31 Thomas

덕분에 많은 도움 : 전체 탐색에 대한 적절한 애니메이션을 추가 한 '! 감사! – Panic

이 효과/전환/애니메이션을 다시 만들려면 어떻게해야합니까? (HTML/CSS/JQuery)

답변

관련 문제