Доброго времени суток 🙂
В сегодняшнем Уроке, я хочу Вам показать очень интересный способ, как сделать необычное появление подвала. При прокрутке, подвал выезжает из под основного контента, создавая простой но необычный эффект. Главное преимущество данного способа в том, что он использует только CSS3. Никаких дополнительных плагинов javascript. Так что прописав пару строк стилей Вы не нагрузите свой сайт, но явно улучшите его внешний вид.
Можете посмотреть пример такого эффекта.
Данный способ использует z-index, поэтому в старых версиях Internet Explorer работать не будет. Но думаю это не страшно, потому как со старыми версиям остались единицы.
Ну что же приступим.
По примеру ниже видно что у нас будет два основных блока, это блок с контентом и подвал. Подвал находится отдельно, и не является внутренним блоком контента.
<div id="main"> Сюда контент </div> <footer> Сюда содержимое подвала </footer>
Далее прописываем стили для блока контента и подвала. Главным свойством в данных стилях есть как раз 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% отличается от приведенного в пример мной 🙂
Экспериментируйте и вносите свои дополнения, главное не бойтесь. Если Все сделано правильно, результат Вашей работы должен быть такой же как и в примере в начале статьи.
Я очень надеюсь на то, что Вам поможет этот урок и Вы сделаете свой подвал не обычным.
На этом все, спасибо за внимание 🙂