Giphy Chat: 一款Gif动画在线聊天服务

Giphy Chat powered by PubNub 你输入以\giphy 开头的消息指令，APP返回和内容匹配的Gif动画。

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1960
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

(function() {

var output = document.querySelector('#output'),
        input = document.querySelector('#input'),
        button = document.querySelector('#button'),
        avatar = document.querySelector('#avatar'),
        presence = document.querySelector('#presence');

var channel = 'giphy-chat';

// Assign a random avatar in random color
    avatar.className = 'face-' + ((Math.random() * 13 + 1) >>> 0) + ' color-' + ((Math.random() * 10 + 1) >>> 0);

// Hey, when you fork this and try by yourself, please use your own keys! Get your keys at http://admin.pubnub.com
    var p = PUBNUB.init({
        subscribe_key: 'sub-c-182105ac-0001-11e5-8fd4-0619f8945a4f',
        publish_key: 'pub-c-ce04f67b-0f26-43ce-8be2-192e9821d1a3'
    });

p.history({
 channel: channel,
 count: 50,
 callback: function(messages) {
 p.each(messages[0], function(m) {
 var content = '';

if (m.text) {
 content += m.text.replace(/[<>]/ig, '');
 }
 if (m.gif) {
 console.log('giphy added...');
 content += '<img src="' + m.gif + '">'
 }
 content += '';

output.innerHTML = content + output.innerHTML;
            });
        }
    });

var actionUser = '';

p.subscribe({
 channel: channel,
 callback: function(m, e, c) {
 console.log(m, e, c);
 console.log(m);
 actionUser = m.avatar;
 var content = '';

if (m.text) {
 content += m.text.replace(/[<>]/ig, '');
 }
 if (m.gif) {
 console.log('giphy added...');
 content += '<img src="' + m.gif + '">'
 }
 content += '';

output.innerHTML = content + output.innerHTML;
        },
        presence: function(m) {
            console.log(m);
            if (m.occupancy > 1) {
                presence.textContent = m.occupancy + ' people online';
            } else {
                presence.textContent = 'Only you are online';
            }
        }
    });

p.bind('keyup', input, function(e) {
        if ((e.keyCode || e.charCode) === 13) {
            publish();
        }
    });

p.bind('click', button, publish);

function publish() {
        var text = input.value;

if (!text) return;

p.publish({
            channel: channel,
            message: {
                avatar: avatar.className,
                text: text
            },
            callback: function(m) {
                input.value = '';
                console.log(m);
                if (['\giphy'].some(function(v) {
                        return text.toLowerCase().indexOf(v) > 0;
                    })) {
                    console.log('hi');
                    var query = text.replace('\\giphy ', '').split(' ').join('+');
                    console.log(query);
                    getGiphy(query);
                }
            }
        });
    }

function publishGif(gif) {
        p.publish({
            channel: channel,
            message: {
                avatar: avatar.className,
                gif: gif
            }
        });
    }

function getGiphy(q) {
        var url = 'http://api.giphy.com/v1/gifs/translate?api_key=dc6zaTOxFJmzC&s=' + q;

var xhr = new XMLHttpRequest();
        xhr.open('GET', url);
        xhr.onload = function() {
            var json = JSON.parse(xhr.response);
            var gif = json.data.images.fixed_height.url;
            console.log(gif);
            publishGif(gif);
        };
        xhr.onerror = function() {
            console.log(e);
        };
        xhr.send();
    }

})();

编译

CSS

/* BTW, is Material Icons legature working for you all? I saw it wasn't working properly on a screenshot I saw on twitter. */

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
html {
    height: 100%;
}
body {
    padding: 0;
    margin: 0;
    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", "Roboto Light", "Segoe UI Web Light", "Segoe UI Light", "Segoe UI Web Regular", "Segoe UI", Helvetica, Arial, sans-serif;
    background: #f9f9f9;
    color: #333;
}
header {
    background: #fff;
    border-top: 4px solid #ce1126;
    border-bottom-color: #eee;
}
h1,
h2,
h3 {
    margin: 0;
    text-rendering: optimizeLegibility;
}
h1 {
    font-size: 3.4em;
    line-height: 1.6em;
    text-align: center;
    font-family: 'Bangers';
    font-weight: normal;
    text-shadow: #ffbf08 2px 3px 0;
}
input[type=text],
button {
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 1px solid #ddd;
    color: #333;
    font-size: 1em;
    padding: 0.7em 1em;
    margin-bottom: 1em;
    position: relative;
    top: 15px;
}
input[type=text] {
    margin-left: 85px;
    width: calc(100% - 225px);
}
button {
    background: #e6e6e6;
    text-shadow: 0 1px 0 #f3f3f3;
    margin: 0.5em 0 2em 0;
    width: 120px;
}
#chat {
    height: 85px;
    position: relative;
}
#chat i {
    font-size: 75px;
    position: absolute;
}
#main {
    margin: 2em 1em 1em;
}
#main > h2 {
    font-weight: normal;
    font-size: 1.2em;
    margin-bottom: 1.5em;
}
#main > p {
    color: #ce1126;
}
#output p {
    font-size: 1.2em;
    margin: 0.6em;
    position: relative;
}
#output i {
    font-size: 40px;
    position: absolute;
    top: -5px;
}
#output i + span {
    /* Font Icons */
    
    position: relative;
    margin-left: 40px;
}
[class^="face"],
[class*=" face"] {
    font-family: 'Material Icons';
    speak: none;
    font-style: normal;
    font-weight: normal;
    /* Better Font Rendering =========== */
    
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.face-1:before {
    content: "face";
}
.face-2:before {
    content: "favorite";
}
.face-3:before {
    content: "adb";
}
.face-4:before {
    content: "cake";
}
.face-5:before {
    content: "whatshot";
}
.face-6:before {
    content: "invert_colors";
}
.face-7:before {
    content: "stars";
}
.face-8:before {
    content: "mood_bad";
}
.face-9:before {
    content: "mood";
}
.face-10:before {
    content: "star";
}
.face-11:before {
    content: "directions_bike";
}
.face-12:before {
    content: "star_half";
}
.face-13:before {
    content: "school";
}
.color-1 {
    color: #393b79;
}
.color-2 {
    color: #6b6ecf;
}
.color-3 {
    color: #637939;
}
.color-4 {
    color: #b5cf6b;
}
.color-5 {
    color: #8c6d31;
}
.color-6 {
    color: #e7ba52;
}
.color-7 {
    color: #843c39;
}
.color-8 {
    color: #d6616b;
}
.color-9 {
    color: #7b4173;
}
.color-10 {
    color: #ce6dbd;
}

HTML

Giphy Chat powered by PubNub 你输入以\giphy 开头的消息指令，APP返回和内容匹配的Gif动画。

编辑器支持Emmet

快捷键

Giphy Chat powered by PubNub 你输入以\giphy 开头的消息指令，APP返回和内容匹配的Gif动画。

分别使用SVG path和CSS3 motion-path实现的粒子漂浮动画

使用CSS3 PerspectiveTransform实现的逼真3D地球自转动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：