Пожалуй каждый веб-мастер хочет сделать сайт более уникальным и практичным, это позволит сократить время загрузки, разгрузить сайт. Но как сделать сайт с плавными переходами страниц, то есть, чтобы одна страница перекрывала плавным переходом другую, при этом ресурс являлся одностраничным. В данном уроке мы рассмотрим как создать такой шаблон с плавными переходами. Идея состоит в том, что в шаблоне будет использованы навигационные кнопки радио и одноуровневый элемент, который вызовет переход к соответствующей панели контента.

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

Шаг 1. HTML

Для начала мы начнем с разметки, Структура будет состоять из основного контейнера с классом st-container, который будет содержать радио-кнопки и ссылки, wrapper с классом st-scroll для панелей. Каждая панель будет иметь некоторые элементы контента:

Мы хотим переместить панель в оболочку, изменяя ее верхнее значение и добавления соответствующих панелей в окне просмотра. Это можно сделать, выбрав одноуровневый элемент проверенного переключателя, div с классом st-scroll  предназначен для внутренней панели. Поэтому мы должны сохранить переключатели на том же уровне как st-scroll и поверх ссылок.

Шаг 2. CSS

Следующим шагом будут стили, эта важнейшая часть, по этому следует внимательно рассмотреть правила. Для начала зададим  контейнерам абсолютную ширину и высоту в 100% при установке панелей, чтобы расположить относительно. Но у них также будет ширина и высота в 100%.

Так как мы сделаем навигацию контента, анимируя wrapper панели, мы установим свойство overflow со значением hidden:

Теперь рассмотрим стили основного контейнера:

Теперь поместим навигацию внизу страницы, придав ей фиксированную позицию. Следует обратить внимание, что нам необходимо установить ту же ширину и высоту для обоих блоков ввода и ссылок. При этом, идея состоит в том, чтобы наложить переключатель на ссылках так, чтобы они активировались по щелчку. Также важно, чтобы мы установили z-index для переключателей:

Значения указаны в процентах, чтобы расположить ссылки и вводы по ширине экрана, у нас могла бы возникнуть проблема, которая заставит появится некоторым разрывам. Чтобы скрыть их, используем псевдо элемент, который будет находиться под ссылками:

Ссылки и материалы по-прежнему не расположены, так что давайте дадим им соответствующее левое соотношение:

Мы используем селектор смежных одноуровневых элементов «reach«, который является элементом, связанным с ссылкой.  Когда мы нажимаем на переключатель, мы зададим одноуровневому элементу другой цвет фона:

Теперь добавим маленький треугольник при помощи псевдо-класса :after:

Затем настроим состояние элемента при наведении:

Wrapper для панелей будет иметь относительное расположение, а так же сделаем ширину и высоту 100%. Переход будет для того, чтобы анимировать значение свойства преобразования к соответствующей позиции:

Теперь определим позиции для st-scroll wrapper для каждого проверенного переключателя. Так как мы знаем, что у каждой панели высота 100%, то соответственно знаем точные позиции. Мы будем использовать свойства преобразования, чтобы перевести wrapper панели по оси Y (сверху и снизу):

ля верхнего треугольника со значком мы просто повернем и переведем div с классом st-deco. Мы расположим его в верху экрана, установим вершину в 0 и слева в 50%.

Для значка мы будем использовать Raphaël, установим в значок через @font-face и data-attribute/pseudo-class метод. Контент псевдо элемента :after будет иметь значение значка данных, которое мы установили в HTML для этого элемента.

Заголовок будет помещен в центр экрана с отрицательным верхним полем, чтобы его вытянуть:

Чтобы выбрать корректный заголовок, мы будем использовать общий одноуровневый элемент combinator:

Теперь рассмотрим стили абзаца, которые будут иметь следующий стиль:

В то время как заголовок панели переместится вниз, абзац переместится вверх:

Теперь добавим класс color и «инвертируем» цвета для панелей и его элементов контента:

Затем добавим некоторые запросы носителей, чтобы управлять позицией и размером шрифта элементов для меньших экранов:

Для более старых браузеров, которые не поддерживают некоторые селекторы, мы сделаем отступ к классическому целевому переходу. Мы можем сделать это, изменяя часть стиля (simple.css).

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

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