—»     —»   Эффект постраничного перехода по сайту с помощью CSS3
  Раздел: CSS/Style Sheets   Комментариев: 11  

Эффект постраничного перехода по сайту с помощью CSS3



Эффект постраничного перехода по сайту с помощью CSS3

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

HTML Разметка

HTML код будет содержать пять основных подразделов: заголовок и четыре раздела контента. Каждый из разделов контента будет иметь ID и свой class. Кроме того мы добавим другой подраздел внутри, у которого будет класс "content". Первый раздел контента, #home, будет иметь только класс контента и не будет требовать дополнительного подраздела:

<!-- Home -->
<div id="home" class="content">
<h2>Home</h2>
<p>Some content</p>
<!-- ... -->
</div>
<!-- /Home -->

<!-- Portfolio -->
<div id="portfolio" class="panel">
<div class="content">
<h2>Portfolio</h2>
<p>Some content</p>
<!-- ... -->
</div>
</div>
<!-- /Portfolio -->

<!-- About -->
<div id="about" class="panel">
<div class="content">
<h2>About</h2>
<p>Some content</p>
<!-- ... -->
</div>
</div>
<!-- /About -->

<!-- Contact -->
<div id="contact" class="panel">
<div class="content">
<h2>Contact</h2>
<p>Some content</p>
<!-- ... -->
</div>
</div>
<!-- /Contact -->

В "Шапке кода" у нас будет основной заголовок и навигация:

<!-- Header with Navigation -->
<div id="header">
<h1>Page Transitions with CSS3</h1>
<ul id="navigation">
<li><a id="link-home" href="#home">Home</a></li>
<li><a id="link-portfolio" href="#portfolio">Portfolio</a></li>
<li><a id="link-about" href="#about">About Me</a></li>
<li><a id="link-contact" href="#contact">Contact</a></li>
</ul>
</div>

Причина наличия такой "неупорядоченной" структуры, состоит в том, что мы делаем навигацию "достижимой" использованию общего одноуровневого селектора (~), так, чтобы мы могли "покрасить" соответствующие элементы по-другому.
Основная идея состоит в том, чтобы использовать псевдокласс :target, для добавления перехода к текущему разделу.
В этом примере мы будем использовать эффект "скольжения" вверх и вниз по нашим разделам.

CSS код

Сначала мы зададим стиль нашему заголовку и навигации.
Мы должны удержать их на том же самом месте, в то время, когда страницы будут "скользить".

#header{
position: absolute;
z-index: 2000;
width: 235px;
top: 50px;
}
#header h1{
font-size: 30px;
font-weight: 400;
text-transform: uppercase;
color: rgba(255,255,255,0.9);
text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
padding: 20px;
background: #000;
}
#navigation {
margin-top: 20px;
width: 235px;
display:block;
list-style:none;
z-index:3;
}
#navigation a{
color: #444;
display: block;
background: #fff;
background: rgba(255,255,255,0.9);
line-height: 50px;
padding: 0px 20px;
text-transform: uppercase;
margin-bottom: 6px;
box-shadow: 1px 1px 2px rgba(0,0,0,0.2);
font-size: 14px;
}
#navigation a:hover {
background: #ddd;
}

У всех разделов кроме #home есть класс "panel". Здесь мы будем использовать переход всякий раз, когда элемент с этим классом "предопределен". Прием должен использовать отрицательное значение поля в "нормальном" классе и никакое значение поля вообще в :target псевдоклассе. Добавление переходов заставит панель скользить от верха всякий раз, когда каждый будет "выбран":

.panel{
min-width: 100%;
height: 98%;
overflow-y: auto;
overflow-x: hidden;
margin-top: -150%;
position: absolute;
background: #000;
box-shadow: 0px 4px 7px rgba(0,0,0,0.6);
z-index: 2;
-webkit-transition: all .8s ease-in-out;
-moz-transition: all .8s ease-in-out;
-o-transition: all .8s ease-in-out;
transition: all .8s ease-in-out;
}
.panel:target{
margin-top: 0%;
background-color: #ffcb00;
}

Затем, разработаем класс контента, который имеет все наши разделы:

.content{
right: 40px;
left: 280px;
top: 0px;
position: absolute;
padding-bottom: 30px;
}
.content h2{
font-size: 110px;
padding: 10px 0px 20px 0px;
margin-top: 52px;
color: #fff;
color: rgba(255,255,255,0.9);
text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
}
.content p{
font-size: 18px;
padding: 10px;
line-height: 24px;
color: #fff;
display: inline-block;
background: black;
padding: 10px;
margin: 3px 0px;
}

