• milan_shubin
    19.09.2017 в 23:06

    Чтобы скачать надо приобрести V.I.P Группу!

  • Dimonnss666
    19.09.2017 в 22:12

    А где ссылка на скачивание?

  • milan_shubin
    11.09.2017 в 17:36

    кеукеукеукеукеукеукеукеукеку куеп
    упкуцепук

  • milan_shubin
    11.09.2017 в 17:30

    кекек

  • Онлайн всего: 1
    Гостей: 1
    Пользователей: 0
    Сегодняшние посетители:
    На сайте:
    НОВЫЙ ВИД ДЛЯ МИНИ-ЧАТА (ПРЯМОЙ ОБМЕН СООБЩЕНИЯМИ)
    Описание:

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

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

    Подключим минимализированную версию библиотеки 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>
    Автор материала:
    ...
    Логин на сайте: ...
    Группа: ...
    Статус: ...
    О материале:
    Дата добавления материала: 14.03.2017 в 21:47
    Материал просмотрен: 29 раз
    Категория материала: Скрипты
    К материалу оставлено: 0 комментариев

    Пожаловаться
    Сказать спасибо
    Источник
    Теги к материалу
    Поделись материалом с друзьями
    Рекомендуем к просмотру
    Всего комментариев: 0
    Обсуждение материала:
    Комментариев: 0
    avatar