吹き出し風の画面を Android の Toast みたいなノリで表示したかったので、
調べたことを整理がてらメモします。
開発環境及び動作環境
- OS: Windows 7 x64
- Browser: Chrome 61.0.3163.79
DEMO
吹き出しを作る
まずは CSS で吹き出しを作ります。
style.css
.balloon-left {
position: absolute;
display: inline-block;
margin-left: 20px;
padding: 7px 10px;
min-height: 40px;
min-width: 120px;
line-height: 40px;
background: #5cc507;
box-shadow: -4px 4px 8px -1px #999999;
}
.balloon-left:before{
content: "";
position: absolute;
top: 50%;
left: -30px;
margin-top: -15px;
border: 15px solid transparent;
border-right: 15px solid #5cc507;
}
.balloon-left p {
margin: 0;
padding: 0;
}
それをHTMLに設定します。
index.html
<button id="button">SHOW</button>
<div id="balloon-tips" class="balloon-left">
<p>吹き出し風Tips</p>
</div>
フェードイン/フェードアウト
CSS でアニメーションを作ります。
style.css
.fadein {
opacity: 0;
visibility: hidden;
transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}
.fadein.visible {
opacity: 1;
visibility: visible;
}
それをタグに適用します。
index.html
<button id="button">SHOW</button>
- <div id="balloon-tips" class="balloon-left">
+ <div id="balloon-tips" class="balloon-left fadein">
<p>吹き出し風Tips</p>
</div>
ボタンを押した時に表示されるようにする
あとは、jQueryなり何なりで、クリック処理とclassのON/OFFを行います。
main.js
$(function() {
var timer;
$("#button").on("click", function() {
clearTimeout(timer);
$("#balloon-tips").toggleClass("visible");
timer = setTimeout(function() {
$("#balloon-tips").toggleClass("visible");
}, 3000);
});
});
完成
DEMO
https://github.com/chibi929/chibi-html