Кнопка вверх как вконтакте в HTML + CSS
 | |
| Этот вариант кнопки аналогичен варианту, как на сайте в контакте, что также идет функция по левой стороне, где появляется при спуске страницы. Отличный и удобный функционал сделан на этой кнопки, так как по вверх еще можно написать несколько знаков и поставить кнопку. В нашем материале идет без кнопки, так как очень много места занимает, хотя с надписью "ВВЕРХ", где веб-разработчик может переписать на свою. Если вам нужно с кнопкой, как ниже можно посмотреть на элемент, то скачиваем архив, и в нем найдете текстовый документ, где представлен полноценный стиль. Если говорить про скольжение, то оно плавное, где красиво, кок сделаете клик, страница поднимется. Также здесь присутствуют эффекты, которые заключается в том, это безусловно при наведении, что полностью полоса может изменится под другую палитру цвета. Здесь выставил светло-синий оттенок, которой плюс еще прозрачный, но когда наведете, то он немного станет темнее, это про то говорю, что можно изменить на совершенно другую гамму. Также появление идет, это когда страницу начнете опускать, где красиво выедет со стороны. Так выглядит элемент после как все установите.  Приступаем к установке: HTML Код <!-- <Вверх> --> <script type="text/javascript"> $('body').append('<div class="besamogas"></div>'); $(window).scroll(function() { if ($(this).scrollTop() > 100) { $('.besamogas').css({ left: '0' }); } else { $('.besamogas').css({ left: '-100px' }); } }); $('.besamogas').on('click',function() { $('html, body').animate({ scrollTop: 0 }, 500); return false; }); </script> CSS Код .besamogas { z-index: 9999; width: 100px; height: 100%; color: #FFF; position: fixed; top:0; left:-100px; cursor: pointer; transition: all .5s ease-in-out; background: rgba(33, 87, 152, 0.56); } .besamogas:before { content: "ВВЕРХ"; display:block; position:absolute; text-align:center; color: #FFF; font-size:36px; line-height:100px; font-weight:bold; height:100%; vertical-align:center; writing-mode:tb-rl; transform: rotate(180deg); } .besamogas:hover { background: rgba(23, 74, 136, 0.68); } Также вам изначально нужно понимать, что сайт должен по своему конструктору фиксированным идти, что корректно поместилась полоса, так как она полностью будет занимать место снизу вверх по левой стороны. Хоть это не очень важно, так как основном ресурсы идут в заданной ширине, но есть форумы, что дизайн расположен на всю ширину, что такая кнопки не очень подойдет. Хотя если ее красиво оформить, то можно под любой модуль ее поставить с оригинальным стилем. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 3 | |
|
| |
