Контент сайта с помощью powered animation CSSМы экспериментировали в последнее время с CSS powered animation, который заменяет обновление веб-страницы в то время как содержание обновляется с использованием Ajax. Сегодняшний урок основан на той же идее, но в другом исполнении: мы установим боковую навигацию, при этом у нас будет подготовлены три страницы с веб-содержанием, которые будут обновлять контент с помощью анимации и подгружать содержимое. Ajax прогрузка контента поможет упростить отображение при переходе на другую страницу не обновляя ее.

 

Задумка состоит в том, что при выборе новой страницы, новый .cd-section  элемента создается и вставляется в DOM. The load(), функция используется для загрузки нового контента (мы использовали data-menu атрибут, назначенный для элементов списка навигации для определения содержимого файла и его загрузки). Давайте приступим.

Шаг 1. HTML

HTML структура состоит из .cd-main элемента, которая служит обверткой для содержимого страницы, а .cd-side-navigation -элемент, который содержит навигацию, и #cd-loading-bar, чтобы создать загрузочный бар анимации.

Разметка достаточно проста и не должна вызвать у вас затруднений, полную разметку можно просмотреть в исходниках, мы максимально упростили ее, чтобы вам было легче внедрить ее в структуру вашего сайта.

Контент сайта с помощью powered animation CSS

Шаг 2. CSS

Мы создали .cd-side-navigation для навигации в фиксированном положении, с высотой: 100%.  Чтобы создать линию которая будет видна при наведении на каждый пункт навигации, мы использовали a::afterpseudo-elements. Линии находятся в абсолютной позиции и имеют позиции width: 4px, top: 0 и right: -4px. Одно замечание: мы присвоили значение ширине: calc(100%- 4px) , для каждого элемента списка, чтобы иметь возможность размещать a::after для элементов внутри .cd-side-navigation (так как он имеет overflow: hidden).

Когда пользователь выбирает новый пункт в боковой навигации, новый .cd-section элемента создается и вставляется в DOM. По умолчанию, эта новая .cd-section элемент переводится влево, вне видного места на экране (translateX (-100%)). Затем будет возвращаться в видимое положение с помощью  .visible  класс, чтобы заменить старый контент.

Шаг 3. JS

Файл index.html содержит только содержание "Intro". Другой HTML файл был создан для каждого элемента навигации (services.html, contact.html, ..) с точно такой же структурой, но с различным .cd-section содержания.

Когда пользователь нажимает один из пунктов в боковой навигации,  функция triggerAnimation() будет приходить в действие. Эта функция запускает анимацию загрузки бара (loadingBarAnimation() функция) и загружает новый контент - loadNewContent ().

Для загрузки анимации бара, мы используем Velocity.js: в начале анимации -#cd-loading-bar находится рядом с выбранным элементом навигации.

Как только новый HTML был загружен, бар анимации завершает анимацию и загрузку, старое содержание заменяется новым и добавляется новая страница в window.history (с использованием  метода  PushState ()).

Чтобы запустить тот же эффект анимации, когда пользователь нажимает кнопку браузера назад, мы слушаем для значение popstate и после чего выполняется функция triggerAnimation ().

Вот и все. Готово!

Читайте также: