Страница с переходами в стиле «Medium»
Medium, блог-платформы, которая получила популярность в течение последних нескольких месяцев, и является одним из самых удобных и с наиболее отполированным пользовательским интерфейсом в сети. Если вы посмотрите на интерфейс, то вы заметите, что большое внимание было уделено: переходам, пробелам, цветам, шрифтам, изображениям, и иконографии.
В этой статье я опишу, как реализовать эффект перехода, который можно увидеть на Medium, нажав на "Читать дальше" в нижней части страницы. Смотрите также на анимированную иллюстрацию ниже.
HTML
В этой демо-версии первая загрузочная страница с баребон HTML, которую мы будем использовать в качестве шаблона, а контент будем выводить ajax запросом. Ниже код того, что будет на начальной странице загрузки, <article> - один из главных тегов. Довольно просто, не так ли?
<body>
<article class='page hidden'>
<div class='big-image'></div>
<div class='content'></div>
</article>
</body>
После того как данные подгрузятся ajax'ом:
<body> <article class='page current'><!--other HTML --></article> <article class='page next '><!--other HTML --></article> <body>
Страница, которая в настоящее время отображается, имеет класс current, а следующая статья имеет класс next. Следующая статья имеет только большое изображение, отображающееся в нижней части страницы, при нажатии на которое выводится следующая статья.
CSS
Стили в этой демо-версии контролируют переходы статей как прикладных, так динамических с помощью метода JQuery css (), а также путём применения классов в <article> с использованием JQuery addClass () метода.
Вот краткое изложение соответствующих классов:
article.page.hidden {
display: none
}
article.page.content-hidden .content {
display: none
}
article.fade-up-out {
opacity: 0;
transform: scale(0.8) translate3d(0, -10%, 0);
transition: all 450ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
}
article.easing-upward {
transition: all 450ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
}
Javascript
Прежде чем приступить к разбору JavaScript кода, я хочу сначала наметить алгоритм, используемый для перехода на следующую статью.
Пользователь нажимает на большой изображение следующей статьи:
1. Отключаем скролл на странице
2. Fade текущей статьи получает непрозрачность равной 0, масштаб 0,8, и перемещается вверх на 10%.
3. Показываем содержимое следующей статьи и перемешаем её вверх к верхней части окна
4. После 500 мс:
1. Удаляем текущую статью из DOM
2. Удаляем плавный переход от следующей статьи
3. Скроллим страницу вверх
4. Сделать следующую (next) статью текущей (current) статьёй
5. Включить скроллинг на странице
6. Сделать ajax запрос на контент следующей статьи
ArticleAnimator.animatePage = function(callback){
var self = this;
var translationValue = this.$next.get(0).getBoundingClientRect().top;
this.canScroll = false;
this.$current.addClass('fade-up-out');
this.$next.removeClass('content-hidden next')
.addClass('easing-upward')
.css({ "transform": "translate3d(0, -"+ translationValue +"px, 0)" });
setTimeout(function(){
scrollTop();
self.$next.removeClass('easing-upward')
self.$current.remove();
self.$next.css({ "transform": "" });
self.$current = self.$next.addClass('current');
self.canScroll = true;
self.currentPostIndex = self.nextPostIndex( self.currentPostIndex );
callback();
}, self.animationDuration + 300 );
}
Примечание
Как отмечалось ранее, страница заполняется путём ajax запросы к статическим файлам json. Состояние страницы управляется с помощью PushState API и location.hash. Фотографии в демо были взяты с Unsplash.
Перевод: Art
Оригинал: tympanus.net