HTML
<div class="chat_container">
<div class="bubble"></div>
<div class="chat">
<ul class="chat-thread">
<li class="message-mit">Hi Codepen!</li>
<li class="message-dest">Hi, what are you going to do today?</li>
<li class="message-mit loading"><i class="material-icons">lens</i><i class="material-icons">lens</i><i class="material-icons">lens</i></li>
</ul>
<div class="textbox"><input class="input" type="text"><span class="send"><i class="material-icons">send</i></span></div>
</div>
</div>
SCSS
html, body{
background: #f1f1f1;
margin: 0;
}
.chat_container{
position: absolute;
top: 0;
bottom: 0;
margin: auto;
right: 0;
left: 0;
width: 500px;
height: 500px;
.chat{
position: absolute;
width: 400px;
height: 400px;
top: 0;
bottom: 0;
margin: auto;
left: 0;
right: 0;
background: white;
border-radius: 10px;
transform: scale(0);
box-shadow: 0 5px 60px 10px rgba(0,0,0,0.12);
&::after{
content: '';
display: block;
position: absolute;
width: 0;
height: 0;
border-left: 15px solid rgba(0,0,0,0);
border-bottom: 15px solid rgba(0,0,0,0);
border-top: 15px solid rgba(0,0,0,0);
border-right: 15px solid white;
left: -25px;
top: 7px;
}
.textbox{
position: absolute;
width: 100%;
height: 50px;
box-shadow: 0px -2px 10px rgba(0,0,0,0.07);
bottom: 0;
.input{
width: 82%;
height: 35px;
display: block;
position: relative;
float: left;
margin-left: 10px;
border: none;
padding: 3px;
border-bottom: 2px solid rgba(0,0,0,0.15);
}
.send{
position: absolute;
bottom: 0;
right: 0;
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
font-size: 40px;
color: #1E88E5;
}
}
}
}
.bubble{
width: 75px;
height: 75px;
border-radius: 50%;
position: fixed;
top: 50%;
left: -25px;
box-shadow: 0 0px 20px rgba(0,0,0,0.19), 0 0px 6px rgba(0,0,0,0.23);
background: url("https://media.licdn.com/media/AAEAAQAAAAAAAAc8AAAAJDk4ZjZhZTJhLTRlNzYtNGYzMy05ZjAwLWYyNjljYTBlMWFiNA.jpg") white;
background-size: cover;
&:hover{
transition: all 0.3s;
transform: scale(1.1);
}
&__span{
position: absolute;
left: 70px;
background: #333;
border-radius: 10px;
padding: 5px;
color: white;
font-family: 'Roboto';
opacity: 0;
}
&:active{
transform: scale(1.2);
transition: all 0.3s;
}
}
.chat-thread{
padding: 20px;
margin: 10px;
list-style: none;
overflow-x: hidden;
li{
position: relative;
clear: both;
display: inline-block;
padding: 10px 20px 10px 15px;
margin-bottom: 10px;
font-family: 'Roboto';
font: 14px;
border-radius: 25px;
}
.message-mit{
background: #1E88E5;
float: right;
color: white;
&:after{
}
}
.message-dest{
background: #CFD8DC;
float: left;
}
.loading{
.material-icons{
color: rgba(200,200,200,0.8);
font-size: 8px;
padding: 1px;
margin-bottom: 5px;
&:nth-child(1){
animation: writing 1.2s infinite alternate;
}
&:nth-child(2){
animation: writing 1.2s infinite 0.2s alternate;
}
&:nth-child(3){
animation: writing 1.2s infinite 0.3s alternate;
}
}
}
}
.bouncein{
animation: bounce 0.4s ease-out forwards 0.2s;
}
.bounceout{
animation: bounce 0.25s ease-out forwards reverse;
}
@keyframes bounce{
0%{
transform: scale(0);
}
60%{
transform: scale(1.1);
}
100%{
transform: scale(1);
}
}
@keyframes writing{
0%{
transform: translateY(0px);
}
50%{
transform: translateY(5px);
}
100%{
transform: translateY(-5px);
}
}
JAVASCRIPT
$(".bubble").draggable();
var isMoving = false;
var isdragging = false;
var chatMode = false;
function closeChat(){
$(".bubble").css("top", "50%").css("left", "-25px").css("transition", "all 0.5s");
$(".chat").addClass("bounceout").removeClass("bouncein");
$(".chat").replaceWith($(".chat").clone(true));
}
$(".bubble").on("click", function(){
var pos = $(".chat_container").offset();
if(chatMode){
closeChat();
chatMode = false;
}else{
$(".chat").addClass("bouncein").removeClass("bounceout");
$(".bubble").css("top", (pos.top + 30) + "px").css("left", (pos.left - 70) + "px").css("transition", "all 0.3s");
$(".chat").replaceWith($(".chat").clone(true));
chatMode = true;
}
});
$(".bubble").mousedown(function(){
isdragging = false;
});
$(".bubble").mousemove(function(){
isdragging = true;
$(this).css("transition", "all 0s");
});
$(".bubble").mouseup(function(e){
e.preventDefault();
var lastY = window.event.clientY;
var lastX = window.event.clientX;
var swidth = $( window ).width();
if(isdragging){
if(chatMode){
chatMode = false;
closeChat();
}
if(lastX > (swidth/2)){
$(this).css("top", lastY).css("left", (swidth-55) + "px").css("transition", "all 0.4s");
}else{
$(this).css("top", lastY).css("left", "-25px").css("transition", "all 0.4s");
}
}
});
1 Response