Главная
Web-дизайн
Эффект выезжающего подвала при помощи z-index

Эффект выезжающего подвала при помощи z-index

Эфект появления подвала

Доброго времени суток 🙂
В сегодняшнем Уроке, я хочу Вам показать очень интересный способ, как сделать необычное появление подвала. При прокрутке, подвал выезжает из под основного контента, создавая простой но необычный эффект. Главное преимущество данного способа в том, что он использует только CSS3. Никаких дополнительных плагинов javascript. Так что прописав пару строк стилей Вы не нагрузите свой сайт, но явно улучшите его внешний вид.

Можете посмотреть пример такого эффекта.

Пример

Данный способ использует z-index, поэтому в старых версиях Internet Explorer работать не будет. Но думаю это не страшно, потому как со старыми версиям остались единицы.

Ну что же приступим.

1. HTML разметка

По примеру ниже видно что у нас будет два основных блока, это блок с контентом и подвал. Подвал находится отдельно, и не является внутренним блоком контента.

	<div id="main">
Сюда контент
	</div>
<footer>
Сюда содержимое подвала
</footer>

2. CSS разметка

Далее прописываем стили для блока контента и подвала. Главным свойством в данных стилях есть как раз z-index. В моем примере у блока с контентом значение z-index равно 1, а в подвала -2. Можете менять, подстраивая под свои нужды, но главное Вам нужно обязательно помнить о том, что у подвала значение должно всегда быть ниже чем у основного контента. Также Вы должны указать отступ он нижней границы контента. Как видно в стилях ниже, он сейчас установлен 600 пикселей.

*{
	margin:0;
	padding:0;
}
body{
	font:15px/1.3 Arial, sans-serif;
	color: #333;
}
#main{
	position:relative;
	z-index:1;
	background-color: #f8f8f8;
	padding: 120px 0 600px;
	box-shadow: 0 3px 3px rgba(0,0,0,0.2);}
footer{
	height: 245px;
	color:#ccc;
	font-size:12px;
	position:relative;
	z-index:-2;
	background-color:#31353a;
	display: block;
}

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

Экспериментируйте и вносите свои дополнения, главное не бойтесь. Если Все сделано правильно, результат Вашей работы должен быть такой же как и в примере в начале статьи.

Я очень надеюсь на то, что Вам поможет этот урок и Вы сделаете свой подвал не обычным.

На этом все, спасибо за внимание 🙂




Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты :)


Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(1 голос, в среднем: 5 из 5)

Добавить комментарий

Заполните поля ниже. Ваш e-mail не будет опубликован. Обязательные поля помечены *

Уважаемые пользователи! При добавлении комментариев на сайт Вам следует соблюдать правила указанные под формой отправки комментариев.

Соблюдайте добавления комментариев

Это не спам *

Нажмите, чтобы добавить код в комментарий