X
  • Дизайн та розробка сайту
  • Дизайн і створення сайтів. Розробка тем для WordPress. Створення Landing Page.
  • office@gnatkovsky.com.ua
  • @vgnat
  • Написати мені
Замовити послугу

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

Приклад
  • 2024-10-15
  • 4447 переглядів

  • Дизайн та розробка сайту

Доброго времени суток 🙂
В сегодняшнем Уроке, я хочу Вам показать очень интересный способ, как сделать необычное появление подвала. При прокрутке, подвал выезжает из под основного контента, создавая простой но необычный эффект. Главное преимущество данного способа в том, что он использует только 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
Проголосовало: 6, в среднем: 2.3 из 5
Читайте також

Deprecated: Функція WP_Query викликана з аргументом, який вважається застарілим з версії 3.1.0! Вираз caller_get_posts застарілий. Використовуйте ignore_sticky_posts. in /var/www/vhosts/gnatkovsky.com.ua/gnatkovsky.com.ua/public/wp-includes/functions.php on line 6078