Создаем анимированный футер для сайта на CSS
- Stats: 2337 0
- Author: RUDEBOX
- Category: Css, jQuery
- Comments: Комментариев нет
Создавая хороший сайт не стоит забывать о деталях, каждый элемент должен быть продуман и подогнан к деталям и цветовой палитре. В сегодняшнем уроке мы рассмотрим как создать замечательный, анимированный подвал для сайта который будет отзывчивым для посетителя и адаптивным при просмотре. Идея заключается в том, что подвал сайта по умолчанию скрытый и будет появляться только при прокрутке страницы, при этом основная часть будет плавно сдвигаться вверх выделяя нам нужную информацию.
Такой прием подойдет для абсолютно любого сайта, но благодаря такому приему вы сможете оживить сайт, придав ему некой особенности и уникальности, и так, давайте приступим.
Шаг 1. HTML
Разметка будет достаточно простая, нам необходимо определить два класса для демонстрации, затем мы добавляем класс футера, с установленными для него классами.
|
1 2 3 4 |
<div class="wrapper"> <div class="arrow animated bounce"></div> </div> <div class="footer">Привет, я подвал сайта!</div> |
Как видите, ничего сложного нет, мы можете легко изменить, добавив новые элементы, или внедрив его в свою разметку, не забывайте при этом указать правильный путь к стилям.
Шаг 2. CSS
Теперь нам необходимо определить параметры позиционирования, а также определить параметры трансформации и анимацию при прокрутке колеса мыши.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
.footer { width: 90%; max-width: 1440px; margin: 0px auto; text-align: center; min-height: 200px; font-weight: bold; color: #FFF; font-size: 2.125rem; font-family: "Raleway", sans-serif; padding-top: 40px; } @-moz-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -moz-transform: translateY(0); transform: translateY(0); } 40% { -moz-transform: translateY(-30px); transform: translateY(-30px); } 60% { -moz-transform: translateY(-15px); transform: translateY(-15px); } } @-webkit-keyframes bounce { 0%, 20%, 50%, 80%, 100% { -webkit-transform: translateY(0); transform: translateY(0); } 40% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } 60% { -webkit-transform: translateY(-15px); transform: translateY(-15px); } } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { -moz-transform: translateY(0); -ms-transform: translateY(0); -webkit-transform: translateY(0); transform: translateY(0); } 40% { -moz-transform: translateY(-30px); -ms-transform: translateY(-30px); -webkit-transform: translateY(-30px); transform: translateY(-30px); } 60% { -moz-transform: translateY(-15px); -ms-transform: translateY(-15px); -webkit-transform: translateY(-15px); transform: translateY(-15px); } } |
Так как нам необходим плавный сдвиг слайда, то мы указываем параметры для каждого перехода, и минимальным разрывам интервала для прокрутки.
Шаг 3. JS
Нам необходимо привязать прокрутку и анимацию, для этого мы будем использовать небольшие правила и функции js:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
$(document).ready(function($) { $(window).on('scroll', function() { if ($(window).scrollTop() + $(window).height() > $('.wrapper').outerHeight()) { $('body').addClass('tight'); } else { $('body').removeClass('tight'); } }); $("html").on("click", "body.tight .wrapper", function() { $('html, body').animate({ scrollTop: $('.wrapper').outerHeight() - $(window).height() }, 500); }); }); |
В результате мы получили приятную анимацию для подвала сайта, которая будет сдвигаться и подавать посетителю необходимую информацию, при этом радуя взор.
Вот и все. Готово!
Отправить ответ