Кнопка Google Material Design
- 23 Апр 16 в 02:44
- Скрипты для uCoz
Интересная кнопка в стиле Material Design которая прячется при прокрутки вниз и появляется при прокрутки вверх.
<div class="menu_br">
<div class="menu_drop">
<a href="http://kanavas.at.ua/"><div class="menu_btn">
<span class="menu_label">Kanavas</span>
<i class="absolute-center fa fa-pencil"></i>
</div></a>
</div>
</div>
<script type="text/javascript">
$(function(){
var _top = $(window).scrollTop(),
_direction,
$menu_drop = $('.menu_drop');
$(window).scroll(function(){
var _cur_top = $(window).scrollTop();
if(_top < _cur_top) {
_direction = 'down';
$menu_drop.stop().addClass('hide_top');
}
else {
_direction = 'up';
$menu_drop.removeClass('hide_top');
}
_top = _cur_top;
console.log(_direction);
});
});
</script>
.absolute-center {position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;width: 20px;height: 20px;text-align: center; font-size: 18px!important; color: #fff;}
.menu_br {position: fixed;bottom: 0px;right: -15px;}
.menu_drop {position: absolute;bottom: 15px;right: 30px;-webkit-transition:-webkit-transform 0.7s .3s ease;-moz-transition: -moz-transform 0.7s .3s ease;-ms-transition: -ms-transform 0.7s .3s ease;transition: transform 0.7s .3s ease;-webkit-backface-visibility: hidden;-webkit-transform: translate3d(0px, 0px, 0px);}
.menu_br, .hide_top{-webkit-transform: translate(0, 200%);-moz-transform: translate(0, 200%);-ms-transform: translate(0, 200%);transform: translate(0, 200%);-webkit-backface-visibility: hidden;}
.menu_btn {position: relative;width: 45px;height: 45px;float: right;cursor: pointer;background-color: #3080e8;border-radius: 50%;box-shadow: 0 4px 8px rgba(0,0,0,.25);}
.menu_btn:hover .menu_label {opacity: 1;}
.menu_label {position: absolute;top: 14px;right: 115%;padding: 4px 8px;font-size: 14px;color: #fff;background-color:rgba(48, 128, 232, 0.7);border-radius:50px;opacity: 0;pointer-events: none;white-space: nowrap;transition: opacity .2s ease-out;}
В прошлом материале я описывал меню в стиле Material Design. Теперь опишу кнопку внешне похожу на это меню но добавлены еще стиле которые позволят прятаться кнопке при прокрутке вниз и появляться при прокрутке вверх. Мне кажется, что это неплохая идея.
В общем давайте перейдем к установке.
Html код
Код
<div class="menu_br">
<div class="menu_drop">
<a href="http://kanavas.at.ua/"><div class="menu_btn">
<span class="menu_label">Kanavas</span>
<i class="absolute-center fa fa-pencil"></i>
</div></a>
</div>
</div>
Теперь добавляем скрипт
Код
<script type="text/javascript">
$(function(){
var _top = $(window).scrollTop(),
_direction,
$menu_drop = $('.menu_drop');
$(window).scroll(function(){
var _cur_top = $(window).scrollTop();
if(_top < _cur_top) {
_direction = 'down';
$menu_drop.stop().addClass('hide_top');
}
else {
_direction = 'up';
$menu_drop.removeClass('hide_top');
}
_top = _cur_top;
console.log(_direction);
});
});
</script>
И наконец устанавливаем стили
Код
.absolute-center {position: absolute;top: 0;left: 0;bottom: 0;right: 0;margin: auto;width: 20px;height: 20px;text-align: center; font-size: 18px!important; color: #fff;}
.menu_br {position: fixed;bottom: 0px;right: -15px;}
.menu_drop {position: absolute;bottom: 15px;right: 30px;-webkit-transition:-webkit-transform 0.7s .3s ease;-moz-transition: -moz-transform 0.7s .3s ease;-ms-transition: -ms-transform 0.7s .3s ease;transition: transform 0.7s .3s ease;-webkit-backface-visibility: hidden;-webkit-transform: translate3d(0px, 0px, 0px);}
.menu_br, .hide_top{-webkit-transform: translate(0, 200%);-moz-transform: translate(0, 200%);-ms-transform: translate(0, 200%);transform: translate(0, 200%);-webkit-backface-visibility: hidden;}
.menu_btn {position: relative;width: 45px;height: 45px;float: right;cursor: pointer;background-color: #3080e8;border-radius: 50%;box-shadow: 0 4px 8px rgba(0,0,0,.25);}
.menu_btn:hover .menu_label {opacity: 1;}
.menu_label {position: absolute;top: 14px;right: 115%;padding: 4px 8px;font-size: 14px;color: #fff;background-color:rgba(48, 128, 232, 0.7);border-radius:50px;opacity: 0;pointer-events: none;white-space: nowrap;transition: opacity .2s ease-out;}
Вот и все. Надеюсь не возникнет никаких вопросов по установке!
Всего комментариев: (4)
dogadaevznet
в 13:47, 18 Фев 16
dogadaevznet
в 10:03, 18 Фев 16
Kanavas
в 10:22, 18 Фев 16
urenstyle41
в 17:23, 26 Мар 17
А где изменить код что бы она была не справа, а слева? 
Чтобы оставить комментарий под этой публикацией, войдите или зарегистрируйтесь.
Случайные материалы
Эффекты для новостей
Простые Эффекты при наведении курсо
Меню для сайта на CSS и JavaScript
Простой плагин для создания анимаци
Material Design Buttons
Функциональный слайдер с автопрокру