Skip to content

Эффект выезда футера. Трюк с z-index

В этом коротком уроке мы создадим интересный эффект выезда футера на чистом CSS. Скачайте себе ZIP-архив демонстрации, откройте ее код в вашем любимом редакторе и читайте дальше!

Демонстрация Исходники

Идея

Эффект, который мы создадим, заключается в том, чтобы создать впечатление, что страница поднимается над зафиксированным на месте футером. Для достижения этой цели:

  • Все содержимое страницы, кроме футера, должно находиться в одном родительском элементе (<div id="main"> в нашем случае). Этому элементу будет присвоено значение z-index: 1;
  • Содержимое футера должно иметь отрицательное значение z-index;
  • А сам футер должен так же иметь отрицательное значение z-index, но меньше чем его содержимое, и фиксированно спозиционирован к нижней границе окна браузера;

Вы можете просмотреть наглядное представление идеи нашего эффекта на изображении:

explained

Теперь мы можем приступить к написанию кода!

HTML

Ниже вы можете увидеть разметку нашей страницы. Это простой HTML5-документ, в области <head> которого подключается шрифт с Google Webfonts, HTML5 shim для старых версий Internet Explorer:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>Эффектный "выезд" футера</title>

	<link href='http://fonts.googleapis.com/css?family=PT+Sans+Narrow:700&subset=cyrillic,latin' rel='stylesheet' type='text/css'>
	<!-- The main CSS file -->
	<link rel="stylesheet" href="css/base.css">
	<link rel="stylesheet" href="css/style.css">
	
	<!--[if lt IE 9]>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
</head>
<body>
	<div id="main">
		<h1><a href="/">Эффектный "выезд" футера</a></h1>
	</div>
</body>
</html>

Элемент #main окутывает весь контент страницы. Теперь перейдем к коду разметки футера, который идет сразу после #main:

<footer>

 <ul class="row">
 <li class="col-25">
 <p class="home"><i class="icon-home"></i> Home</p>
 <a class="logo" href="#"><i class="icon-group"></i> Company Name <cite>© 2013</cite></a>
 </li>
 <li class="col-25">
 <p class="services"><i class="icon-cogs"></i> Services</p>

 <ul>
 <li><a href="#">3D modeling</a></li>
 <li><a href="#">Web development</a></li>
 <li><a href="#">Mobile development</a></li>
 <li><a href="#">Web & Print Design</a></li>
 </ul>
 </li>
 <li class="col-25">
 <p class="reachus"><i class="icon-question-sign"></i> Contact us</p>

 <ul>
 <li><a href="#">Email</a></li>
 <li><a href="#">Twitter</a></li>
 <li><a href="#">Facebook</a></li>
 <li>555-123456789</li>
 </ul>
 </li>
 <li class="col-25">
 <p class="clients"><i class="icon-user"></i> Clients</p>

 <ul>
 <li><a href="#">Login Area</a></li>
 <li><a href="#">Support Center</a></li>
 <li><a href="#">FAQ</a></li>
 </ul>
 </li>
 </ul>

</footer>

Внутри элемента footer, находится маркированный список, который содержит четыре группы ссылок. В нутри каждой группы есть абзац, который превращается в красочный заголовок, и другой <ul>, который содержит ссылки. Для внешнего <ul> будет установлен postion: fixed, что сделает его статичным относительно нижней части окна браузера.

slide-out-footer-1

CSS

Как вы уже могли догадаться, здесь начинается самое интересное. В начале урока я упомянул, что мы будем работать со свойством z-index, используя отрицательные его значения, чтобы расположить футер к низу окна. Если вы еще не имеете представления о z-index, советую прочитать статью о данном свойстве, прежде чем мы двинемся дальше. Не волнуйтесь, я подожду.

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

body{
 font-family: 'PT Sans Narrow';
 color: #5e5b64;
 position:relative;
 z-index:0;
}

Элементу #main добавим относительное позиционирование, z-index (для возвышения над футером),  цвет фона, и тень от объекта:

#main{
 position:relative;
 z-index:1;
 background-color: #e2e2e2;
 padding: 120px 0 600px;
 box-shadow: 0 3px 3px rgba(0,0,0,0.2);
}

Еще раз повторю, что эффект заключается в том, что футер выскальзывает из-под слоя с содержимым страницы. Теперь переходим к стилям для футера.

footer{
 height: 195px;
 color:#ccc;
 font-size:12px;
 position:relative;
 z-index:-2;
 background-color:#31353a;
}

Мы задали высоту для footer, т.к. содержащийся в нем неупорядоченный список имеет фиксированную позицию, иначе футер не будет видно. Теперь переходим к стилизации содержимого футера:

footer > ul{
 position:fixed;
 left:0;
 bottom:0;
 z-index:-1;
 padding:0 4em;
}

footer ul{
 list-style: none;
}

/* The links */
footer > ul > li ul li{
 text-transform: uppercase;
 font-weight:bold;
 line-height:1.8;
}

footer > ul > li ul li a{
 text-decoration: none !important;
 color:#7d8691 !important;
}

footer > ul > li ul li a:hover{
 color:#ddd !important;
}

/* Common styles for the four color bars */
footer p{
 padding: 9px 10px;
 background-color: #058cc7;
 font-weight: bold;
 font-size: 14px;
 color:#fff;
 text-transform: uppercase;
 margin-bottom: 20px;
}

/* The different colors */
footer p.home{background-color: #0096d6}
footer p.services{background-color: #00b274}
footer p.reachus{background-color: #d75ba2}
footer p.clients{background-color: #e9ac40}

Здесь мы фиксируем элемент ul, в котором находится содержание футера, к нижнему краю окна, задаем стиль ссылкам и заголовкам.

Готово!

Я надеюсь, что вам понравилась эта простая техника. Она работает даже на мобильных устройствах, хотя вы, вероятно, захотите настроить данный эффект под мобильные устройства через медиа-запросы.

Источник: TutorialZine.