НОВЫЙ ВИД ДЛЯ МИНИ-ЧАТА (ПРЯМОЙ ОБМЕН СООБЩЕНИЯМИ)
14.03.2017 80 0 SТРАННИК

НОВЫЙ ВИД ДЛЯ МИНИ-ЧАТА (ПРЯМОЙ ОБМЕН СООБЩЕНИЯМИ)

Описание:

Это реализация нового вида для мини-чата, а точнее его заготовка. Вы можете посмотреть его в живую в предоставленной демонстрации. Возможно, в дальнейшем я его доработаю и адаптируем под готовую версию мини-чата для сайта. Пока что это просто демонстрация, но задумка, согласитесь, очень интересная.

Давайте приступим к его демонстрационной установке.

Подключим минимализированную версию библиотеки CSS стилей для скроллинга сообщений (jquery.mCustomScrollbar.min.css)

Код
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.3/jquery.mCustomScrollbar.min.css'>
Теперь этот код где будет выглядит мини-чат:

Код
<div class="chat">    
     <div class="chat-title">    
     <h1>Sтранник</h1>    
     <h2>Администратор</h2>    
     <figure class="avatar">    
     <img src="https://373480170.uid.me/avatar.jpg" /></figure>    
     </div>    
     <div class="messages">    
     <div class="messages-content"></div>    
     </div>    
     <div class="message-box">    
     <textarea type="text" class="message-input" placeholder="Введите сообщение..."></textarea>    
     <button type="submit" class="message-submit">Отправить</button>    
     </div>    
</div>
Теперь добавим в CSS стили:
Код
<style type="text/css">    
     *,    
     *::before,    
     *::after {    
     box-sizing: border-box;    
     }    

     /* Chat    
     --------------------*/    
     .chat {    
     position: absolute;    
     top: 50%;    
     left: 50%;    
     -webkit-transform: translate(-50%, -50%);    
     transform: translate(-50%, -50%);    
     width: 300px;    
     height: 80vh;    
     max-height: 500px;    
     z-index: 2;    
     overflow: hidden;    
     box-shadow: 0 5px 30px rgba(0, 0, 0, 0.2);    
     background: rgba(0, 0, 0, 0.5);    
     border-radius: 20px;    
     display: -webkit-box;    
     display: -ms-flexbox;    
     display: flex;    
     -webkit-box-pack: justify;    
     -ms-flex-pack: justify;    
     justify-content: space-between;    
     -webkit-box-orient: vertical;    
     -webkit-box-direction: normal;    
     -ms-flex-direction: column;    
     flex-direction: column;    
     }    
         
     /* Chat Title    
     --------------------*/    
     .chat-title {    
     -webkit-box-flex: 0;    
     -ms-flex: 0 1 45px;    
     flex: 0 1 45px;    
     position: relative;    
     z-index: 2;    
     background: rgba(0, 0, 0, 0.2);    
     color: #fff;    
     text-transform: uppercase;    
     text-align: left;    
     padding: 10px 10px 10px 50px;    
     }    
         
     .chat-title h1,    
     .chat-title h2 {    
     font-weight: normal;    
     font-size: 10px;    
     margin: 0;    
     padding: 0;    
     }    
         
     .chat-title h2 {    
     color: rgba(255, 255, 255, 0.5);    
     font-size: 8px;    
     letter-spacing: 1px;    
     }    
         
     .chat-title .avatar {    
     position: absolute;    
     z-index: 1;    
     top: 8px;    
     left: 9px;    
     border-radius: 30px;    
     width: 30px;    
     height: 30px;    
     overflow: hidden;    
     margin: 0;    
     padding: 0;    
     border: 2px solid rgba(255, 255, 255, 0.24);    
     }    
         
     .chat-title .avatar img {    
     width: 100%;    
     height: auto;    
     }    
         
     /* Messages    
     --------------------*/    
     .messages {    
     -webkit-box-flex: 1;    
     -ms-flex: 1 1 auto;    
     flex: 1 1 auto;    
     color: rgba(255, 255, 255, 0.5);    
     overflow: hidden;    
     position: relative;    
     width: 100%;    
     }    
         
     .messages .messages-content {    
     position: absolute;    
     top: 0;    
     left: 0;    
     height: 101%;    
     width: 100%;    
     }    
         
     .messages .message {    
     clear: both;    
     float: left;    
     padding: 6px 10px 7px;    
     border-radius: 10px 10px 10px 0;    
     background: rgba(0, 0, 0, 0.3);    
     margin: 8px 0;    
     font-size: 11px;    
     line-height: 1.4;    
     margin-left: 35px;    
     position: relative;    
     text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);    
     }    
         
     .messages .message .timestamp {    
     position: absolute;    
     bottom: -15px;    
     font-size: 9px;    
     color: rgba(255, 255, 255, 0.3);    
     }    
         
     .messages .message::before {    
     content: '';    
     position: absolute;    
     bottom: -6px;    
     border-top: 6px solid rgba(0, 0, 0, 0.3);    
     left: 0;    
     border-right: 7px solid transparent;    
     }    
         
     .messages .message .avatar {    
     position: absolute;    
     z-index: 1;    
     bottom: -15px;    
     left: -35px;    
     border-radius: 30px;    
     width: 30px;    
     height: 30px;    
     overflow: hidden;    
     margin: 0;    
     padding: 0;    
     border: 2px solid rgba(255, 255, 255, 0.24);    
     }    
         
     .messages .message .avatar img {    
     width: 100%;    
     height: auto;    
     }    
         
     .messages .message.message-personal {    
     float: right;    
     color: #fff;    
     text-align: right;    
     background: -webkit-linear-gradient(330deg, #248A52, #257287);    
     background: linear-gradient(120deg, #248A52, #257287);    
     border-radius: 10px 10px 0 10px;    
     }    
         
     .messages .message.message-personal::before {    
     left: auto;    
     right: 0;    
     border-right: none;    
     border-left: 5px solid transparent;    
     border-top: 4px solid #257287;    
     bottom: -4px;    
     }    
         
     .messages .message:last-child {    
     margin-bottom: 30px;    
     }    
         
     .messages .message.new {    
     -webkit-transform: scale(0);    
     transform: scale(0);    
     -webkit-transform-origin: 0 0;    
     transform-origin: 0 0;    
     -webkit-animation: bounce 500ms linear both;    
     animation: bounce 500ms linear both;    
     }    
         
     .messages .message.loading::before {    
     position: absolute;    
     top: 50%;    
     left: 50%;    
     -webkit-transform: translate(-50%, -50%);    
     transform: translate(-50%, -50%);    
     content: '';    
     display: block;    
     width: 3px;    
     height: 3px;    
     border-radius: 50%;    
     background: rgba(255, 255, 255, 0.5);    
     z-index: 2;    
     margin-top: 4px;    
     -webkit-animation: ball 0.45s cubic-bezier(0, 0, 0.15, 1) alternate infinite;    
     animation: ball 0.45s cubic-bezier(0, 0, 0.15, 1) alternate infinite;    
     border: none;    
     -webkit-animation-delay: .15s;    
     animation-delay: .15s;    
     }    
         
     .messages .message.loading span {    
     display: block;    
     font-size: 0;    
     width: 20px;    
     height: 10px;    
     position: relative;    
     }    
         
     .messages .message.loading span::before {    
     position: absolute;    
     top: 50%;    
     left: 50%;    
     -webkit-transform: translate(-50%, -50%);    
     transform: translate(-50%, -50%);    
     content: '';    
     display: block;    
     width: 3px;    
     height: 3px;    
     border-radius: 50%;    
     background: rgba(255, 255, 255, 0.5);    
     z-index: 2;    
     margin-top: 4px;    
     -webkit-animation: ball 0.45s cubic-bezier(0, 0, 0.15, 1) alternate infinite;    
     animation: ball 0.45s cubic-bezier(0, 0, 0.15, 1) alternate infinite;    
     margin-left: -7px;    
     }    
         
     .messages .message.loading span::after {    
     position: absolute;    
     top: 50%;    
     left: 50%;    
     -webkit-transform: translate(-50%, -50%);    
     transform: translate(-50%, -50%);    
     content: '';    
     display: block;    
     width: 3px;    
     height: 3px;    
     border-radius: 50%;    
     background: rgba(255, 255, 255, 0.5);    
     z-index: 2;    
     margin-top: 4px;    
     -webkit-animation: ball 0.45s cubic-bezier(0, 0, 0.15, 1) alternate infinite;    
     animation: ball 0.45s cubic-bezier(0, 0, 0.15, 1) alternate infinite;    
     margin-left: 7px;    
     -webkit-animation-delay: .3s;    
     animation-delay: .3s;    
     }    
         
     /* Message Box    
     --------------------*/    
     .message-box {    
     -webkit-box-flex: 0;    
     -ms-flex: 0 1 40px;    
     flex: 0 1 40px;    
     width: 100%;    
     background: rgba(0, 0, 0, 0.3);    
     padding: 10px;    
     position: relative;    
     }    
         
     .message-box .message-input {    
     background: none;    
     border: none;    
     outline: none !important;    
     resize: none;    
     color: rgba(255, 255, 255, 0.7);    
     font-size: 11px;    
     height: 17px;    
     margin: 0;    
     padding-right: 20px;    
     width: 265px;    
     }    
         
     .message-box textarea:focus:-webkit-placeholder {    
     color: transparent;    
     }    
         
     .message-box .message-submit {    
     position: absolute;    
     z-index: 1;    
     top: 9px;    
     right: 10px;    
     color: #fff;    
     border: none;    
     background: #248A52;    
     font-size: 10px;    
     text-transform: uppercase;    
     line-height: 1;    
     padding: 6px 10px;    
     border-radius: 10px;    
     outline: none !important;    
     -webkit-transition: background .2s ease;    
     transition: background .2s ease;    
     }    
         
     .message-box .message-submit:hover {    
     background: #1D7745;    
     }    
         
     /* Custom Srollbar    
     --------------------*/    
     .mCSB_scrollTools {    
     margin: 1px -3px 1px 0;    
     opacity: 0;    
     }    
         
     .mCSB_inside > .mCSB_container {    
     margin-right: 0px;    
     padding: 0 10px;    
     }    
         
     .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {    
     background-color: rgba(0, 0, 0, 0.5) !important;    
     }    
         
     /* Bounce    
     --------------------*/    
     @-webkit-keyframes bounce {    
     0% {    
     -webkit-transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);    
     transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);    
     }    
     4.7% {    
     -webkit-transform: matrix3d(0.45, 0, 0, 0, 0, 0.45, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);    
     transform: matrix3d(0.45, 0, 0, 0, 0, 0.45, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);    
     }    
     9.41% {    
     -webkit-transform: matrix3d(0.883, 0, 0, 0, 0, 0.883, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);    
     transform: matrix3d(0.883, 0, 0, 0, 0, 0.883, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);    
     }    
     14.11% {    
     -webkit-transform: matrix3d(1.141, 0, 0, 0, 0, 1.141, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);    
     transform: matrix3d(1.141, 0, 0, 0, 0, 1.141, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);    
     }    
     18.72% {    
     -webkit-transform: matrix3d(1.212, 0, 0, 0, 0, 1.212, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);    
     transform: matrix3d(1.212, 0, 0, 0, 0, 1.212, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);    
     }    
     24.32% {    
     -webkit-transform: matrix3d(1.151, 0, 0, 0, 0, 1.151, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);    
     transform: matrix3d(1.151, 0, 0, 0, 0, 1.151, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);    
     }    
     29.93% {    
     -webkit-transform: matrix3d(1.048, 0, 0, 0, 0, 1.048, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);    
     transform: matrix3d(1.048, 0, 0, 0, 0, 1.048, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);    
     }    
     35.54% {    
     -webkit-transform: matrix3d(0.979, 0, 0, 0, 0, 0.979, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);    
     transform: matrix3d(0.979, 0, 0, 0, 0, 0.979, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);    
     }    
     41.04% {    
     -webkit-transform: matrix3d(0.961, 0, 0, 0, 0, 0.961, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);    
     transform: matrix3d(0.961, 0, 0, 0, 0, 0.961, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);    
     }    
     52.15% {    
     -webkit-transform: matrix3d(0.991, 0, 0, 0, 0, 0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);    
     transform: matrix3d(0.991, 0, 0, 0, 0, 0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);    
     }    
     63.26% {    
     -webkit-transform: matrix3d(1.007, 0, 0, 0, 0, 1.007, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);    
     transform: matrix3d(1.007, 0, 0, 0, 0, 1.007, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);    
     }    
     85.49% {    
     -webkit-transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);    
     transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);    
     }    
     100% {    
     -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);    
     transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);    
     }    
     }    
         
     @keyframes bounce {    
     0% {    
     -webkit-transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);    
     transform: matrix3d(0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);    
     }    
     4.7% {    
     -webkit-transform: matrix3d(0.45, 0, 0, 0, 0, 0.45, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);    
     transform: matrix3d(0.45, 0, 0, 0, 0, 0.45, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);    
     }    
     9.41% {    
     -webkit-transform: matrix3d(0.883, 0, 0, 0, 0, 0.883, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);    
     transform: matrix3d(0.883, 0, 0, 0, 0, 0.883, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);    
     }    
     14.11% {    
     -webkit-transform: matrix3d(1.141, 0, 0, 0, 0, 1.141, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);    
     transform: matrix3d(1.141, 0, 0, 0, 0, 1.141, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);    
     }    
     18.72% {    
     -webkit-transform: matrix3d(1.212, 0, 0, 0, 0, 1.212, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);    
     transform: matrix3d(1.212, 0, 0, 0, 0, 1.212, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);    
     }    
     24.32% {    
     -webkit-transform: matrix3d(1.151, 0, 0, 0, 0, 1.151, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);    
     transform: matrix3d(1.151, 0, 0, 0, 0, 1.151, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);    
     }    
     29.93% {    
     -webkit-transform: matrix3d(1.048, 0, 0, 0, 0, 1.048, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);    
     transform: matrix3d(1.048, 0, 0, 0, 0, 1.048, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);    
     }    
     35.54% {    
     -webkit-transform: matrix3d(0.979, 0, 0, 0, 0, 0.979, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);    
     transform: matrix3d(0.979, 0, 0, 0, 0, 0.979, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);    
     }    
     41.04% {    
     -webkit-transform: matrix3d(0.961, 0, 0, 0, 0, 0.961, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);    
     transform: matrix3d(0.961, 0, 0, 0, 0, 0.961, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);    
     }    
     52.15% {    
     -webkit-transform: matrix3d(0.991, 0, 0, 0, 0, 0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);    
     transform: matrix3d(0.991, 0, 0, 0, 0, 0.991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);    
     }    
     63.26% {    
     -webkit-transform: matrix3d(1.007, 0, 0, 0, 0, 1.007, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);    
     transform: matrix3d(1.007, 0, 0, 0, 0, 1.007, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);    
     }    
     85.49% {    
     -webkit-transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);    
     transform: matrix3d(0.999, 0, 0, 0, 0, 0.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);    
     }    
     100% {    
     -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);    
     transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);    
     }    
     }    
         
     @-webkit-keyframes ball {    
     from {    
     -webkit-transform: translateY(0) scaleY(0.8);    
     transform: translateY(0) scaleY(0.8);    
     }    
     to {    
     -webkit-transform: translateY(-10px);    
     transform: translateY(-10px);    
     }    
     }    
         
     @keyframes ball {    
     from {    
     -webkit-transform: translateY(0) scaleY(0.8);    
     transform: translateY(0) scaleY(0.8);    
     }    
     to {    
     -webkit-transform: translateY(-10px);    
     transform: translateY(-10px);    
     }    
     }    
</style>

Теперь нам необходимо подключить плагины, jQuery и mCustomScrollbar отвечающий за скроллинг сообщений в чате.

Код
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>    
<script src='https://cdnjs.cloudflare.com/ajax/libs/malihu-custom-scrollbar-plugin/3.1.3/jquery.mCustomScrollbar.concat.min.js'></script>
Ну и в завершении, подключаем сам js обработчик нашего мини-чата


Код
<script>    
     var $messages = $('.messages-content'),    
     d, h, m,    
     i = 0;    

     $(window).load(function () {    
     $messages.mCustomScrollbar();    
     setTimeout(function () {    
     fakeMessage();    
     }, 100);    
     });    

     function updateScrollbar() {    
     $messages.mCustomScrollbar("update").mCustomScrollbar('scrollTo', 'bottom', {    
     scrollInertia: 10,    
     timeout: 0    
     });    
     }    

     function setDate() {    
     d = new Date()    
     if (m != d.getMinutes()) {    
     m = d.getMinutes();    
     $('<div class="timestamp">' + d.getHours() + ':' + m + '</div>').appendTo($('.message:last'));    
     }    
     }    

     function insertMessage() {    
     msg = $('.message-input').val();    
     if ($.trim(msg) == '') {    
     return false;    
     }    
     $('<div class="message message-personal">' + msg + '</div>').appendTo($('.mCSB_container')).addClass('new');    
     setDate();    
     $('.message-input').val(null);    
     updateScrollbar();    
     setTimeout(function () {    
     fakeMessage();    
     }, 1000 + (Math.random() * 20) * 100);    
     }    

     $('.message-submit').click(function () {    
     insertMessage();    
     });    

     $(window).on('keydown', function (e) {    
     if (e.which == 13) {    
     insertMessage();    
     return false;    
     }    
     })    

     var Fake = [    
     'Здравствуйте, я Buger - руководитель сайта Turbo-S.uCoz.ru, а вы?',    
     'Очень приятно!',    
     'Как ваши дела? Как настроение?',    
     'Чем вы занимаетесь?',    
     'Это потрясающе',    
     'Turbo-S - отличный интернет-магазин',    
     'Я думаю вам понравится здесь',    
     'Почему вы так думаете?',    
     'Извините, мне нужно отлучиться не на долгое время',    
     'Было приятно пообщаться с вами',    
     'Буду рад видеть вас здесь снова',    
     'До свидания!',    
     ':)'    
]    

     function fakeMessage() {    
     if ($('.message-input').val() != '') {    
     return false;    
     }    
     $('<div class="message loading new"><figure class="avatar"><img src="https://373480170.uid.me/avatar.jpg" /></figure><span></span></div>').appendTo($('.mCSB_container'));    
     updateScrollbar();    
         
     setTimeout(function () {    
     $('.message.loading').remove();    
     $('<div class="message new"><figure class="avatar"><img src="https://373480170.uid.me/avatar.jpg" /></figure>' +Fake [i]+ '</div>').appendTo($('.mCSB_container')).addClass('new');    
     setDate();    
     updateScrollbar();    
     i++;    
     }, 1000 + (Math.random() * 20) * 100);    
         
     }    
</script>
Файлы для скачивания отсутствуют.
Поблагодарить автора Автор: SТРАННИК
ИсточникМатериал взят с другого сайта
Комментарии (0)
Добавить комментарий
Прокомментировать