Параллакс эффект для футера на CSS + JS
 | |
| Здесь представлен красиво исполненный эффект, который заключается в том, что при прокрутке появляется футер сайта, что находился под страницей. Оказалось, что такой эффект создан не очень сложно, это изначально создается подвал, где идет фиксированная высота, и он находится на страницы, и пользователь его увидеть, когда опустит страницу, и этот подвал реальны покажется из-под страницы в своем оттенке цвета, где может быть описание или другие прикрепленные функций. Плюс в том, что он сделан как под большие мониторы, где показывает корректно и выводится вся информация, и аналогично на всех мобильных аппаратах, что полностью адаптивный под различные гаджет. Также будет возможность изначально посмотреть, как все реально после полной установки выглядит, это на demo странице, где полностью со всеми функциями идет, только вместо функционала предоставлено описание. И здесь нужно подчеркнуть, что дизайн основном идет под светлый формат, где эффект появления футера задействован в темно синей палитре, также закреплено небольшое оформление, которое отлично вписывается в дизайн при интересном эффекте появление. Так примерно будет смотреться эффект появление:  Приступаем к установке: HTML Код <header> Шапка сайта </header> <div class="main-content"> Контент сайта </div> <footer class="footer-parallax"> Подвал </footer> CSS Код .main-content { box-shadow:0 4px 12px rgba(14, 14, 14, 0.2), 0 16px 20px rgba(14, 14, 14, 0.2); background:#FFF; } .footer-parallax { position:fixed; bottom:0; left:0; width:100%; z-index:-1; } @media screen and (max-width:767px) { .footer-parallax { position:static; } } Здесь важно знать, что свойство background должны быть обязательны для блока, где находится контент, иначе он не перекроет футер. JS Скрипт написан для бибилотеки jQuery Код function margin() { if ($(window).width() > 767) { $(".main-content").css({'margin-bottom': $(".footer-parallax").height()}); } else { $(".main-content").css({'margin-bottom': 0}); } } $(margin); $(window).resize(margin); Если у вас появится причина, чтоб не выставлять скрипт, то в стилях нужно прописать. Код .main-content { margin-bottom:200px; /* высота подвала */ } .footer-parallax { height:200px; /* высота подвала */ } Имея работающею установку, где теперь самостоятельно можете применить в различных аспектах, так как параллакс имеет большие возможности комбинировать ваши оригинальные идеи, а также почти бесконечные возможности управления и автоматизации, вообще это новый взгляд на планировку и стилистику дизайна. Демонстрация Источник: atuin.ru | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |