Draggable Chat Heads & Material Chat

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"); } } });
Expand for more options Login