Pushbar - yagisawatakuya/Wiki GitHub Wiki

##Pushbar.js - 上下左右どこからでも出せるドロワー

Download：https://github.com/oncebot/pushbar.js
DEMO：https://oncebot.github.io/pushbar.js/
参考:https://coliss.com/articles/build-websites/operation/javascript/sliding-drawers-pushbar.html

HTML
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>左右上下からスライドさせる超軽量スクリプト -Pushbar.js</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="pushbar.js"></script>
</head>
<body>

    <div data-pushbar-id="mypushbar1" class="pushbar from_left">
        ドロワー1のコンテンツ
        <button data-pushbar-close>閉じる</button>
    </div>

    <div data-pushbar-id="mypushbar2" class="pushbar from_bottom">
        ドロワー2のコンテンツ
        <button data-pushbar-close>閉じる</button>
    </div>

    <div class="pushbar_main_content">
        メインのコンテンツ
        <button data-pushbar-target="mypushbar1">ドロワー1を開く</button>
        <button data-pushbar-target="mypushbar2">ドロワー2を開く</button>
    </div>
    <script type="text/javascript">
    var pushbar = new Pushbar({
        blur:true,
        overlay:true,
    });
    </script>
</body>
</html>
SCSS
.pushbar.opened {
  display: block;
}

html.pushbar_locked {
  overflow: hidden;
  -ms-touch-action: none;
      touch-action: none;
}

.pushbar_locked .pushbar_main_content.pushbar_blur {
  filter:blur(15px);
}

html.pushbar_locked .pushbar_overlay {
  opacity:0.8;
  z-index: 999;
  transition:opacity 0.5s ease;
}

.pushbar {
  z-index: 1000;
  position: fixed;
  will-change: transform;
  overflow-y: auto;
  transition:transform 0.5s ease;
  will-change: transform;
  background:#fff;

  &_overlay {
    z-index: -999;
    position: fixed;
    width: 100%;
    max-width: 100%;
    height: 100%;
    min-height: 100vh;
    top: 0;
    left: 0;
    will-change: opacity;
    transition:opacity 0.5s ease;
    opacity:0;
    will-change: opacity;
    background: #3c3442;
  }

  &.from_left {
    top: 0;
    left: 0;
    width: 256px;
    max-width: 100%;
    height: 100%;
    min-height: 100vh;
    transform: translateZ(0) translateX(-100%);
  }

  &.from_right {
    top: 0;
    right: 0;
    width: 256px;
    max-width: 100%;
    height: 100%;
    min-height: 100vh;
    transform: translateZ(0) translateX(100%);
  }

  &.from_top {
    top: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    min-height: 150px;
    transform: translateZ(0) translateY(-100%);
  }

  &.from_bottom {
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    min-height: 150px;
    transform: translateZ(0) translateY(100%);
  }

  &.opened {
    transform: translateX(0px) translateY(0px);
  }
  
}

Back to Top

⚠️ **GitHub.com Fallback** ⚠️