Создаем анимированный футер для сайта на CSS3Создавая хороший сайт не стоит забывать о деталях, каждый элемент должен быть продуман и подогнан к деталям и цветовой палитре. В сегодняшнем уроке мы рассмотрим как создать замечательный, анимированный подвал для сайта который будет отзывчивым для посетителя и адаптивным при просмотре. Идея заключается в том, что подвал сайта по умолчанию скрытый и будет появляться только при прокрутке страницы, при этом основная часть будет плавно сдвигаться вверх выделяя нам нужную информацию.

 

Такой прием подойдет для абсолютно любого сайта, но благодаря такому приему вы сможете оживить сайт, придав ему некой особенности и уникальности, и так, давайте приступим.

Шаг 1. HTML

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

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

Создаем анимированный футер для сайта на CSS3

Шаг 2. CSS

Теперь нам необходимо определить параметры позиционирования, а также определить параметры трансформации и анимацию при прокрутке колеса мыши.

Так как нам необходим плавный сдвиг слайда, то мы указываем параметры для каждого перехода, и минимальным разрывам интервала для прокрутки.

Шаг 3. JS

Нам необходимо привязать прокрутку и анимацию, для этого мы будем использовать небольшие правила и функции js:

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

Вот и все. Готово!

Читайте также: