Как я могу воссоздать этот эффект/переход/анимацию? (HTML/CSS/JQuery)

Question

Я пытаюсь сделать некоторый эффект перехода/преобразования, как вы можете видеть на this site, где навигация переключается на половину страницы, а другая - на другую.

Я создал jsfiddle, с двумя ЧСА, то .mobilenav является тот, который должен быть изменен при прокрутке, а .desktopnav является тот, который скользит, как вы можете видеть. Но теперь мне было интересно, как я могу воссоздать этот переход. (Изменение нав сделано в JQuery с, если другим заявлением и ($(window).scrollTop() > 500)

Answer 1

Я моделируется, что Nav довольно близко в моей скрипке, с некоторыми упрощениями, конечно: https://jsfiddle.net/pttsky/0anpeLj0/

Есть несколько ключевых понятия:

1. Существует на самом деле только один nav, к которому мы добавляем класс .full, чтобы указать изменение состояния.
2. Существует контейнер nav, фактический nav и ее ребенок li элементы
3. Каждый из вышеперечисленного имеет собственный CSS переходов и анимации, которые изменяют их позиционирования, непрозрачность и фон.

Говоря глубже об изменении навигационной системы от рушится до полной ширины, как на этом сайте.

1. Блок контейнера слегка тянет вверх навигатор. Он становится непрозрачным, что дает иллюзию, что border-radius исчез с навигатора, но на самом деле, если бы мы анимировали радиус границы, это было бы уродливо.

   .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; 
   } 
   

2. Дочерние элементы, за исключением MENU ссылки, имеют max-width: 0 по умолчанию. Когда меню парил, или когда он находится в полной ширины состояния, элементы имеют max-width: 200px и MENU отменил поведение:

   .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; 
   
   } 
   

3. При изменении состояния, все элементы нав кажется как замирание из затем исчезают в I. «ве добавил соответствующую анимацию всей нав:

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

Answer 2

В качестве альтернативы для ответа устройства, вы можете также использовать CSS переходы на одном нав, чтобы получить тот же эффект, вместо использования два ЧС.

переключая класс по нав вы можете вызвать переход и поместить навигацию в правильном месте

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/