Чтобы изменить цвет текущего элемента в навигации, мы будем использовать:target псевдокласс с общим одноуровневым селектором, чтобы "добраться" до соответствующего элемента навигации:

#home:target ~ #header #navigation #link-home,
#portfolio:target ~ #header #navigation #link-portfolio,
#about:target ~ #header #navigation #link-about,
#contact:target ~ #header #navigation #link-contact{
background: #000;
color: #fff;
}

На этом всё. Что бы увидеть примеры данного эффекта проверьте демонстрационные примеры.
Надеюсь, что Вам понравилось эта статья.
Посмотреть Демо | Скачать архивом
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: CSS
Опубликовал ITS   Прочитано (раз): 21617   |   Оставлено комментариев: 11
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 30 января 2012 @ 23:00
Написал: Roman — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Эффект "скольжения" -- просто бомба. Давно искал что нибудь подобное, и только здесь ншел то что надо.
Комментарий #2: 30 января 2012 @ 23:23
Написал: ITS — группа: Читатели  
На сайте с: 20.02.2010   |   Публикаций: 3   |   Комментариев: 127
ICQ: 366337851
Mysterious Master, спасибо что немного подредактировали статью )) (название и концовку)..
Переводил по статье и добавлял от себя... надеюсь моё ломаное понятие данной статьи было понятно, если нет... пишите объясню =)) сам проделал, данный пример.. получилось на ура =))

Roman, рад что статья оказалось полезной wink


--------------------
Вещам, которым надо бы учиться, чтобы их делать, — лучше учиться, делая их.
© Аристотель
Комментарий #3: 30 января 2012 @ 23:26
Написал: Gruberhoff — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Мощно, жаль эксплорер тормозит этот прогресс :(
Комментарий #4: 30 января 2012 @ 23:34
Написал: ITS — группа: Читатели  
На сайте с: 20.02.2010   |   Публикаций: 3   |   Комментариев: 127
ICQ: 366337851
Gruberhoff, эксплорер девятый? или восьмой?


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


--------------------
Вещам, которым надо бы учиться, чтобы их делать, — лучше учиться, делая их.
© Аристотель
Комментарий #5: 31 января 2012 @ 14:00
Написал: Gruberhoff — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
ITS, в восьмом и ниже смотреть вообще невозможно, в девятом — ещё терпимо, но все-равно работает не так как надо.
Комментарий #6: 31 января 2012 @ 15:18
Написал: Артём — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Воспользуюсь этим кодом для своего сайта, спасибо.
Комментарий #7: 31 января 2012 @ 19:31
Написал: senator3821 — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Вы знаете, я долго искал подобные разъяснения (скажу конечно, что многое не понял, но я только в начале своего пути) и данная информация мне очень сильно помогла и сэкономила много времени, спс!
Комментарий #8: 31 января 2012 @ 20:03
Написал: ITS — группа: Читатели  
На сайте с: 20.02.2010   |   Публикаций: 3   |   Комментариев: 127
ICQ: 366337851
Gruberhoff, ну если коротко, мое мнение о эксплорере - это цитадель неисправностей и несовместимостей. - сам им не пользуюсь, но вот изучать кроссбраузерность его тоже надо... ведь большинство с него и сидят.


senator3821, Рад что помогла... в следующий раз буду пытаться разъясниться более доступно bully

Просто для меня такой язык как бы уместен и понятен...
Но для себя понимаю что надо более разборчиво писать... request


--------------------
Вещам, которым надо бы учиться, чтобы их делать, — лучше учиться, делая их.
© Аристотель
Комментарий #9: 1 февраля 2012 @ 15:45
Написал: nickolyashka — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Не обычно и не нужно.
Комментарий #10: 1 февраля 2012 @ 15:50
Написал: Mysterious Master — группа: Администраторы  
На сайте с: 11.07.2009   |   Публикаций: 1492   |   Комментариев: 177
ICQ: --- не указано ---
nickolyashka, то, что необычно - это факт, а вот насчет "не нужно" - не факт. Отлично подойдет для сайтов презентаций или описаний чего-либо.
Комментарий #11: 1 февраля 2012 @ 15:54
Написал: ITS — группа: Читатели  
На сайте с: 20.02.2010   |   Публикаций: 3   |   Комментариев: 127
ICQ: 366337851
nickolyashka, в интернете много необычных сайтов, надо проявлять фантазию, креативность и оригинальность, а не смешиваться с другими серыми сайтами.


Mysterious Master, данный эффект для презентации самое то =)


--------------------
Вещам, которым надо бы учиться, чтобы их делать, — лучше учиться, делая их.
© Аристотель
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица США
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации

















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Август 2019    »
ПнВтСрЧтПтСбВс
 1234
567891011
12131415161718
19202122232425
262728293031