Выезжающий футер на CSS3

В этом коротком уроке мы будем создавать интересный выезжающий слайдер. Посмотрите демо, скачайте архив с файлами по кнопке выше, откройте его в своём любимом редакторе и читайте дальше. Идея Эффект, которого мы хотим достичь, заключается в создании впечатления, что страница фиксирована на одном месте и при скролле поднимается вверх, чтобы показался футер. Чтобы достичь этого, нужно выполнить следующие условия: Вся страница и её содержимое, за исключением футера, должно находиться внутри одного элемента-контейнера (в нашем случае это элемент <div id="main">). У этого элемента будет задано свойство z-index со значением 1. У футера значение свойства z-index должно быть отрицательным. Это нужно, чтобы задать цвет фона, а также обеспечить место для фиксированной части футера (ссылки и цветные заголовки). Также нам нужен элемент с фиксированным позиционированием относительно нижней части окна браузера и он должен иметь значение z-index меньше, чем элемент #main, но больше, чем футер.