Создаем переходы для страниц при помощи CSS3

Главная

Статьи

Верстка сайтов

30.01.2012 10:51

Создаем переходы для страниц при помощи CSS3

Я уверен, что вы часто видели на различных веб-сайтах необычные эффекты при переходе между страницами, большинство из них создавалось с помощью JavaScript. В этом уроке я покажу, как вы можете создать свой собственный эфект перехода, но вместо JavaScript я буду использовать CSS Transition и свойство :target.

Изображения, используемые в демо, от Matt Kaufenberg.

HTML-разметка

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

<!-- 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 у нас будет основной заголовок и навигация:

<!-- 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. Здесь мы будем использовать переход всякий раз, когда элемент c этим классом вызывается в меню. Трюк заключается в использовании отрицательного отступа в классе 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, который есть во всех наших секциях:

.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 с обобщенным родственным комбинатором (the general sibling selector), чтобы "найти" соответствующий пункт навигации:

#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;

}