cssとjsで画面横からブロックが出てくるものを作ってみよう

今回は、cssでよくホームページなどでスクロールした時に横から出てくるものを作ってみようと思います。

画面の横からブロックが出てくるようにするためのhtmlの構造

よく画面の横からスクロールを行うとブロックがニョキと出てくるものをみたことがないでしょうか？今回はそちらをどうやってデザインするのかについてご紹介したいと思います。今回はスクロール時に出現するようにはいたしませんのでご了承ください。

画面の横からブロックが出てくるようにするために今回はボタンをクリックしたら出てくるようにしたいと思います。

考え方は、アコーディオンと同じなのでアコーディオンの作り方を知っている肩ならピンとくると思います。

<div id="sideblock-btn btn">横からブロックが出てくるよ</div>
<div id="sideblock"></div>

上記のように、クリックボタンと横からでるブロックだけをhtmlで記述しておきます。htmlの準備としてはこれで終わりです。

画面の横からブロックが出てくるようにcssでデザインしてみよう

上記のhtmlを使って、cssとjsを当てることでブロックを作ってブロックが出たりでなくしたりしてみましょう。

<style>
 #sideblock{
   position:fixed;
   width:100px;
   height:100px;
   left:0;
   bottom:0;
   border:1px solid #ccc;
   padding:10px;
   z-index:10;
   background:#eee;
   display:none;
 }
</style>
<div id="sideblock-btn" class="btn btn-dark">横からブロックが出てくるよ</div>
<div id="sideblock"></div>
<script>
$(function(){   
  $('#sideblock-btn').on('click',function(){
     $('#sideblock').animate({ width:'toggle'},100,'linear');
   })
});
</script>

横からブロックが出てくるもののサンプル例

下記のボタンをクリックしますと画面左下に灰色のブロックが出たり出なかったりするようになります。

上記のように、animateをつかってwidthをアニメーションすることで画面横からブロックを出すことができるようになります。

まとめ

今回は、画面の横からブロックが出るようにするためのcssとjsをご紹介させていただきました。このようなものの使い方は、スクロール量などをトリガーにして使われたりもしています。スクロールを使った実装の仕方についてもまた機会がありましたらご紹介させていただきたいと思います。