狼読

 

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をご紹介させていただきました。このようなものの使い方は、スクロール量などをトリガーにして使われたりもしています。スクロールを使った実装の仕方についてもまた機会がありましたらご紹介させていただきたいと思います。

Profile Card

タマリュウ

生息地:福井県
WEB制作会社を立ち上げて日々レベルアップの修行中! 俺自身まだまだ修行中なので、新しく学んだこと、引っかかったポイントを備忘録として記事にして皆さんと共有できればと思っています。 読んで誰が得するのかわからない情報も発信します!

関連記事

Related Post

投稿カレンダー

2024年3月
 123
45678910
11121314151617
18192021222324
25262728293031

Technology

category

©狼読