Кнопка Google Material Design
Интересная кнопка в стиле Material Design которая прячется при прокрутки вниз и появляется при прокрутки вверх.

В прошлом материале я описывал меню в стиле 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
После html кода!
urenstyle41
в 17:23, 26 Мар 17
А где изменить код что бы она была не справа, а слева? 0:)
_LOGGED_IN$)?>
Чтобы оставить комментарий под этой публикацией, войдите или зарегистрируйтесь.

Случайные материалы

AJAX ОКНА V.1.2 BY MR.WINS
AJAX ОКНА V.1.2 BY MR.WINS
7 советов для успешной жизни от Марка Твена
7 советов для успешной жизни от Мар
150 векторных иконок
150 векторных иконок
Эффекты для новостей
Эффекты для новостей
Дополнительное поле на персональной странице для uCoz
Дополнительное поле на персональной
Кнопка лайк как на Facebook
Кнопка лайк как на Facebook