├── .gitignore ├── LICENSE ├── README.md ├── bower.json ├── demo ├── bootstrap │ ├── css │ │ ├── bootstrap-theme.css │ │ ├── bootstrap-theme.min.css │ │ ├── bootstrap.css │ │ └── bootstrap.min.css │ └── font │ │ └── glyphicons-halflings-regular.ttf ├── css │ ├── sample.css │ ├── style.css │ └── theme.css ├── html │ ├── sample001.html │ ├── sample002.html │ ├── sample003.html │ └── sample004.html ├── img │ ├── character_0001.png │ ├── favicon.ico │ ├── icon_pointer.png │ ├── icon_social_circle_sp.png │ ├── icon_social_s_sp.png │ ├── main_logo.png │ ├── pic_coming_soon.png │ ├── sample001 │ │ ├── character_0001.png │ │ ├── character_0002.png │ │ ├── character_0003.png │ │ └── screen_shot.png │ ├── sample002 │ │ ├── character_0001.png │ │ ├── character_0002.png │ │ └── screen_shot.png │ ├── sample003 │ │ └── screen_shot.png │ ├── sample004 │ │ ├── bg_main.jpg │ │ └── screen_shot.png │ ├── screen_shot.png │ └── screen_shot_ogp.png ├── index.html └── js │ └── message_view.js ├── dist ├── message_view.js └── message_view.min.js ├── gulpfile.js ├── package.json └── src ├── css ├── sample.css ├── style.css └── theme.css ├── html ├── index.html ├── sample001.html ├── sample002.html ├── sample003.html └── sample004.html ├── img ├── character_0001.png ├── favicon.ico ├── icon_pointer.png ├── icon_social_circle_sp.png ├── icon_social_s_sp.png ├── main_logo.png ├── pic_coming_soon.png ├── sample001 │ ├── character_0001.png │ ├── character_0002.png │ ├── character_0003.png │ └── screen_shot.png ├── sample002 │ ├── character_0001.png │ ├── character_0002.png │ └── screen_shot.png ├── sample003 │ └── screen_shot.png ├── sample004 │ ├── bg_main.jpg │ └── screen_shot.png ├── screen_shot.png └── screen_shot_ogp.png ├── js └── message_view.js └── scss ├── _common_inc.scss ├── _mixin-style.scss ├── _reset.scss ├── _setting.scss ├── sample.scss ├── style.scss └── theme.scss /.gitignore: -------------------------------------------------------------------------------- 1 | .sass-cache/ 2 | bower_components/ 3 | node_modules/ 4 | *.idea 5 | *.iml 6 | *.DS_Store 7 | src/html/*.php -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 Daisuke Takayama 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # MessageViewJS 2 | Talking Scene JavaScript Library 3 | HTML5, WebGame etc... 4 | 5 | ![](https://github.com/webcyou/MessageViewJS/blob/master/demo/img/screen_shot.png) 6 | 7 | ### これは何? 8 | 「MessageViewJS」はゲーム内でよくある会話シーンを簡単実装できる、JavaScriptライブラリです 9 | 10 | 11 | ### demo 12 | [デモページ](http://webcyou.com/message_view_js/demo/) 13 | 14 | ### Install 15 | 16 | #### Bower 17 | ``` 18 | bower install message_view.js 19 | ``` 20 | 21 | #### npm 22 | ``` 23 | npm install message-view-js 24 | ``` 25 | 26 | ### The Basics 27 | 28 | ``` 29 | 30 | 31 | 32 | 43 | 44 | 45 | ``` 46 | 47 | ### Multi 48 | 49 | ``` 50 | var message = new MessageViewer({ 51 | "data": [{ 52 | "name": "生方 すみれ", 53 | "message": "はじめまして!", 54 | "img_url": "/img/character_0001.png" 55 | }, 56 | { 57 | "message": "こんにちは!" 58 | }] 59 | }); 60 | ``` 61 | 62 | ### Character Change 63 | ``` 64 | var message = new MessageViewer({ 65 | "data": [{ 66 | "name": "生方 すみれ", 67 | "message": "はじめまして!", 68 | "img_url": "/img/character_0001.png" 69 | }, 70 | { 71 | "name": "高山 大介", 72 | "message": "こんにちは!" 73 | "img_url": "/img/character_0002.png" 74 | }] 75 | }); 76 | ``` 77 | 78 | ### Multi Class Change 79 | 80 | ``` 81 | var message = new MessageViewer({ 82 | "data": [{ 83 | "side_class": "right", 84 | "name": "生方 すみれ", 85 | "message": "はじめまして!", 86 | "img_url": "/img/character_0001.png" 87 | }, 88 | { 89 | "side_class": "left", 90 | "name": "高山 大介", 91 | "message": "こんにちは!" 92 | "img_url": "/img/character_0002.png" 93 | }, 94 | { 95 | "side_class": "right", 96 | "name": "生方 すみれ", 97 | "message": "今日はいい天気ですね!", 98 | "img_url": "/img/character_0001.png" 99 | }] 100 | }); 101 | ``` 102 | 103 | ### CallBack Function 104 | 105 | ``` 106 | var message = new MessageViewer({ 107 | "data": [{ 108 | "name": "生方 すみれ", 109 | "message": "はじめまして!", 110 | "img_url": "/img/character_0001.png" 111 | }] 112 | }, function() { 113 | console.log("callBack"); 114 | }); 115 | ``` 116 | 117 | ### Options 118 | 119 | ``` 120 | var message = new MessageViewer({ 121 | "data": [{ 122 | "name": "生方 すみれ", 123 | "message": "はじめまして!", 124 | "img_url": "/img/character_0001.png" 125 | }], 126 | "option": { 127 | "loop": true, 128 | "speed": "fast" 129 | } 130 | }); 131 | ``` 132 | 133 | # Options Reference 134 | 135 | | OptionName | DefaultValue | SetValue | OptionDetail| 136 | | --------------- |:---------------:| -------------------- | -------:| 137 | | view | .messageView#default | className, idName, element | MessageViewの大枠となる要素 | 138 | | contents | .messageView#default .mv-contents | className, idName, element | MessageViewのcontentsとなる要素 | 139 | | character | .messageView#default .mv-contents .mv-image.character | className, idName, element|MessageViewのcharacterとなる要素| 140 | | characterImg | .messageView#default .mv-contents .mv-image.character img| img element|MessageViewのcharacterのimg要素| 141 | | messageView | .messageView#default .mv-contents .mv-comment|className, idName, element|メッセージ表示する親要素| 142 | | message | .messageView#default .mv-contents .mv-comment .val|className, idName, element|メッセージを挿入する要素| 143 | | name | .messageView#default .mv-contents .mv-name|className, idName, element|characterの名前表示する要素| 144 | | pointer | .messageView#default .mv-contents .mv-comment .pointer|className, idName, element|メッセージのポインタ要素| 145 | | messageOpenClass | in |className ( string )|MessageViewを表示する際、追加するクラス名| 146 | | messageCloseClass | hide |className ( string )|MessageViewを非表示する際(終了後)、追加するクラス名| 147 | | page | 0 |Number|Messageを開始するページナンバー| 148 | | speed | normal |"normal", "fast", "slow", Number|Messageを表示するスピード| 149 | | ignoreSkip | false |boolean|Messageのスキップを無効| 150 | | loop | false |boolean|Messageをループさせるか| 151 | | isPointer | false |boolean| Messageのポインター表示 | 152 | | isClose | true |boolean| MessageView終了後のView表示 | 153 | 154 | ### Author 155 | Daisuke Takayama 156 | [Web帳](http://www.webcyou.com/) 157 | 158 | 159 | ### License 160 | Copyright (c) 2015 Daisuke Takayama 161 | Released under the [MIT license](http://opensource.org/licenses/mit-license.php) 162 | 163 | 164 | ### Thanks 165 | 素材提供:株式会社ブリリアントサービス 166 | 『星宝転生ジュエルセイバー』[http://www.jewel-s.jp/](http://www.jewel-s.jp/) 167 | -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "message_view", 3 | "version": "1.0.2", 4 | "main": "dist/message_view.js", 5 | "authors": [ 6 | "daisuke.takayama" 7 | ], 8 | "license": "MIT", 9 | "ignore": [ 10 | "**/.*", 11 | "node_modules", 12 | "bower_components", 13 | "test", 14 | "tests" 15 | ], 16 | "dependencies": { 17 | "bootstrap": "~3.3.5" 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /demo/bootstrap/css/bootstrap-theme.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * Bootstrap v3.3.5 (http://getbootstrap.com) 3 | * Copyright 2011-2015 Twitter, Inc. 4 | * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) 5 | */.btn-danger,.btn-default,.btn-info,.btn-primary,.btn-success,.btn-warning{text-shadow:0 -1px 0 rgba(0,0,0,.2);-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 1px 1px rgba(0,0,0,.075)}.btn-danger.active,.btn-danger:active,.btn-default.active,.btn-default:active,.btn-info.active,.btn-info:active,.btn-primary.active,.btn-primary:active,.btn-success.active,.btn-success:active,.btn-warning.active,.btn-warning:active{-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}.btn-danger.disabled,.btn-danger[disabled],.btn-default.disabled,.btn-default[disabled],.btn-info.disabled,.btn-info[disabled],.btn-primary.disabled,.btn-primary[disabled],.btn-success.disabled,.btn-success[disabled],.btn-warning.disabled,.btn-warning[disabled],fieldset[disabled] .btn-danger,fieldset[disabled] .btn-default,fieldset[disabled] .btn-info,fieldset[disabled] .btn-primary,fieldset[disabled] .btn-success,fieldset[disabled] .btn-warning{-webkit-box-shadow:none;box-shadow:none}.btn-danger .badge,.btn-default .badge,.btn-info .badge,.btn-primary .badge,.btn-success .badge,.btn-warning .badge{text-shadow:none}.btn.active,.btn:active{background-image:none}.btn-default{text-shadow:0 1px 0 #fff;background-image:-webkit-linear-gradient(top,#fff 0,#e0e0e0 100%);background-image:-o-linear-gradient(top,#fff 0,#e0e0e0 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#e0e0e0));background-image:linear-gradient(to bottom,#fff 0,#e0e0e0 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe0e0e0', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);background-repeat:repeat-x;border-color:#dbdbdb;border-color:#ccc}.btn-default:focus,.btn-default:hover{background-color:#e0e0e0;background-position:0 -15px}.btn-default.active,.btn-default:active{background-color:#e0e0e0;border-color:#dbdbdb}.btn-default.disabled,.btn-default.disabled.active,.btn-default.disabled.focus,.btn-default.disabled:active,.btn-default.disabled:focus,.btn-default.disabled:hover,.btn-default[disabled],.btn-default[disabled].active,.btn-default[disabled].focus,.btn-default[disabled]:active,.btn-default[disabled]:focus,.btn-default[disabled]:hover,fieldset[disabled] .btn-default,fieldset[disabled] .btn-default.active,fieldset[disabled] .btn-default.focus,fieldset[disabled] .btn-default:active,fieldset[disabled] .btn-default:focus,fieldset[disabled] .btn-default:hover{background-color:#e0e0e0;background-image:none}.btn-primary{background-image:-webkit-linear-gradient(top,#337ab7 0,#265a88 100%);background-image:-o-linear-gradient(top,#337ab7 0,#265a88 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#337ab7),to(#265a88));background-image:linear-gradient(to bottom,#337ab7 0,#265a88 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff265a88', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);background-repeat:repeat-x;border-color:#245580}.btn-primary:focus,.btn-primary:hover{background-color:#265a88;background-position:0 -15px}.btn-primary.active,.btn-primary:active{background-color:#265a88;border-color:#245580}.btn-primary.disabled,.btn-primary.disabled.active,.btn-primary.disabled.focus,.btn-primary.disabled:active,.btn-primary.disabled:focus,.btn-primary.disabled:hover,.btn-primary[disabled],.btn-primary[disabled].active,.btn-primary[disabled].focus,.btn-primary[disabled]:active,.btn-primary[disabled]:focus,.btn-primary[disabled]:hover,fieldset[disabled] .btn-primary,fieldset[disabled] .btn-primary.active,fieldset[disabled] .btn-primary.focus,fieldset[disabled] .btn-primary:active,fieldset[disabled] .btn-primary:focus,fieldset[disabled] .btn-primary:hover{background-color:#265a88;background-image:none}.btn-success{background-image:-webkit-linear-gradient(top,#5cb85c 0,#419641 100%);background-image:-o-linear-gradient(top,#5cb85c 0,#419641 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#5cb85c),to(#419641));background-image:linear-gradient(to bottom,#5cb85c 0,#419641 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff419641', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);background-repeat:repeat-x;border-color:#3e8f3e}.btn-success:focus,.btn-success:hover{background-color:#419641;background-position:0 -15px}.btn-success.active,.btn-success:active{background-color:#419641;border-color:#3e8f3e}.btn-success.disabled,.btn-success.disabled.active,.btn-success.disabled.focus,.btn-success.disabled:active,.btn-success.disabled:focus,.btn-success.disabled:hover,.btn-success[disabled],.btn-success[disabled].active,.btn-success[disabled].focus,.btn-success[disabled]:active,.btn-success[disabled]:focus,.btn-success[disabled]:hover,fieldset[disabled] .btn-success,fieldset[disabled] .btn-success.active,fieldset[disabled] .btn-success.focus,fieldset[disabled] .btn-success:active,fieldset[disabled] .btn-success:focus,fieldset[disabled] .btn-success:hover{background-color:#419641;background-image:none}.btn-info{background-image:-webkit-linear-gradient(top,#5bc0de 0,#2aabd2 100%);background-image:-o-linear-gradient(top,#5bc0de 0,#2aabd2 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#5bc0de),to(#2aabd2));background-image:linear-gradient(to bottom,#5bc0de 0,#2aabd2 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2aabd2', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);background-repeat:repeat-x;border-color:#28a4c9}.btn-info:focus,.btn-info:hover{background-color:#2aabd2;background-position:0 -15px}.btn-info.active,.btn-info:active{background-color:#2aabd2;border-color:#28a4c9}.btn-info.disabled,.btn-info.disabled.active,.btn-info.disabled.focus,.btn-info.disabled:active,.btn-info.disabled:focus,.btn-info.disabled:hover,.btn-info[disabled],.btn-info[disabled].active,.btn-info[disabled].focus,.btn-info[disabled]:active,.btn-info[disabled]:focus,.btn-info[disabled]:hover,fieldset[disabled] .btn-info,fieldset[disabled] .btn-info.active,fieldset[disabled] .btn-info.focus,fieldset[disabled] .btn-info:active,fieldset[disabled] .btn-info:focus,fieldset[disabled] .btn-info:hover{background-color:#2aabd2;background-image:none}.btn-warning{background-image:-webkit-linear-gradient(top,#f0ad4e 0,#eb9316 100%);background-image:-o-linear-gradient(top,#f0ad4e 0,#eb9316 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#f0ad4e),to(#eb9316));background-image:linear-gradient(to bottom,#f0ad4e 0,#eb9316 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffeb9316', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);background-repeat:repeat-x;border-color:#e38d13}.btn-warning:focus,.btn-warning:hover{background-color:#eb9316;background-position:0 -15px}.btn-warning.active,.btn-warning:active{background-color:#eb9316;border-color:#e38d13}.btn-warning.disabled,.btn-warning.disabled.active,.btn-warning.disabled.focus,.btn-warning.disabled:active,.btn-warning.disabled:focus,.btn-warning.disabled:hover,.btn-warning[disabled],.btn-warning[disabled].active,.btn-warning[disabled].focus,.btn-warning[disabled]:active,.btn-warning[disabled]:focus,.btn-warning[disabled]:hover,fieldset[disabled] .btn-warning,fieldset[disabled] .btn-warning.active,fieldset[disabled] .btn-warning.focus,fieldset[disabled] .btn-warning:active,fieldset[disabled] .btn-warning:focus,fieldset[disabled] .btn-warning:hover{background-color:#eb9316;background-image:none}.btn-danger{background-image:-webkit-linear-gradient(top,#d9534f 0,#c12e2a 100%);background-image:-o-linear-gradient(top,#d9534f 0,#c12e2a 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#d9534f),to(#c12e2a));background-image:linear-gradient(to bottom,#d9534f 0,#c12e2a 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc12e2a', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);background-repeat:repeat-x;border-color:#b92c28}.btn-danger:focus,.btn-danger:hover{background-color:#c12e2a;background-position:0 -15px}.btn-danger.active,.btn-danger:active{background-color:#c12e2a;border-color:#b92c28}.btn-danger.disabled,.btn-danger.disabled.active,.btn-danger.disabled.focus,.btn-danger.disabled:active,.btn-danger.disabled:focus,.btn-danger.disabled:hover,.btn-danger[disabled],.btn-danger[disabled].active,.btn-danger[disabled].focus,.btn-danger[disabled]:active,.btn-danger[disabled]:focus,.btn-danger[disabled]:hover,fieldset[disabled] .btn-danger,fieldset[disabled] .btn-danger.active,fieldset[disabled] .btn-danger.focus,fieldset[disabled] .btn-danger:active,fieldset[disabled] .btn-danger:focus,fieldset[disabled] .btn-danger:hover{background-color:#c12e2a;background-image:none}.img-thumbnail,.thumbnail{-webkit-box-shadow:0 1px 2px rgba(0,0,0,.075);box-shadow:0 1px 2px rgba(0,0,0,.075)}.dropdown-menu>li>a:focus,.dropdown-menu>li>a:hover{background-color:#e8e8e8;background-image:-webkit-linear-gradient(top,#f5f5f5 0,#e8e8e8 100%);background-image:-o-linear-gradient(top,#f5f5f5 0,#e8e8e8 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#f5f5f5),to(#e8e8e8));background-image:linear-gradient(to bottom,#f5f5f5 0,#e8e8e8 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);background-repeat:repeat-x}.dropdown-menu>.active>a,.dropdown-menu>.active>a:focus,.dropdown-menu>.active>a:hover{background-color:#2e6da4;background-image:-webkit-linear-gradient(top,#337ab7 0,#2e6da4 100%);background-image:-o-linear-gradient(top,#337ab7 0,#2e6da4 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#337ab7),to(#2e6da4));background-image:linear-gradient(to bottom,#337ab7 0,#2e6da4 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0);background-repeat:repeat-x}.navbar-default{background-image:-webkit-linear-gradient(top,#fff 0,#f8f8f8 100%);background-image:-o-linear-gradient(top,#fff 0,#f8f8f8 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#f8f8f8));background-image:linear-gradient(to bottom,#fff 0,#f8f8f8 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff8f8f8', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);background-repeat:repeat-x;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 1px 5px rgba(0,0,0,.075);box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 1px 5px rgba(0,0,0,.075)}.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>.open>a{background-image:-webkit-linear-gradient(top,#dbdbdb 0,#e2e2e2 100%);background-image:-o-linear-gradient(top,#dbdbdb 0,#e2e2e2 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#dbdbdb),to(#e2e2e2));background-image:linear-gradient(to bottom,#dbdbdb 0,#e2e2e2 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdbdbdb', endColorstr='#ffe2e2e2', GradientType=0);background-repeat:repeat-x;-webkit-box-shadow:inset 0 3px 9px rgba(0,0,0,.075);box-shadow:inset 0 3px 9px rgba(0,0,0,.075)}.navbar-brand,.navbar-nav>li>a{text-shadow:0 1px 0 rgba(255,255,255,.25)}.navbar-inverse{background-image:-webkit-linear-gradient(top,#3c3c3c 0,#222 100%);background-image:-o-linear-gradient(top,#3c3c3c 0,#222 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#3c3c3c),to(#222));background-image:linear-gradient(to bottom,#3c3c3c 0,#222 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3c3c3c', endColorstr='#ff222222', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);background-repeat:repeat-x;border-radius:4px}.navbar-inverse .navbar-nav>.active>a,.navbar-inverse .navbar-nav>.open>a{background-image:-webkit-linear-gradient(top,#080808 0,#0f0f0f 100%);background-image:-o-linear-gradient(top,#080808 0,#0f0f0f 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#080808),to(#0f0f0f));background-image:linear-gradient(to bottom,#080808 0,#0f0f0f 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff080808', endColorstr='#ff0f0f0f', GradientType=0);background-repeat:repeat-x;-webkit-box-shadow:inset 0 3px 9px rgba(0,0,0,.25);box-shadow:inset 0 3px 9px rgba(0,0,0,.25)}.navbar-inverse .navbar-brand,.navbar-inverse .navbar-nav>li>a{text-shadow:0 -1px 0 rgba(0,0,0,.25)}.navbar-fixed-bottom,.navbar-fixed-top,.navbar-static-top{border-radius:0}@media (max-width:767px){.navbar .navbar-nav .open .dropdown-menu>.active>a,.navbar .navbar-nav .open .dropdown-menu>.active>a:focus,.navbar .navbar-nav .open .dropdown-menu>.active>a:hover{color:#fff;background-image:-webkit-linear-gradient(top,#337ab7 0,#2e6da4 100%);background-image:-o-linear-gradient(top,#337ab7 0,#2e6da4 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#337ab7),to(#2e6da4));background-image:linear-gradient(to bottom,#337ab7 0,#2e6da4 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0);background-repeat:repeat-x}}.alert{text-shadow:0 1px 0 rgba(255,255,255,.2);-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 1px 2px rgba(0,0,0,.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 1px 2px rgba(0,0,0,.05)}.alert-success{background-image:-webkit-linear-gradient(top,#dff0d8 0,#c8e5bc 100%);background-image:-o-linear-gradient(top,#dff0d8 0,#c8e5bc 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#dff0d8),to(#c8e5bc));background-image:linear-gradient(to bottom,#dff0d8 0,#c8e5bc 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffc8e5bc', GradientType=0);background-repeat:repeat-x;border-color:#b2dba1}.alert-info{background-image:-webkit-linear-gradient(top,#d9edf7 0,#b9def0 100%);background-image:-o-linear-gradient(top,#d9edf7 0,#b9def0 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#d9edf7),to(#b9def0));background-image:linear-gradient(to bottom,#d9edf7 0,#b9def0 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffb9def0', GradientType=0);background-repeat:repeat-x;border-color:#9acfea}.alert-warning{background-image:-webkit-linear-gradient(top,#fcf8e3 0,#f8efc0 100%);background-image:-o-linear-gradient(top,#fcf8e3 0,#f8efc0 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#fcf8e3),to(#f8efc0));background-image:linear-gradient(to bottom,#fcf8e3 0,#f8efc0 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fff8efc0', GradientType=0);background-repeat:repeat-x;border-color:#f5e79e}.alert-danger{background-image:-webkit-linear-gradient(top,#f2dede 0,#e7c3c3 100%);background-image:-o-linear-gradient(top,#f2dede 0,#e7c3c3 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#f2dede),to(#e7c3c3));background-image:linear-gradient(to bottom,#f2dede 0,#e7c3c3 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffe7c3c3', GradientType=0);background-repeat:repeat-x;border-color:#dca7a7}.progress{background-image:-webkit-linear-gradient(top,#ebebeb 0,#f5f5f5 100%);background-image:-o-linear-gradient(top,#ebebeb 0,#f5f5f5 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#ebebeb),to(#f5f5f5));background-image:linear-gradient(to bottom,#ebebeb 0,#f5f5f5 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffebebeb', endColorstr='#fff5f5f5', GradientType=0);background-repeat:repeat-x}.progress-bar{background-image:-webkit-linear-gradient(top,#337ab7 0,#286090 100%);background-image:-o-linear-gradient(top,#337ab7 0,#286090 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#337ab7),to(#286090));background-image:linear-gradient(to bottom,#337ab7 0,#286090 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff286090', GradientType=0);background-repeat:repeat-x}.progress-bar-success{background-image:-webkit-linear-gradient(top,#5cb85c 0,#449d44 100%);background-image:-o-linear-gradient(top,#5cb85c 0,#449d44 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#5cb85c),to(#449d44));background-image:linear-gradient(to bottom,#5cb85c 0,#449d44 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff449d44', GradientType=0);background-repeat:repeat-x}.progress-bar-info{background-image:-webkit-linear-gradient(top,#5bc0de 0,#31b0d5 100%);background-image:-o-linear-gradient(top,#5bc0de 0,#31b0d5 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#5bc0de),to(#31b0d5));background-image:linear-gradient(to bottom,#5bc0de 0,#31b0d5 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff31b0d5', GradientType=0);background-repeat:repeat-x}.progress-bar-warning{background-image:-webkit-linear-gradient(top,#f0ad4e 0,#ec971f 100%);background-image:-o-linear-gradient(top,#f0ad4e 0,#ec971f 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#f0ad4e),to(#ec971f));background-image:linear-gradient(to bottom,#f0ad4e 0,#ec971f 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffec971f', GradientType=0);background-repeat:repeat-x}.progress-bar-danger{background-image:-webkit-linear-gradient(top,#d9534f 0,#c9302c 100%);background-image:-o-linear-gradient(top,#d9534f 0,#c9302c 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#d9534f),to(#c9302c));background-image:linear-gradient(to bottom,#d9534f 0,#c9302c 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc9302c', GradientType=0);background-repeat:repeat-x}.progress-bar-striped{background-image:-webkit-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:-o-linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);background-image:linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent)}.list-group{border-radius:4px;-webkit-box-shadow:0 1px 2px rgba(0,0,0,.075);box-shadow:0 1px 2px rgba(0,0,0,.075)}.list-group-item.active,.list-group-item.active:focus,.list-group-item.active:hover{text-shadow:0 -1px 0 #286090;background-image:-webkit-linear-gradient(top,#337ab7 0,#2b669a 100%);background-image:-o-linear-gradient(top,#337ab7 0,#2b669a 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#337ab7),to(#2b669a));background-image:linear-gradient(to bottom,#337ab7 0,#2b669a 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2b669a', GradientType=0);background-repeat:repeat-x;border-color:#2b669a}.list-group-item.active .badge,.list-group-item.active:focus .badge,.list-group-item.active:hover .badge{text-shadow:none}.panel{-webkit-box-shadow:0 1px 2px rgba(0,0,0,.05);box-shadow:0 1px 2px rgba(0,0,0,.05)}.panel-default>.panel-heading{background-image:-webkit-linear-gradient(top,#f5f5f5 0,#e8e8e8 100%);background-image:-o-linear-gradient(top,#f5f5f5 0,#e8e8e8 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#f5f5f5),to(#e8e8e8));background-image:linear-gradient(to bottom,#f5f5f5 0,#e8e8e8 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);background-repeat:repeat-x}.panel-primary>.panel-heading{background-image:-webkit-linear-gradient(top,#337ab7 0,#2e6da4 100%);background-image:-o-linear-gradient(top,#337ab7 0,#2e6da4 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#337ab7),to(#2e6da4));background-image:linear-gradient(to bottom,#337ab7 0,#2e6da4 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff2e6da4', GradientType=0);background-repeat:repeat-x}.panel-success>.panel-heading{background-image:-webkit-linear-gradient(top,#dff0d8 0,#d0e9c6 100%);background-image:-o-linear-gradient(top,#dff0d8 0,#d0e9c6 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#dff0d8),to(#d0e9c6));background-image:linear-gradient(to bottom,#dff0d8 0,#d0e9c6 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffd0e9c6', GradientType=0);background-repeat:repeat-x}.panel-info>.panel-heading{background-image:-webkit-linear-gradient(top,#d9edf7 0,#c4e3f3 100%);background-image:-o-linear-gradient(top,#d9edf7 0,#c4e3f3 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#d9edf7),to(#c4e3f3));background-image:linear-gradient(to bottom,#d9edf7 0,#c4e3f3 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffc4e3f3', GradientType=0);background-repeat:repeat-x}.panel-warning>.panel-heading{background-image:-webkit-linear-gradient(top,#fcf8e3 0,#faf2cc 100%);background-image:-o-linear-gradient(top,#fcf8e3 0,#faf2cc 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#fcf8e3),to(#faf2cc));background-image:linear-gradient(to bottom,#fcf8e3 0,#faf2cc 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fffaf2cc', GradientType=0);background-repeat:repeat-x}.panel-danger>.panel-heading{background-image:-webkit-linear-gradient(top,#f2dede 0,#ebcccc 100%);background-image:-o-linear-gradient(top,#f2dede 0,#ebcccc 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#f2dede),to(#ebcccc));background-image:linear-gradient(to bottom,#f2dede 0,#ebcccc 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffebcccc', GradientType=0);background-repeat:repeat-x}.well{background-image:-webkit-linear-gradient(top,#e8e8e8 0,#f5f5f5 100%);background-image:-o-linear-gradient(top,#e8e8e8 0,#f5f5f5 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#e8e8e8),to(#f5f5f5));background-image:linear-gradient(to bottom,#e8e8e8 0,#f5f5f5 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe8e8e8', endColorstr='#fff5f5f5', GradientType=0);background-repeat:repeat-x;border-color:#dcdcdc;-webkit-box-shadow:inset 0 1px 3px rgba(0,0,0,.05),0 1px 0 rgba(255,255,255,.1);box-shadow:inset 0 1px 3px rgba(0,0,0,.05),0 1px 0 rgba(255,255,255,.1)} -------------------------------------------------------------------------------- /demo/bootstrap/font/glyphicons-halflings-regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webcyou/MessageViewJS/0f0be013ab3a79f3252166905bb18941146b243e/demo/bootstrap/font/glyphicons-halflings-regular.ttf -------------------------------------------------------------------------------- /demo/css/sample.css: -------------------------------------------------------------------------------- 1 | section#sample.sample001 .messageView,section#sample.sample002 .messageView{position:relative;width:700px;height:20pc;margin:5pc auto 20px;cursor:pointer}section#sample.sample001 .messageView .mv-contents,section#sample.sample002 .messageView .mv-contents{padding:5pc 0 0}section#sample.sample001 .messageView .mv-contents .mv-name,section#sample.sample002 .messageView .mv-contents .mv-name{position:absolute;top:93px;left:-40px;width:300px;padding:6px 10px;background:rgba(47,109,174,.8);background:-webkit-gradient(linear,left top,right top,from(rgba(47,109,174,0)),color-stop(.1,rgba(47,109,174,.8)),color-stop(.9,rgba(47,109,174,.8)),to(rgba(47,109,174,0)));color:#fff;font-weight:700;font-size:22px;text-align:center;text-shadow:#000 1px 1px 1px;text-shadow:#000 1px 1px 3px 1px;z-index:20}section#sample.sample001 .messageView .mv-contents .mv-comment,section#sample.sample002 .messageView .mv-contents .mv-comment{position:relative;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;margin-top:50px;height:10pc;padding:20px 30px 10px;background:rgba(33,54,94,.7);border-radius:8px;color:#fff;z-index:10}section#sample.sample001 .messageView .mv-contents .mv-comment .pointer,section#sample.sample002 .messageView .mv-contents .mv-comment .pointer{position:absolute;right:20px;bottom:0;width:20px;height:34px;background:url(../img//icon_pointer.png) no-repeat;-moz-background-size:20px auto;-o-background-size:20px auto;-webkit-background-size:20px auto;background-size:20px auto;-moz-animation:pointer-anime 1s ease-in-out infinite;-webkit-animation:pointer-anime 1s ease-in-out infinite;animation:pointer-anime 1s ease-in-out infinite}section#sample.sample001 .messageView .mv-contents .mv-image.character,section#sample.sample002 .messageView .mv-contents .mv-image.character{position:absolute;right:-62px;top:-111px;z-index:1}section#sample.sample001 .messageView .mv-contents .mv-image.character img,section#sample.sample002 .messageView .mv-contents .mv-image.character img{display:block;width:300px}section#sample.sample001 .messageView.left .mv-name,section#sample.sample002 .messageView.left .mv-name{left:auto;right:-23px}section#sample.sample001 .messageView.left .mv-contents .mv-image.character,section#sample.sample002 .messageView.left .mv-contents .mv-image.character{right:auto;left:-24px}section#sample.sample001 .messageView.center .mv-contents .mv-image.character,section#sample.sample002 .messageView.center .mv-contents .mv-image.character{right:auto;left:50%;margin-left:-150px;-moz-animation:character-anime 3s ease-in infinite;-webkit-animation:character-anime 3s ease-in infinite;animation:character-anime 3s ease-in infinite}@media screen and (max-width:768px){section#sample.sample001 .messageView,section#sample.sample002 .messageView{width:auto;height:auto;margin:0 auto 20px}section#sample.sample001 .messageView .mv-contents .mv-name,section#sample.sample002 .messageView .mv-contents .mv-name{top:102px;left:-11px;width:150px;font-size:15px}section#sample.sample001 .messageView .mv-contents .mv-image.character,section#sample.sample002 .messageView .mv-contents .mv-image.character{right:-15px;top:-1pc}section#sample.sample001 .messageView .mv-contents .mv-image.character img,section#sample.sample002 .messageView .mv-contents .mv-image.character img{width:210px}section#sample.sample001 .messageView .mv-contents .mv-comment,section#sample.sample002 .messageView .mv-contents .mv-comment{height:137px}section#sample.sample001 .messageView .mv-contents .mv-comment .val,section#sample.sample002 .messageView .mv-contents .mv-comment .val{font-size:14px}section#sample.sample001 .messageView .mv-contents .mv-comment .pointer,section#sample.sample002 .messageView .mv-contents .mv-comment .pointer{right:1pc;bottom:-10px;width:15px;height:34px;-moz-background-size:15px auto;-o-background-size:15px auto;-webkit-background-size:15px auto;background-size:15px auto}section#sample.sample001 .messageView.left .mv-name,section#sample.sample002 .messageView.left .mv-name{left:auto;right:-9px}section#sample.sample001 .messageView.left .mv-contents .mv-image.character,section#sample.sample002 .messageView.left .mv-contents .mv-image.character{right:auto;left:-24px}section#sample.sample001 .messageView.center .mv-contents .mv-image.character,section#sample.sample002 .messageView.center .mv-contents .mv-image.character{margin-left:-75pt}section#sample.sample001 .stage-buttons .btn,section#sample.sample002 .stage-buttons .btn{margin-bottom:10px}}@-webkit-keyframes character-anime{0%,100%,30%{-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}20%{-moz-transform:translate3d(0,-18px,0);-ms-transform:translate3d(0,-18px,0);-webkit-transform:translate3d(0,-18px,0);transform:translate3d(0,-18px,0)}}section#sample.sample002 .messageView.flash .effect{position:absolute;top:-110px;left:0;display:block;width:100%;height:25pc;background:#fff;-moz-animation:flash-anime 3s ease-in 1;-webkit-animation:flash-anime 3s ease-in 1;animation:flash-anime 3s ease-in 1;opacity:0}@-webkit-keyframes flash-anime{0%{opacity:0}20%{opacity:.5;z-index:100}100%,35%,70%{opacity:0;z-index:100}50%{opacity:.9;z-index:100}}section#sample.sample003 .messageView{position:relative;height:20pc;margin-bottom:20px;background:#000}section#sample.sample003 .messageView .mv-comment{width:630px;margin:0 auto}section#sample.sample003 .messageView .mv-comment .val{font-size:90px;font-weight:700;color:red;line-height:20pc}@media screen and (max-width:768px){section#sample.sample003 .messageView{width:auto;height:auto;margin:0 auto 20px}section#sample.sample003 .messageView .mv-comment{width:280px}section#sample.sample003 .messageView .mv-comment .val{font-size:40px}section#sample.sample003 .stage-buttons .btn{margin-bottom:10px}}section#sample.sample004 .messageView{position:relative;height:500px;margin-bottom:20px;background:url(../img/sample004/bg_main.jpg) no-repeat;-moz-background-size:100% auto;-o-background-size:100% auto;-webkit-background-size:100% auto;background-size:100% auto}section#sample.sample004 .messageView .mv-comment{padding:40px}section#sample.sample004 .messageView .mv-comment .val{font-size:24px;color:#fff}section#sample.sample004 .messageView .mv-comment .pointer{position:absolute;right:20px;bottom:10px;width:20px;height:34px;background:url(../img/icon_pointer.png) no-repeat;-moz-background-size:20px auto;-o-background-size:20px auto;-webkit-background-size:20px auto;background-size:20px auto;-moz-animation:pointer-anime 1s ease-in-out infinite;-webkit-animation:pointer-anime 1s ease-in-out infinite;animation:pointer-anime 1s ease-in-out infinite}@media screen and (max-width:768px){section#sample.sample004 .messageView{width:auto;height:auto;min-height:200px;margin:0 auto 20px}section#sample.sample004 .messageView .mv-comment{padding:8px}section#sample.sample004 .messageView .mv-comment .val{font-size:9pt}section#sample.sample004 .messageView .mv-comment .pointer{bottom:0;width:15px;height:34px;-moz-background-size:15px auto;-o-background-size:15px auto;-webkit-background-size:15px auto;background-size:15px auto}section#sample.sample004 .stage-buttons .btn{margin-bottom:10px}} -------------------------------------------------------------------------------- /demo/css/style.css: -------------------------------------------------------------------------------- 1 | a,hr{margin:0;padding:0}article,footer,header,hgroup,hr,menu,nav,section{display:block}.socialLinkList::after,footer::after{content:"";clear:both}address,article,audio,b,body,canvas,caption,dd,div,dl,dt,em,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,label,li,menu,nav,object,ol,p,pre,section,small,span,strong,table,tbody,td,tfoot,th,thead,time,tr,ul,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:0 0}body{line-height:1}ul{list-style:none}a{font-size:100%;vertical-align:baseline;background:0 0}table{border-collapse:collapse;border-spacing:0}b,em{font-style:normal}img{vertical-align:top}hr{height:1px;border:0;outline:0}input,select{vertical-align:middle}p a{position:relative;font-size:18px;text-align:center}.jumbotron.top{overflow:hidden}section#top.top .messageView{position:relative;width:700px;height:20pc;margin:5pc auto 20px;cursor:pointer}section#top.top .messageView .mv-contents{padding:5pc 0 0}section#top.top .messageView .mv-contents .mv-name{position:absolute;top:93px;left:-40px;width:300px;padding:6px 10px;background:rgba(47,109,174,.8);background:-webkit-gradient(linear,left top,right top,from(rgba(47,109,174,0)),color-stop(.1,rgba(47,109,174,.8)),color-stop(.9,rgba(47,109,174,.8)),to(rgba(47,109,174,0)));color:#fff;font-weight:700;font-size:22px;text-align:center;text-shadow:#000 1px 1px 1px;text-shadow:#000 1px 1px 3px 1px;z-index:20}section#top.top .messageView .mv-contents .mv-comment{position:relative;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;margin-top:50px;height:10pc;padding:20px 30px 10px;background:rgba(33,54,94,.7);border-radius:8px;color:#fff;z-index:10}section#top.top .messageView .mv-contents .mv-comment .pointer{position:absolute;right:20px;bottom:0;width:20px;height:34px;background:url(../img//icon_pointer.png) no-repeat;-moz-background-size:20px auto;-o-background-size:20px auto;-webkit-background-size:20px auto;background-size:20px auto;-moz-animation:pointer-anime 1s ease-in infinite;-webkit-animation:pointer-anime 1s ease-in infinite;animation:pointer-anime 1s ease-in infinite}section#top.top .messageView .mv-contents .mv-image.character{position:absolute;right:-62px;top:-111px;z-index:1}section#top.top .messageView .mv-contents .mv-image.character img{display:block;width:300px}@media screen and (max-width:768px){section#top.top .messageView{width:auto;height:auto;margin:0 auto 20px}section#top.top .messageView .mv-contents .mv-name{top:102px;left:-11px;width:150px;font-size:15px}section#top.top .messageView .mv-contents .mv-image.character{right:-15px;top:-1pc}section#top.top .messageView .mv-contents .mv-image.character img{width:210px}section#top.top .messageView .mv-contents .mv-comment{height:137px}section#top.top .messageView .mv-contents .mv-comment .val{font-size:14px}section#top.top .messageView .mv-contents .mv-comment .pointer{right:1pc;bottom:-10px;width:15px;height:34px;-moz-background-size:15px auto;-o-background-size:15px auto;-webkit-background-size:15px auto;background-size:15px auto}section#top.top .stage-buttons .btn{margin-bottom:10px}section#top.top .socialLinkList.share{margin-top:30px}section#top.top .optionsTable{overflow:scroll}h2.mainTitle{margin-top:45px}h2.mainTitle img{width:250px}h2.mainDetail{font-size:18px}}@-webkit-keyframes pointer-anime{0%{-moz-transform:translate3d(0,0,0) scale(1);-ms-transform:translate3d(0,0,0) scale(1);-webkit-transform:translate3d(0,0,0) scale(1);transform:translate3d(0,0,0) scale(1);opacity:0}0.1%{-moz-transform:translate3d(0,-18px,0) scale(1.1);-ms-transform:translate3d(0,-18px,0) scale(1.1);-webkit-transform:translate3d(0,-18px,0) scale(1.1);transform:translate3d(0,-18px,0) scale(1.1);opacity:0}30%,50%,94%{-moz-transform:translate3d(0,0,0) scale(1);-ms-transform:translate3d(0,0,0) scale(1);-webkit-transform:translate3d(0,0,0) scale(1);transform:translate3d(0,0,0) scale(1);opacity:1}40%{-moz-transform:translate3d(0,-4px,0) scale(1);-ms-transform:translate3d(0,-4px,0) scale(1);-webkit-transform:translate3d(0,-4px,0) scale(1);transform:translate3d(0,-4px,0) scale(1);opacity:1}100%{-moz-transform:translate3d(0,0,0) scale(1);-ms-transform:translate3d(0,0,0) scale(1);-webkit-transform:translate3d(0,0,0) scale(1);transform:translate3d(0,0,0) scale(1);opacity:0}}.navbar .fb-like{margin-top:1pc}.fbBox{width:450px;margin:50px auto 0}.icon.next{display:inline-block;width:17px;height:17px;background:url(../img//icon_sp.png) left -34px no-repeat;-moz-background-size:20px auto;-o-background-size:20px auto;-webkit-background-size:20px auto;background-size:20px auto}.icon.social,.socialLinkList::after,.socialLinkList>li{display:block}.icon.social.l{background:url(../img//icon_social_l_sp.png) no-repeat;-moz-background-size:auto 33px;-o-background-size:auto 33px;-webkit-background-size:auto 33px;background-size:auto 33px}.icon.social.l.facebook{width:1pc;height:30px;background-position:left top}.icon.social.l.twitter{width:2pc;height:27px;background-position:-19px top}.icon.social.l.google{width:2pc;height:2pc;background-position:-53px top}.icon.social.l.hatena{width:30px;height:25px;background-position:-87px top}.icon.social.l.rss{width:33px;height:33px;background-position:-232px top}.icon.social.s{background:url(../img//icon_social_s_sp.png) no-repeat;-moz-background-size:auto 15px;-o-background-size:auto 15px;-webkit-background-size:auto 15px;background-size:auto 15px}.icon.social.s.facebook{width:8px;height:15px;background-position:left top}.icon.social.s.twitter{width:1pc;height:13px;background-position:-9px top}.icon.social.s.google{width:1pc;height:1pc;background-position:-26px top}.icon.social.s.hatena{width:15px;height:13px;background-position:-43px top}.icon.social.s.feedly{width:17px;height:15px;background-position:-59px top}.icon.social.s.pocket{width:15px;height:13px;background-position:-78px top}.icon.social.s.line{width:17px;height:15px;background-position:-94px top}.icon.social.s.rss{width:17px;height:17px;background-position:-87pt top}.socialLinkList.circle>li{width:34px;height:34px;background:url(../img//icon_social_circle_sp.png) no-repeat;-moz-background-size:205px auto;-o-background-size:205px auto;-webkit-background-size:205px auto;background-size:205px auto}.socialLinkList.circle>li.twitter{background-position:-42px top}.socialLinkList.circle>li.hatena{background-position:-84px top}.socialLinkList.circle>li.rss{background-position:-129px top}.socialLinkList.circle>li.github{background-position:-171px top}.socialLinkList.circle>li>a{display:block;height:34px}.socialLinkList.share{margin-top:60px;text-align:center;vertical-align:top}.socialLinkList.share>li{display:inline-block;position:relative;width:60px;height:60px;margin:0 8px;padding:0;background:#305097;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;border-radius:4px}.socialLinkList.share>li>.iconWrap{height:60px}.socialLinkList.share>li>.iconWrap .icon.social{margin:40px auto 0}.socialLinkList.share>li>.iconWrap .icon.social.line{margin:24px auto 0}.socialLinkList.share>li.twitter{background:#00aced}.socialLinkList.share>li.hatena{background:#008fde}.socialLinkList.share>li.google{background:#db4a39}.socialLinkList.share>li.pocket{background:#d3505a}.socialLinkList.share>li.line{background:#00c300}.socialLinkList.share>li .count{position:absolute;top:5px;left:4%;width:92%;height:15px;background:#fff;border-radius:2px}.socialLinkList.share>li .count>.txt{font-size:9pt;text-align:center;line-height:15px}.socialLinkList.share>li .count::before{content:"";display:block;position:absolute;bottom:-7px;left:50%;height:0;width:0;margin:0 0 0 -4px;border-top:#fff 8px solid;border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:0 solid transparent}.socialLinkList.share>li .btn{position:absolute;top:0;left:0;width:100%;height:60px;z-index:10}.socialLinkList.share>li .btn>a{display:block;width:100%;height:60px}footer{position:relative;height:150px;margin-top:50px;padding-top:20px;background:#3d3d3d}footer::after{display:block}footer .logo{float:left;width:10pc;padding:4px 0;background:#fff;text-align:center}footer .copyright{position:absolute;bottom:6px;width:100%;font-size:11px;color:#fff;text-align:center}footer .socialLinkList.circle{float:right;margin-top:0}footer .socialLinkList.circle>li{float:left;margin-right:10px} -------------------------------------------------------------------------------- /demo/css/theme.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webcyou/MessageViewJS/0f0be013ab3a79f3252166905bb18941146b243e/demo/css/theme.css -------------------------------------------------------------------------------- /demo/html/sample001.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | MessageView.js 17 | 18 | 19 | 20 | 21 | 22 | 23 | 53 | 54 | 55 |
56 | 57 | 69 | 70 | 71 |
72 |
73 |

Message View.js

74 |

Talking Scene JavaScript Library
HTML5, WebGame etc..

75 | 76 | 77 |
78 |
79 |

80 |
81 |

82 |

83 |
84 |

85 |
86 |
87 | 88 | 89 | 98 | 99 |
100 |
101 | 102 | 103 |
104 |

Source

105 | 109 |
110 |
111 |
var message = new MessageViewer({
112 |     "data": [{
113 |         "side_class": "right",
114 |         "name": "生方 すみれ",
115 |         "message":"このJavaScriptライブラリ。<br>普段書いいているブログより反響がいいみたいね。。",
116 |         "img_url": "../img/sample001/character_0001.png"
117 |     },
118 |     {
119 |         "side_class": "left",
120 |         "name": "斑 王石",
121 |         "message":"な、な、なにぃいいいぃいい〜〜〜〜!!<br>う、う、嬉しいじゃねーかぁ!!?",
122 |         "img_url": "../img/sample001/character_0002.png"
123 |     },
124 |     {
125 |         "message":"で、でもよーーー。"
126 |     },
127 |        {
128 |         "side_class": "center",
129 |         "name": "桜 結衣",
130 |         "message":"Web帳の方もよろしくね!!!!<br>URLは「http://www.webcyou.com/」よ!!<br>よろしくぅ〜!",
131 |         "img_url": "../img/sample001/character_0003.png"
132 |     }],
133 |     "option": {
134 |         "loop": true
135 |     }
136 | });
137 |
138 |
139 |
140 | 141 | 142 |
143 |

Demo Creator

144 |

Daisuke Takayama

145 |

web帳:http://www.webcyou.com/

146 |
147 | 148 | 160 |
161 | 162 | -------------------------------------------------------------------------------- /demo/html/sample002.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | MessageView.js 17 | 18 | 19 | 20 | 21 | 22 | 23 | 59 | 60 | 61 |
62 | 63 | 75 | 76 | 77 |
78 |
79 |

Message View.js

80 |

Talking Scene JavaScript Library
HTML5, WebGame etc..

81 | 82 | 83 |
84 |
85 |

86 |
87 |

88 |

89 |
90 |

91 |
92 |

93 |
94 | 95 | 96 | 105 | 106 |
107 |
108 | 109 | 110 |
111 |

Source

112 | 116 |
117 |
118 |
var message = new MessageViewer({
119 |     "data": [{
120 |         "side_class": "right",
121 |         "name": "生方 すみれ",
122 |         "message":"え?<br>あなたは誰??",
123 |         "img_url": "../img/sample002/character_0001.png"
124 |     },
125 |     {
126 |         "message":"何処からやって来たの???"
127 |     },
128 |     {
129 |         "side_class": "left",
130 |         "name": "撫月 憐",
131 |         "message":"エデイドゥ・イニヤ・ゲ×ルグエ<br>ラー×ムソーラッソ×$・・・・",
132 |         "img_url": "../img/sample002/character_0002.png"
133 |     },
134 |     {
135 |         "message":"×$&ソ×ルルア×ル×$・・・・"
136 |     },
137 |        {
138 |         "side_class": "flash",
139 |         "name": "生方 すみれ",
140 |         "message":"き、きゃあぁーーー!!!!",
141 |         "img_url": "../img/sample002/character_0001.png"
142 |     },
143 |     {
144 |         "message":"な、なんだったの??今の??"
145 |     }],
146 |     "option": {
147 |         "loop": true
148 |     }
149 | });
150 |
151 |
152 |
153 | 154 | 155 |
156 |

Demo Creator

157 |

Daisuke Takayama

158 |

web帳:http://www.webcyou.com/

159 |
160 | 161 | 173 |
174 | 175 | -------------------------------------------------------------------------------- /demo/html/sample003.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | MessageView.js 17 | 18 | 19 | 20 | 21 | 22 | 23 | 37 | 38 | 39 |
40 | 41 | 53 | 54 | 55 |
56 |
57 |

Message View.js

58 |

Talking Scene JavaScript Library
HTML5, WebGame etc..

59 | 60 | 61 |
62 |
63 |

64 |
65 |

66 |

67 |
68 |

69 |
70 |
71 | 72 | 73 | 82 | 83 |
84 |
85 | 86 | 87 |
88 |

Source

89 | 93 |
94 |
95 |
var message = new MessageViewer({
 96 |     "data": [{
 97 |         "message": "悪か?正義か?"
 98 |     }],
 99 |     "option": {
100 |         "loop": true,
101 |         "speed": 430,
102 |         "ignoreSkip": true
103 |     }
104 | });
105 |
106 |
107 |
108 | 109 | 110 |
111 |

Demo Creator

112 |

Daisuke Takayama

113 |

web帳:http://www.webcyou.com/

114 |
115 | 116 | 128 |
129 | 130 | -------------------------------------------------------------------------------- /demo/html/sample004.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | MessageView.js 17 | 18 | 19 | 20 | 21 | 22 | 23 | 53 | 54 | 55 |
56 | 57 | 69 | 70 | 71 |
72 |
73 |

Message View.js

74 |

Talking Scene JavaScript Library
HTML5, WebGame etc..

75 | 76 | 77 |
78 |
79 |

80 |
81 |

82 |

83 |
84 |

85 |
86 |
87 | 88 | 89 | 98 | 99 |
100 |
101 | 102 | 103 |
104 |

Source

105 | 109 |
110 |
111 |
var message = new MessageViewer({
112 |     "data": [{
113 |         "message": "それから僕たちは花火大会へと向かった。<br>この花火大会を迎えることによって<br>毎年僕は夏の終わりを感じていたのだった。<br><br>先ほど喧嘩して機嫌を悪くした美佳沙の顔にも少しずつ笑みが浮かんできた。"
114 |     },
115 |     {
116 |         "message": "ドォーン!<br>ドーン!ドーン!<br><br>僕たちは花火の音の鳴る方へと自然に足が進む。"
117 |     },
118 |     {
119 |         "message": "ドォーン!<br>ドーン!ドーン!<br><br>人混みの中を切り分け、夜空に浮かぶ花火に少しでも近づこうと僕たちは足を進める。<br>「この辺が丁度見やすい場所でもあるな。」と僕は思い、少し歩くペースを落とした。<br><br>その時だった。"
120 |     },
121 |     {
122 |         "message": "「ハッ」とした表情をした美佳沙が立ち止まり、<br>少し慌ながらも僕に向かってこう言った。"
123 |     },
124 |     {
125 |         "message": "「このJavaScriptライブラリ。」<br>「MessageViewJSだったかしら?」<br><br>「とても便利じゃない??」"
126 |     },
127 |     {
128 |         "message": "もう返答は明確だった。<br><br>不思議そうな表情のまま返答を待つ美佳沙に向かって、<br>僕は少しはニヒルな笑顔を浮かべこう答えた。"
129 |     },
130 |     {
131 |         "message": "「OH!! YES!!」"
132 |     }],
133 |     "option": {
134 |         "loop": true
135 |     }
136 | });
137 |
138 |
139 |
140 | 141 | 142 |
143 |

Demo Creator

144 |

Daisuke Takayama

145 |

web帳:http://www.webcyou.com/

146 |
147 | 148 | 160 |
161 | 162 | -------------------------------------------------------------------------------- /demo/img/character_0001.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webcyou/MessageViewJS/0f0be013ab3a79f3252166905bb18941146b243e/demo/img/character_0001.png -------------------------------------------------------------------------------- /demo/img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webcyou/MessageViewJS/0f0be013ab3a79f3252166905bb18941146b243e/demo/img/favicon.ico -------------------------------------------------------------------------------- /demo/img/icon_pointer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webcyou/MessageViewJS/0f0be013ab3a79f3252166905bb18941146b243e/demo/img/icon_pointer.png -------------------------------------------------------------------------------- /demo/img/icon_social_circle_sp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webcyou/MessageViewJS/0f0be013ab3a79f3252166905bb18941146b243e/demo/img/icon_social_circle_sp.png -------------------------------------------------------------------------------- /demo/img/icon_social_s_sp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webcyou/MessageViewJS/0f0be013ab3a79f3252166905bb18941146b243e/demo/img/icon_social_s_sp.png -------------------------------------------------------------------------------- /demo/img/main_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webcyou/MessageViewJS/0f0be013ab3a79f3252166905bb18941146b243e/demo/img/main_logo.png -------------------------------------------------------------------------------- /demo/img/pic_coming_soon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webcyou/MessageViewJS/0f0be013ab3a79f3252166905bb18941146b243e/demo/img/pic_coming_soon.png -------------------------------------------------------------------------------- /demo/img/sample001/character_0001.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webcyou/MessageViewJS/0f0be013ab3a79f3252166905bb18941146b243e/demo/img/sample001/character_0001.png -------------------------------------------------------------------------------- /demo/img/sample001/character_0002.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webcyou/MessageViewJS/0f0be013ab3a79f3252166905bb18941146b243e/demo/img/sample001/character_0002.png -------------------------------------------------------------------------------- /demo/img/sample001/character_0003.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webcyou/MessageViewJS/0f0be013ab3a79f3252166905bb18941146b243e/demo/img/sample001/character_0003.png -------------------------------------------------------------------------------- /demo/img/sample001/screen_shot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webcyou/MessageViewJS/0f0be013ab3a79f3252166905bb18941146b243e/demo/img/sample001/screen_shot.png -------------------------------------------------------------------------------- /demo/img/sample002/character_0001.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webcyou/MessageViewJS/0f0be013ab3a79f3252166905bb18941146b243e/demo/img/sample002/character_0001.png -------------------------------------------------------------------------------- /demo/img/sample002/character_0002.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webcyou/MessageViewJS/0f0be013ab3a79f3252166905bb18941146b243e/demo/img/sample002/character_0002.png -------------------------------------------------------------------------------- /demo/img/sample002/screen_shot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webcyou/MessageViewJS/0f0be013ab3a79f3252166905bb18941146b243e/demo/img/sample002/screen_shot.png -------------------------------------------------------------------------------- /demo/img/sample003/screen_shot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webcyou/MessageViewJS/0f0be013ab3a79f3252166905bb18941146b243e/demo/img/sample003/screen_shot.png -------------------------------------------------------------------------------- /demo/img/sample004/bg_main.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webcyou/MessageViewJS/0f0be013ab3a79f3252166905bb18941146b243e/demo/img/sample004/bg_main.jpg -------------------------------------------------------------------------------- /demo/img/sample004/screen_shot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webcyou/MessageViewJS/0f0be013ab3a79f3252166905bb18941146b243e/demo/img/sample004/screen_shot.png -------------------------------------------------------------------------------- /demo/img/screen_shot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webcyou/MessageViewJS/0f0be013ab3a79f3252166905bb18941146b243e/demo/img/screen_shot.png -------------------------------------------------------------------------------- /demo/img/screen_shot_ogp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webcyou/MessageViewJS/0f0be013ab3a79f3252166905bb18941146b243e/demo/img/screen_shot_ogp.png -------------------------------------------------------------------------------- /demo/js/message_view.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) 2015 Daisuke Takayama 3 | * Released under the MIT license 4 | * http://opensource.org/licenses/mit-license.php 5 | * 6 | * Author: Daisuke Takayama 7 | * URL: http://www.webcyou.com/ 8 | */ 9 | 'use strict'; 10 | (function(global) { 11 | var document = global.document; 12 | 13 | /** 14 | * Utility Class 15 | * @public 16 | * @param option 17 | */ 18 | var Utility = (function() { 19 | function Utility(option) { 20 | this.support = { 21 | touch: ("ontouchstart" in window) 22 | }; 23 | this.vendor = { 24 | defultEvent: "click", 25 | transitionend: this.whichTransitionEvent(), 26 | animationend: this.whichAnimationEvent() 27 | }; 28 | if(this.support.touch) { 29 | this.vendor.defultEvent = 'touchend'; 30 | } 31 | } 32 | Utility.prototype.whichAnimationEvent = function() { 33 | var t, 34 | el = document.createElement("fakeelement"); 35 | var animations = { 36 | "animation" : "animationend", 37 | "OAnimation" : "oAnimationEnd", 38 | "MozAnimation" : "animationend", 39 | "WebkitAnimation": "webkitAnimationEnd" 40 | }; 41 | for(t in animations) { 42 | if (el.style[t] !== undefined){ 43 | return animations[t]; 44 | } 45 | } 46 | }; 47 | Utility.prototype.whichTransitionEvent = function() { 48 | var t, 49 | el = document.createElement("fakeelement"); 50 | var transitions = { 51 | "transition" : "transitionend", 52 | "OTransition" : "oTransitionEnd", 53 | "MozTransition" : "transitionend", 54 | "WebkitTransition": "webkitTransitionEnd" 55 | }; 56 | for (t in transitions){ 57 | if (el.style[t] !== undefined){ 58 | return transitions[t]; 59 | } 60 | } 61 | }; 62 | return Utility; 63 | })(); 64 | 65 | 66 | /** 67 | * MessageView constructor 68 | * @public 69 | * @param {{data: params}} args 70 | */ 71 | function MessageView(data, args, util) { 72 | this.utility = util; 73 | this.view = document.querySelector(args.view); 74 | this.contents = document.querySelector(args.contents); 75 | this.character = document.querySelector(args.character); 76 | this.characterImg = document.querySelector(args.characterImg); 77 | this.messageView = document.querySelector(args.messageView); 78 | this.message = document.querySelector(args.message); 79 | this.name = document.querySelector(args.name); 80 | this.pointer = document.querySelector(args.pointer); 81 | 82 | this.MESSAGE_VIEW_CLASS = this.view.className; //default messageView 83 | this.MESSAGE_CLOSE_CLASS = args.messageCloseClass; //default .hide 84 | this.MESSAGE_OPEN_CLASS = args.messageOpenClass; //default .in 85 | this.CHARACTER_CLASS = this.character.className; 86 | this.MESSAGE_CLASS = this.message.className; 87 | 88 | this.init.apply(this, arguments); 89 | } 90 | MessageView.prototype = { 91 | init: function() { 92 | }, 93 | 94 | isSet: function(args) { 95 | if(args !== undefined && args !== void 0) { 96 | return true; 97 | } else { 98 | return false; 99 | } 100 | }, 101 | 102 | open: function() { 103 | if(this.view.classList.contains(this.MESSAGE_CLOSE_CLASS)) { 104 | this.view.classList.remove(this.MESSAGE_CLOSE_CLASS); 105 | } 106 | }, 107 | 108 | close: function() { 109 | this.view.classList.add(this.MESSAGE_CLOSE_CLASS); 110 | this.message.classList.add(this.MESSAGE_OPEN_CLASS); 111 | this.character.classList.add(this.MESSAGE_OPEN_CLASS); 112 | }, 113 | 114 | commentChange: function(data) { 115 | this.message.innerHTML = ''; 116 | this.message.innerHTML = data; 117 | this.messageView.classList.remove(this.MESSAGE_OPEN_CLASS); 118 | }, 119 | 120 | commentClear: function() { 121 | this.message.innerHTML = ''; 122 | }, 123 | 124 | characterChange: function(data) { 125 | var that = this; 126 | if (data && data.img_url) { 127 | this.characterImg.src = data.img_url; 128 | setTimeout(function() { 129 | that.character.className = that.CHARACTER_CLASS; 130 | that.character.addEventListener(that.utility.vendor.transitionend, function character() { 131 | that.messageView.className = that.MESSAGE_CLASS; 132 | this.removeEventListener(that.utility.vendor.transitionend, character, false); 133 | }); 134 | }, 80); 135 | } else { 136 | that.character.className = that.CHARACTER_CLASS; 137 | } 138 | }, 139 | 140 | nameChange: function(data) { 141 | this.name.innerHTML = data.name; 142 | }, 143 | 144 | sideChange: function(sideClassName) { 145 | if(this.isSet(sideClassName) && sideClassName !== null){ 146 | if(this.view.classList.contains(sideClassName)) { 147 | this.view.classList.remove(sideClassName); 148 | } 149 | this.view.className = this.MESSAGE_VIEW_CLASS; 150 | } 151 | this.view.classList.add(sideClassName); 152 | }, 153 | 154 | showPointer: function() { 155 | this.pointer.style.visibility = 'visible'; 156 | }, 157 | 158 | hidePointer: function() { 159 | this.pointer.style.visibility = 'hidden'; 160 | }, 161 | 162 | disablePointer: function() { 163 | this.pointer.style.display = 'none'; 164 | } 165 | }; 166 | 167 | 168 | /** 169 | * Message constructor 170 | * @public 171 | */ 172 | function Message(args, fn) { 173 | var that = this, 174 | option = args.option; 175 | 176 | this.option = { 177 | view: ".messageView#default", 178 | contents: ".messageView#default .mv-contents", 179 | character: ".messageView#default .mv-contents .mv-image.character", 180 | characterImg: ".messageView#default .mv-contents .mv-image.character img", 181 | messageView: ".messageView#default .mv-contents .mv-comment", 182 | message: ".messageView#default .mv-contents .mv-comment .val", 183 | name: ".messageView#default .mv-contents .mv-name", 184 | pointer: ".messageView#default .mv-contents .mv-comment .pointer", 185 | messageOpenClass: "in", 186 | messageCloseClass: "hide", 187 | page: 0, 188 | speed: 'normal', 189 | ignoreSkip: false, 190 | loop: false, 191 | isPointer: true 192 | }; 193 | this.addTime = 30; 194 | this.loading = false; 195 | 196 | this.isNumber = function(x) { 197 | if( typeof(x) != 'number' && typeof(x) != 'string' ) 198 | return false; 199 | else 200 | return (x == parseFloat(x) && isFinite(x)); 201 | }; 202 | 203 | // Option Speed 204 | if(option !== undefined) { 205 | for (var property in option) { 206 | this.option[property] = option[property]; 207 | } 208 | switch (this.option.speed) { 209 | case 'normal': 210 | that.addTime = 30; 211 | break; 212 | case 'fast': 213 | that.addTime = 10; 214 | break; 215 | case 'slow': 216 | that.addTime = 80; 217 | break; 218 | default: 219 | that.addTime = 30; 220 | break; 221 | } 222 | if(this.isNumber(this.option.speed)) { 223 | that.addTime = Math.abs(Math.round(this.option.speed)); 224 | } 225 | } 226 | 227 | // Message Value JSON 228 | if(args !== undefined) { 229 | this.data = args.data; 230 | this.selectedNum = this.option.page; 231 | this.selectedData = args.data[0]; 232 | this.maxNum = args.data.length; 233 | } 234 | 235 | this.set = function(source){ 236 | for (var property in source) { 237 | this.option[property] = source[property]; 238 | } 239 | return this; 240 | }; 241 | 242 | this.messageView = document.querySelector(this.option.view); 243 | 244 | this.onClick = function (e) { 245 | e.stopPropagation(); 246 | e.preventDefault(); 247 | that.next.call(that); 248 | }; 249 | 250 | this.utility = new Utility(this.option); 251 | this.messageView.addEventListener(this.utility.vendor.defultEvent, that.onClick, true); 252 | 253 | if(args.data !== undefined) { 254 | this.init.apply(this, [args.data]); 255 | } 256 | 257 | this.callBack = function() { 258 | if(fn !== void 0) { 259 | fn(); 260 | } 261 | }; 262 | // メッセージスキップの判定 263 | this.skip = false; 264 | } 265 | 266 | Message.prototype = { 267 | init: function(val) { 268 | var that = this; 269 | this.View = new MessageView(this.data, this.option, this.utility); 270 | if(!this.option.isPointer) { 271 | this.disablePointer(); 272 | } 273 | if(this.maxNum > 0) { 274 | that.open(val.data); 275 | } 276 | }, 277 | 278 | isSet: function(args) { 279 | if(args !== undefined && args !== void 0) { 280 | return true; 281 | } else { 282 | return false; 283 | } 284 | }, 285 | 286 | open: function(data) { 287 | if(this.isSet(this.selectedData.side_class)) { 288 | this.sideChange(); 289 | } 290 | if(this.isSet(this.selectedData.name)) { 291 | this.nameChange(); 292 | } 293 | if(this.isSet(this.selectedData.img_url)) { 294 | this.characterChange(); 295 | } else { 296 | this.characterReset(); 297 | } 298 | if(this.isSet(this.selectedData.message)) { 299 | this.commentChange(); 300 | } 301 | this.View.open(data); 302 | }, 303 | 304 | close: function() { 305 | this.messageView.removeEventListener(this.utility.vendor.defultEvent, this.onClick, true); 306 | this.View.close(); 307 | }, 308 | 309 | next: function() { 310 | if (this.loading === true) { 311 | if (!this.option.ignoreSkip) { 312 | this.skip = true; 313 | } 314 | return; 315 | } 316 | this.commentClear(); 317 | this.selectedNum += 1; 318 | if(this.maxNum > this.selectedNum) { 319 | this.selectedData = this.data[this.selectedNum]; 320 | if(this.selectedData.side_class !== undefined) { 321 | this.sideChange(); 322 | } 323 | if(this.selectedData.name) { 324 | this.nameChange(); 325 | } 326 | if(this.selectedData.img_url) { 327 | this.characterChange(); 328 | } else { 329 | this.characterReset(); 330 | } 331 | if(this.selectedData.message) { 332 | this.commentChange(); 333 | } 334 | } else if (this.maxNum <= this.selectedNum) { 335 | // loop 336 | if(this.option.loop) { 337 | this.selectedNum = this.option.page; 338 | this.selectedData = this.data[this.selectedNum]; 339 | this.open(this.data); 340 | } else { 341 | this.end(); 342 | this.close(); 343 | } 344 | } 345 | }, 346 | 347 | end: function() { 348 | this.callBack(); 349 | }, 350 | 351 | characterChange: function() { 352 | this.View.characterChange(this.selectedData); 353 | }, 354 | 355 | characterReset: function() { 356 | this.View.characterChange(null); 357 | }, 358 | 359 | sideChange: function() { 360 | this.View.sideChange(this.selectedData.side_class); 361 | }, 362 | 363 | commentChange: function() { 364 | var that = this, 365 | str = this.selectedData.message.split(/]*)?\/?>/g), 366 | splitComment = [], 367 | setComment = '', 368 | interval = this.addTime; 369 | 370 | this.hidePointer(); 371 | for(var i in str) { 372 | if (splitComment.length > 0) { 373 | splitComment.push('
'); 374 | } 375 | splitComment.push(str[i].split('')); 376 | } 377 | 378 | // 平坦化 379 | splitComment = that.flatten(splitComment); 380 | 381 | that.skip = false; 382 | that.loading = true; 383 | 384 | var addChar = function() { 385 | var c = splitComment.shift(); 386 | 387 | if (!c) { 388 | that.loading = false; 389 | that.showPointer(); 390 | return false; 391 | } 392 | setComment += c; 393 | 394 | if (that.skip) { 395 | interval = 0; 396 | setComment += splitComment.join(''); 397 | splitComment = []; 398 | } 399 | that.View.commentChange(setComment); 400 | setTimeout(addChar, interval); 401 | }; 402 | 403 | addChar(); 404 | }, 405 | 406 | flatten: function(val) { 407 | var mixMessage = []; 408 | for(var i = 0; val.length > i; i++) { 409 | if(val[i] instanceof Array) { 410 | for(var n = 0; val[i].length > n; n++) { 411 | mixMessage.push(val[i][n]); 412 | } 413 | } else { 414 | mixMessage.push(val[i]); 415 | } 416 | } 417 | return mixMessage; 418 | }, 419 | 420 | commentClear: function() { 421 | clearTimeout(this.timer); 422 | this.View.commentClear(); 423 | }, 424 | 425 | nameChange: function() { 426 | this.View.nameChange(this.selectedData); 427 | }, 428 | 429 | showPointer: function() { 430 | if(this.option.isPointer) { 431 | this.View.showPointer(); 432 | } 433 | }, 434 | 435 | hidePointer: function() { 436 | this.View.hidePointer(); 437 | }, 438 | 439 | disablePointer: function() { 440 | this.View.disablePointer(); 441 | }, 442 | 443 | setData: function(data) { 444 | this.data = data; 445 | }, 446 | 447 | getData: function() { 448 | return this.data; 449 | } 450 | 451 | }; 452 | 453 | // namespaceにexport 454 | if (global.MessageViewer === void 0) { 455 | global.MessageViewer = {}; 456 | } 457 | global.MessageViewer = Message; 458 | })(this); -------------------------------------------------------------------------------- /dist/message_view.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) 2015 Daisuke Takayama 3 | * Released under the MIT license 4 | * http://opensource.org/licenses/mit-license.php 5 | * 6 | * Author: Daisuke Takayama 7 | * URL: http://www.webcyou.com/ 8 | */ 9 | 'use strict'; 10 | (function(global) { 11 | var document = global.document; 12 | 13 | /** 14 | * Utility Class 15 | * @public 16 | * @param option 17 | */ 18 | var Utility = (function() { 19 | function Utility(option) { 20 | this.support = { 21 | touch: ("ontouchstart" in window) 22 | }; 23 | this.vendor = { 24 | defultEvent: "click", 25 | transitionend: this.whichTransitionEvent(), 26 | animationend: this.whichAnimationEvent() 27 | }; 28 | if(this.support.touch) { 29 | this.vendor.defultEvent = 'touchend'; 30 | } 31 | } 32 | Utility.prototype.whichAnimationEvent = function() { 33 | var t, 34 | el = document.createElement("fakeelement"); 35 | var animations = { 36 | "animation" : "animationend", 37 | "OAnimation" : "oAnimationEnd", 38 | "MozAnimation" : "animationend", 39 | "WebkitAnimation": "webkitAnimationEnd" 40 | }; 41 | for(t in animations) { 42 | if (el.style[t] !== undefined){ 43 | return animations[t]; 44 | } 45 | } 46 | }; 47 | Utility.prototype.whichTransitionEvent = function() { 48 | var t, 49 | el = document.createElement("fakeelement"); 50 | var transitions = { 51 | "transition" : "transitionend", 52 | "OTransition" : "oTransitionEnd", 53 | "MozTransition" : "transitionend", 54 | "WebkitTransition": "webkitTransitionEnd" 55 | }; 56 | for (t in transitions){ 57 | if (el.style[t] !== undefined){ 58 | return transitions[t]; 59 | } 60 | } 61 | }; 62 | return Utility; 63 | })(); 64 | 65 | 66 | /** 67 | * MessageView constructor 68 | * @public 69 | * @param {{data: params}} args 70 | */ 71 | function MessageView(data, args, util) { 72 | this.utility = util; 73 | this.view = document.querySelector(args.view); 74 | this.contents = document.querySelector(args.contents); 75 | this.character = document.querySelector(args.character); 76 | this.characterImg = document.querySelector(args.characterImg); 77 | this.messageView = document.querySelector(args.messageView); 78 | this.message = document.querySelector(args.message); 79 | this.name = document.querySelector(args.name); 80 | this.pointer = document.querySelector(args.pointer); 81 | 82 | this.MESSAGE_VIEW_CLASS = this.view.className; //default messageView 83 | this.MESSAGE_CLOSE_CLASS = args.messageCloseClass; //default .hide 84 | this.MESSAGE_OPEN_CLASS = args.messageOpenClass; //default .in 85 | this.CHARACTER_CLASS = this.character.className; 86 | this.MESSAGE_CLASS = this.message.className; 87 | 88 | this.init.apply(this, arguments); 89 | } 90 | MessageView.prototype = { 91 | init: function() { 92 | }, 93 | 94 | isSet: function(args) { 95 | if(args !== undefined && args !== void 0) { 96 | return true; 97 | } else { 98 | return false; 99 | } 100 | }, 101 | 102 | open: function() { 103 | if(this.view.classList.contains(this.MESSAGE_CLOSE_CLASS)) { 104 | this.view.classList.remove(this.MESSAGE_CLOSE_CLASS); 105 | } 106 | }, 107 | 108 | close: function() { 109 | this.view.classList.add(this.MESSAGE_CLOSE_CLASS); 110 | this.message.classList.add(this.MESSAGE_OPEN_CLASS); 111 | this.character.classList.add(this.MESSAGE_OPEN_CLASS); 112 | }, 113 | 114 | commentChange: function(data) { 115 | this.message.innerHTML = ''; 116 | this.message.innerHTML = data; 117 | this.messageView.classList.remove(this.MESSAGE_OPEN_CLASS); 118 | }, 119 | 120 | commentClear: function() { 121 | this.message.innerHTML = ''; 122 | }, 123 | 124 | characterChange: function(data) { 125 | var that = this; 126 | if (data && data.img_url) { 127 | this.characterImg.src = data.img_url; 128 | setTimeout(function() { 129 | that.character.className = that.CHARACTER_CLASS; 130 | that.character.addEventListener(that.utility.vendor.transitionend, function character() { 131 | that.messageView.className = that.MESSAGE_CLASS; 132 | this.removeEventListener(that.utility.vendor.transitionend, character, false); 133 | }); 134 | }, 80); 135 | } else { 136 | that.character.className = that.CHARACTER_CLASS; 137 | } 138 | }, 139 | 140 | nameChange: function(data) { 141 | this.name.innerHTML = data.name; 142 | }, 143 | 144 | sideChange: function(sideClassName) { 145 | if(this.isSet(sideClassName) && sideClassName !== null){ 146 | if(this.view.classList.contains(sideClassName)) { 147 | this.view.classList.remove(sideClassName); 148 | } 149 | this.view.className = this.MESSAGE_VIEW_CLASS; 150 | } 151 | this.view.classList.add(sideClassName); 152 | }, 153 | 154 | showPointer: function() { 155 | this.pointer.style.visibility = 'visible'; 156 | }, 157 | 158 | hidePointer: function() { 159 | this.pointer.style.visibility = 'hidden'; 160 | }, 161 | 162 | disablePointer: function() { 163 | this.pointer.style.display = 'none'; 164 | } 165 | }; 166 | 167 | 168 | /** 169 | * Message constructor 170 | * @public 171 | */ 172 | function Message(args, fn) { 173 | var that = this, 174 | option = args.option; 175 | 176 | this.option = { 177 | view: ".messageView#default", 178 | contents: ".messageView#default .mv-contents", 179 | character: ".messageView#default .mv-contents .mv-image.character", 180 | characterImg: ".messageView#default .mv-contents .mv-image.character img", 181 | messageView: ".messageView#default .mv-contents .mv-comment", 182 | message: ".messageView#default .mv-contents .mv-comment .val", 183 | name: ".messageView#default .mv-contents .mv-name", 184 | pointer: ".messageView#default .mv-contents .mv-comment .pointer", 185 | messageOpenClass: "in", 186 | messageCloseClass: "hide", 187 | page: 0, 188 | speed: 'normal', 189 | ignoreSkip: false, 190 | loop: false, 191 | isPointer: true, 192 | isClose: true 193 | }; 194 | this.addTime = 30; 195 | this.loading = false; 196 | 197 | this.isNumber = function(x) { 198 | if( typeof(x) != 'number' && typeof(x) != 'string' ) 199 | return false; 200 | else 201 | return (x == parseFloat(x) && isFinite(x)); 202 | }; 203 | 204 | // Option Speed 205 | if(option !== undefined) { 206 | for (var property in option) { 207 | this.option[property] = option[property]; 208 | } 209 | switch (this.option.speed) { 210 | case 'normal': 211 | that.addTime = 30; 212 | break; 213 | case 'fast': 214 | that.addTime = 10; 215 | break; 216 | case 'slow': 217 | that.addTime = 80; 218 | break; 219 | default: 220 | that.addTime = 30; 221 | break; 222 | } 223 | if(this.isNumber(this.option.speed)) { 224 | that.addTime = Math.abs(Math.round(this.option.speed)); 225 | } 226 | } 227 | 228 | // Message Value JSON 229 | if(args !== undefined) { 230 | this.data = args.data; 231 | this.selectedNum = this.option.page; 232 | this.selectedData = args.data[0]; 233 | this.maxNum = args.data.length; 234 | } 235 | 236 | this.set = function(source){ 237 | for (var property in source) { 238 | this.option[property] = source[property]; 239 | } 240 | return this; 241 | }; 242 | 243 | this.messageView = document.querySelector(this.option.view); 244 | 245 | this.onClick = function (e) { 246 | e.stopPropagation(); 247 | e.preventDefault(); 248 | that.next.call(that); 249 | }; 250 | 251 | this.utility = new Utility(this.option); 252 | this.messageView.addEventListener(this.utility.vendor.defultEvent, that.onClick, true); 253 | 254 | if(args.data !== undefined) { 255 | this.init.apply(this, [args.data]); 256 | } 257 | 258 | this.callBack = function() { 259 | if(fn !== void 0) { 260 | fn(); 261 | } 262 | }; 263 | // メッセージスキップの判定 264 | this.skip = false; 265 | } 266 | 267 | Message.prototype = { 268 | init: function(val) { 269 | var that = this; 270 | this.View = new MessageView(this.data, this.option, this.utility); 271 | if(!this.option.isPointer) { 272 | this.disablePointer(); 273 | } 274 | if(this.maxNum > 0) { 275 | that.open(val.data); 276 | } 277 | }, 278 | 279 | isSet: function(args) { 280 | if(args !== undefined && args !== void 0) { 281 | return true; 282 | } else { 283 | return false; 284 | } 285 | }, 286 | 287 | open: function(data) { 288 | if(this.isSet(this.selectedData.side_class)) { 289 | this.sideChange(); 290 | } 291 | if(this.isSet(this.selectedData.name)) { 292 | this.nameChange(); 293 | } 294 | if(this.isSet(this.selectedData.img_url)) { 295 | this.characterChange(); 296 | } else { 297 | this.characterReset(); 298 | } 299 | if(this.isSet(this.selectedData.message)) { 300 | this.commentChange(); 301 | } 302 | this.View.open(data); 303 | }, 304 | 305 | close: function() { 306 | this.messageView.removeEventListener(this.utility.vendor.defultEvent, this.onClick, true); 307 | this.View.close(); 308 | }, 309 | 310 | next: function() { 311 | if (this.loading === true) { 312 | if (!this.option.ignoreSkip) { 313 | this.skip = true; 314 | } 315 | return; 316 | } 317 | this.commentClear(); 318 | this.selectedNum += 1; 319 | if(this.maxNum > this.selectedNum) { 320 | this.selectedData = this.data[this.selectedNum]; 321 | if(this.selectedData.side_class !== undefined) { 322 | this.sideChange(); 323 | } 324 | if(this.selectedData.name) { 325 | this.nameChange(); 326 | } 327 | if(this.selectedData.img_url) { 328 | this.characterChange(); 329 | } else { 330 | this.characterReset(); 331 | } 332 | if(this.selectedData.message) { 333 | this.commentChange(); 334 | } 335 | } else if (this.maxNum <= this.selectedNum) { 336 | // loop 337 | if(this.option.loop) { 338 | this.selectedNum = this.option.page; 339 | this.selectedData = this.data[this.selectedNum]; 340 | this.open(this.data); 341 | } else { 342 | this.end(); 343 | if (this.option.isClose) { 344 | this.close(); 345 | } 346 | } 347 | } 348 | }, 349 | 350 | end: function() { 351 | this.callBack(); 352 | }, 353 | 354 | characterChange: function() { 355 | this.View.characterChange(this.selectedData); 356 | }, 357 | 358 | characterReset: function() { 359 | this.View.characterChange(null); 360 | }, 361 | 362 | sideChange: function() { 363 | this.View.sideChange(this.selectedData.side_class); 364 | }, 365 | 366 | commentChange: function() { 367 | var that = this, 368 | str = this.selectedData.message.split(/]*)?\/?>/g), 369 | splitComment = [], 370 | setComment = '', 371 | interval = this.addTime; 372 | 373 | this.hidePointer(); 374 | for(var i in str) { 375 | if (splitComment.length > 0) { 376 | splitComment.push('
'); 377 | } 378 | splitComment.push(str[i].split('')); 379 | } 380 | 381 | // 平坦化 382 | splitComment = that.flatten(splitComment); 383 | 384 | that.skip = false; 385 | that.loading = true; 386 | 387 | var addChar = function() { 388 | var c = splitComment.shift(); 389 | 390 | if (!c) { 391 | that.loading = false; 392 | that.showPointer(); 393 | return false; 394 | } 395 | setComment += c; 396 | 397 | if (that.skip) { 398 | interval = 0; 399 | setComment += splitComment.join(''); 400 | splitComment = []; 401 | } 402 | that.View.commentChange(setComment); 403 | setTimeout(addChar, interval); 404 | }; 405 | 406 | addChar(); 407 | }, 408 | 409 | flatten: function(val) { 410 | var mixMessage = []; 411 | for(var i = 0; val.length > i; i++) { 412 | if(val[i] instanceof Array) { 413 | for(var n = 0; val[i].length > n; n++) { 414 | mixMessage.push(val[i][n]); 415 | } 416 | } else { 417 | mixMessage.push(val[i]); 418 | } 419 | } 420 | return mixMessage; 421 | }, 422 | 423 | commentClear: function() { 424 | clearTimeout(this.timer); 425 | this.View.commentClear(); 426 | }, 427 | 428 | nameChange: function() { 429 | this.View.nameChange(this.selectedData); 430 | }, 431 | 432 | showPointer: function() { 433 | if(this.option.isPointer) { 434 | this.View.showPointer(); 435 | } 436 | }, 437 | 438 | hidePointer: function() { 439 | this.View.hidePointer(); 440 | }, 441 | 442 | disablePointer: function() { 443 | this.View.disablePointer(); 444 | }, 445 | 446 | setData: function(data) { 447 | this.data = data; 448 | }, 449 | 450 | getData: function() { 451 | return this.data; 452 | } 453 | 454 | }; 455 | 456 | // namespaceにexport 457 | if (global.MessageViewer === void 0) { 458 | global.MessageViewer = {}; 459 | } 460 | global.MessageViewer = Message; 461 | })(this); 462 | -------------------------------------------------------------------------------- /dist/message_view.min.js: -------------------------------------------------------------------------------- 1 | "use strict";!function(t){function e(t,e,i){this.utility=i,this.view=s.querySelector(e.view),this.contents=s.querySelector(e.contents),this.character=s.querySelector(e.character),this.characterImg=s.querySelector(e.characterImg),this.messageView=s.querySelector(e.messageView),this.message=s.querySelector(e.message),this.name=s.querySelector(e.name),this.pointer=s.querySelector(e.pointer),this.MESSAGE_VIEW_CLASS=this.view.className,this.MESSAGE_CLOSE_CLASS=e.messageCloseClass,this.MESSAGE_OPEN_CLASS=e.messageOpenClass,this.CHARACTER_CLASS=this.character.className,this.MESSAGE_CLASS=this.message.className,this.init.apply(this,arguments)}function i(t,e){var i=this,a=t.option;if(this.option={view:".messageView#default",contents:".messageView#default .mv-contents",character:".messageView#default .mv-contents .mv-image.character",characterImg:".messageView#default .mv-contents .mv-image.character img",messageView:".messageView#default .mv-contents .mv-comment",message:".messageView#default .mv-contents .mv-comment .val",name:".messageView#default .mv-contents .mv-name",pointer:".messageView#default .mv-contents .mv-comment .pointer",messageOpenClass:"in",messageCloseClass:"hide",page:0,speed:"normal",ignoreSkip:!1,loop:!1,isPointer:!0,isClose:!0},this.addTime=30,this.loading=!1,this.isNumber=function(t){return"number"!=typeof t&&"string"!=typeof t?!1:t==parseFloat(t)&&isFinite(t)},void 0!==a){for(var o in a)this.option[o]=a[o];switch(this.option.speed){case"normal":i.addTime=30;break;case"fast":i.addTime=10;break;case"slow":i.addTime=80;break;default:i.addTime=30}this.isNumber(this.option.speed)&&(i.addTime=Math.abs(Math.round(this.option.speed)))}void 0!==t&&(this.data=t.data,this.selectedNum=this.option.page,this.selectedData=t.data[0],this.maxNum=t.data.length),this.set=function(t){for(var e in t)this.option[e]=t[e];return this},this.messageView=s.querySelector(this.option.view),this.onClick=function(t){t.stopPropagation(),t.preventDefault(),i.next.call(i)},this.utility=new n(this.option),this.messageView.addEventListener(this.utility.vendor.defultEvent,i.onClick,!0),void 0!==t.data&&this.init.apply(this,[t.data]),this.callBack=function(){void 0!==e&&e()},this.skip=!1}var s=t.document,n=function(){function t(t){this.support={touch:"ontouchstart"in window},this.vendor={defultEvent:"click",transitionend:this.whichTransitionEvent(),animationend:this.whichAnimationEvent()},this.support.touch&&(this.vendor.defultEvent="touchend")}return t.prototype.whichAnimationEvent=function(){var t,e=s.createElement("fakeelement"),i={animation:"animationend",OAnimation:"oAnimationEnd",MozAnimation:"animationend",WebkitAnimation:"webkitAnimationEnd"};for(t in i)if(void 0!==e.style[t])return i[t]},t.prototype.whichTransitionEvent=function(){var t,e=s.createElement("fakeelement"),i={transition:"transitionend",OTransition:"oTransitionEnd",MozTransition:"transitionend",WebkitTransition:"webkitTransitionEnd"};for(t in i)if(void 0!==e.style[t])return i[t]},t}();e.prototype={init:function(){},isSet:function(t){return void 0!==t&&void 0!==t?!0:!1},open:function(){this.view.classList.contains(this.MESSAGE_CLOSE_CLASS)&&this.view.classList.remove(this.MESSAGE_CLOSE_CLASS)},close:function(){this.view.classList.add(this.MESSAGE_CLOSE_CLASS),this.message.classList.add(this.MESSAGE_OPEN_CLASS),this.character.classList.add(this.MESSAGE_OPEN_CLASS)},commentChange:function(t){this.message.innerHTML="",this.message.innerHTML=t,this.messageView.classList.remove(this.MESSAGE_OPEN_CLASS)},commentClear:function(){this.message.innerHTML=""},characterChange:function(t){var e=this;t&&t.img_url?(this.characterImg.src=t.img_url,setTimeout(function(){e.character.className=e.CHARACTER_CLASS,e.character.addEventListener(e.utility.vendor.transitionend,function t(){e.messageView.className=e.MESSAGE_CLASS,this.removeEventListener(e.utility.vendor.transitionend,t,!1)})},80)):e.character.className=e.CHARACTER_CLASS},nameChange:function(t){this.name.innerHTML=t.name},sideChange:function(t){this.isSet(t)&&null!==t&&(this.view.classList.contains(t)&&this.view.classList.remove(t),this.view.className=this.MESSAGE_VIEW_CLASS),this.view.classList.add(t)},showPointer:function(){this.pointer.style.visibility="visible"},hidePointer:function(){this.pointer.style.visibility="hidden"},disablePointer:function(){this.pointer.style.display="none"}},i.prototype={init:function(t){var i=this;this.View=new e(this.data,this.option,this.utility),this.option.isPointer||this.disablePointer(),this.maxNum>0&&i.open(t.data)},isSet:function(t){return void 0!==t&&void 0!==t?!0:!1},open:function(t){this.isSet(this.selectedData.side_class)&&this.sideChange(),this.isSet(this.selectedData.name)&&this.nameChange(),this.isSet(this.selectedData.img_url)?this.characterChange():this.characterReset(),this.isSet(this.selectedData.message)&&this.commentChange(),this.View.open(t)},close:function(){this.messageView.removeEventListener(this.utility.vendor.defultEvent,this.onClick,!0),this.View.close()},next:function(){return this.loading===!0?void(this.option.ignoreSkip||(this.skip=!0)):(this.commentClear(),this.selectedNum+=1,void(this.maxNum>this.selectedNum?(this.selectedData=this.data[this.selectedNum],void 0!==this.selectedData.side_class&&this.sideChange(),this.selectedData.name&&this.nameChange(),this.selectedData.img_url?this.characterChange():this.characterReset(),this.selectedData.message&&this.commentChange()):this.maxNum<=this.selectedNum&&(this.option.loop?(this.selectedNum=this.option.page,this.selectedData=this.data[this.selectedNum],this.open(this.data)):(this.end(),this.option.isClose&&this.close()))))},end:function(){this.callBack()},characterChange:function(){this.View.characterChange(this.selectedData)},characterReset:function(){this.View.characterChange(null)},sideChange:function(){this.View.sideChange(this.selectedData.side_class)},commentChange:function(){var t=this,e=this.selectedData.message.split(/]*)?\/?>/g),i=[],s="",n=this.addTime;this.hidePointer();for(var a in e)i.length>0&&i.push("
"),i.push(e[a].split(""));i=t.flatten(i),t.skip=!1,t.loading=!0;var o=function(){var e=i.shift();return e?(s+=e,t.skip&&(n=0,s+=i.join(""),i=[]),t.View.commentChange(s),void setTimeout(o,n)):(t.loading=!1,t.showPointer(),!1)};o()},flatten:function(t){for(var e=[],i=0;t.length>i;i++)if(t[i]instanceof Array)for(var s=0;t[i].length>s;s++)e.push(t[i][s]);else e.push(t[i]);return e},commentClear:function(){clearTimeout(this.timer),this.View.commentClear()},nameChange:function(){this.View.nameChange(this.selectedData)},showPointer:function(){this.option.isPointer&&this.View.showPointer()},hidePointer:function(){this.View.hidePointer()},disablePointer:function(){this.View.disablePointer()},setData:function(t){this.data=t},getData:function(){return this.data}},void 0===t.MessageViewer&&(t.MessageViewer={}),t.MessageViewer=i}(this); -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | var gulp = require("gulp"), 2 | path = require('path'), 3 | compass = require('gulp-compass'), 4 | cssmin = require('gulp-cssmin'), 5 | connect = require('gulp-connect'), 6 | watch = require('gulp-watch'), 7 | clean = require('gulp-clean'), 8 | uglify = require('gulp-uglify'), 9 | concat = require('gulp-concat'), 10 | plumber = require('gulp-plumber'), 11 | rename = require("gulp-rename"), 12 | stripDebug = require('gulp-strip-debug'), 13 | mainBowerFiles = require('main-bower-files'), 14 | del = require('del'), 15 | runSequence = require('run-sequence'), 16 | gulpif= require('gulp-if'); 17 | 18 | var SOURCE_DIR = 'src', 19 | WORK_DIR = 'demo', 20 | DIST_DIR = 'dist'; 21 | 22 | var htmlFiles = SOURCE_DIR + '/html/**/*.html'; 23 | var scssFiles = SOURCE_DIR + '/scss/**/*.scss'; 24 | var jsFiles = [ 25 | SOURCE_DIR + '/js/**/*.js', 26 | '!src/js/contrib/**/*.js' 27 | ]; 28 | var imgFiles = SOURCE_DIR + '/img/**/*.{jpg,png,gif,ico}'; 29 | var cssFiles = SOURCE_DIR + '/**/*.css'; 30 | var bootstrapCSSFiles = 'bower_components/bootstrap/dist/css/**/**.css'; 31 | var bootstrapFontFiles = 'bower_components/bootstrap/dist/fonts/**/**.ttf'; 32 | 33 | // Clean File 34 | gulp.task('clean-workDir', function() { 35 | del([WORK_DIR + '/*'], {force: true}); 36 | }); 37 | 38 | // Compass Setting 39 | gulp.task('compass', function() { 40 | return gulp.src(scssFiles) 41 | .pipe(plumber()) 42 | .pipe(compass({ 43 | style: 'expanded', 44 | specify: SOURCE_DIR + '/scss/style.scss', 45 | css: SOURCE_DIR + '/css', 46 | sass: SOURCE_DIR + '/scss', 47 | imagesDir: SOURCE_DIR + '/img' 48 | })); 49 | }); 50 | 51 | gulp.task('cssmin', function() { 52 | gulp.src(cssFiles) 53 | .pipe(cssmin()) 54 | .pipe(gulp.dest(WORK_DIR)); 55 | }); 56 | 57 | // bower uglify contrib 58 | gulp.task('uglify-contrib', function () { 59 | gulp.src(mainBowerFiles()) 60 | .pipe(gulpif(function(file){ 61 | return file.path.substr(-3) === '.js'; 62 | }, 63 | //uglify() 64 | concat('contrib.js') 65 | )) 66 | .pipe( 67 | gulpif(function(file) { 68 | return file.path.substr(-3) === '.js'; 69 | }, 70 | gulp.dest(WORK_DIR + '/js/') 71 | )); 72 | }); 73 | 74 | /** 75 | * Copy Files 76 | **/ 77 | gulp.task('copy-img', function() { 78 | gulp.src(imgFiles).pipe(gulp.dest(WORK_DIR + '/img')); 79 | }); 80 | gulp.task('copy-html', function() { 81 | gulp.src([ 82 | htmlFiles, 83 | '!' + SOURCE_DIR + '/html/index.html' 84 | ]).pipe(gulp.dest(WORK_DIR + '/html')); 85 | gulp.src(SOURCE_DIR + '/html/index.html').pipe(gulp.dest(WORK_DIR)); 86 | }); 87 | gulp.task('copy-js', function() { 88 | gulp.src(jsFiles).pipe(gulp.dest(WORK_DIR + '/js')); 89 | }); 90 | gulp.task('copy-bootstrap', function() { 91 | gulp.src(bootstrapCSSFiles).pipe(gulp.dest(WORK_DIR + '/bootstrap/css')); 92 | gulp.src(bootstrapFontFiles).pipe(gulp.dest(WORK_DIR + '/bootstrap/font')); 93 | }); 94 | 95 | gulp.task('dist', function() { 96 | gulp.src(SOURCE_DIR + '/js/message_view.js') 97 | .pipe(gulp.dest(DIST_DIR)); 98 | 99 | gulp.src(SOURCE_DIR + '/js/message_view.js') 100 | .pipe(stripDebug()) 101 | .pipe(uglify()) 102 | .pipe(rename({ 103 | extname: '.min.js' 104 | })) 105 | .pipe(gulp.dest(DIST_DIR)); 106 | }); 107 | 108 | gulp.task('copy-workDir', [ 109 | 'copy-html', 110 | 'copy-js', 111 | 'copy-img', 112 | 'copy-bootstrap', 113 | 'cssmin' 114 | ]); 115 | 116 | 117 | /** 118 | * Watch Files 119 | **/ 120 | gulp.task('watch', function() { 121 | // html 122 | gulp.watch([htmlFiles],['copy-html']); 123 | // compass 124 | gulp.watch([scssFiles],['compass']); 125 | // css min 126 | gulp.watch([cssFiles],['cssmin']); 127 | // javaScript 128 | gulp.watch([jsFiles],['copy-js']); 129 | // image 130 | gulp.watch([imgFiles],['copy-img']); 131 | }); 132 | 133 | 134 | // build task 135 | gulp.task('build-ui', ['compass']); 136 | 137 | 138 | /** 139 | * Gulp Server 140 | **/ 141 | gulp.task('serve', ['connect'], function() { 142 | gulp.watch([ 143 | SOURCE_DIR + '/**/*.*' 144 | ]).on('change', function(changedFile) { 145 | gulp.src(changedFile.path).pipe(connect.reload()); 146 | }); 147 | }); 148 | 149 | gulp.task('connect', function() { 150 | connect.server({ 151 | root: [__dirname + '/demo/'], 152 | port: 8088, 153 | livereload: true 154 | }); 155 | }); 156 | 157 | 158 | // default 159 | gulp.task('default', function(callback) { 160 | runSequence( 161 | 'clean-workDir', 162 | 'build-ui', 163 | 'copy-workDir', 164 | 'watch', 165 | 'serve', 166 | callback 167 | ); 168 | }); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "message-view-js", 3 | "version": "1.0.2", 4 | "description": "「MessageViewJS」はゲーム内でよくある会話シーンを簡単実装できる、JavaScriptライブラリです。Talking Scene JavaScript Library HTML5, WebGame etc...", 5 | "main": "dist/message_view.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [ 10 | "javaScript", 11 | "message", 12 | "game", 13 | "Talking Scene", 14 | "Library" 15 | ], 16 | "author": "daisuke.takayama", 17 | "license": "MIT", 18 | "devDependencies": { 19 | "gulp": "^3.9.0", 20 | "gulp-coffee": "^2.3.1", 21 | "gulp-compass": "^2.1.0", 22 | "gulp-connect": "^2.2.0", 23 | "gulp-cssmin": "^0.1.7", 24 | "gulp-inject": "^1.5.0", 25 | "gulp-rename": "^1.2.2", 26 | "gulp-run-sequence": "^0.3.2", 27 | "gulp-strip-debug": "^1.0.2", 28 | "gulp-watch": "^4.3.5", 29 | "main-bower-files": "^2.9.0", 30 | "run-sequence": "^1.1.2" 31 | }, 32 | "dependencies": { 33 | "del": "^2.0.1", 34 | "gulp-clean": "^0.3.1", 35 | "gulp-plumber": "^1.0.1" 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /src/css/sample.css: -------------------------------------------------------------------------------- 1 | section#sample.sample001 .messageView, 2 | section#sample.sample002 .messageView { 3 | position: relative; 4 | width: 700px; 5 | height: 320px; 6 | margin: 80px auto 20px; 7 | cursor: pointer; 8 | } 9 | section#sample.sample001 .messageView .mv-contents, 10 | section#sample.sample002 .messageView .mv-contents { 11 | padding: 80px 0 0 0; 12 | } 13 | section#sample.sample001 .messageView .mv-contents .mv-name, 14 | section#sample.sample002 .messageView .mv-contents .mv-name { 15 | position: absolute; 16 | top: 93px; 17 | left: -40px; 18 | width: 300px; 19 | padding: 6px 10px; 20 | background: rgba(47, 109, 174, 0.8); 21 | background: -webkit-gradient(linear, left top, right top, from(rgba(47, 109, 174, 0)), color-stop(0.1, rgba(47, 109, 174, 0.8)), color-stop(0.9, rgba(47, 109, 174, 0.8)), to(rgba(47, 109, 174, 0))); 22 | color: #ffffff; 23 | font-weight: bold; 24 | font-size: 22px; 25 | text-align: center; 26 | text-shadow: #000 1px 1px 1px; 27 | text-shadow: #000 1px 1px 3px 1px; 28 | z-index: 20; 29 | } 30 | section#sample.sample001 .messageView .mv-contents .mv-comment, 31 | section#sample.sample002 .messageView .mv-contents .mv-comment { 32 | position: relative; 33 | -moz-box-sizing: border-box; 34 | -webkit-box-sizing: border-box; 35 | box-sizing: border-box; 36 | margin-top: 50px; 37 | height: 160px; 38 | padding: 20px 30px 10px 30px; 39 | background: rgba(33, 54, 94, 0.7); 40 | border-radius: 8px; 41 | color: #ffffff; 42 | z-index: 10; 43 | } 44 | section#sample.sample001 .messageView .mv-contents .mv-comment .pointer, 45 | section#sample.sample002 .messageView .mv-contents .mv-comment .pointer { 46 | position: absolute; 47 | right: 20px; 48 | bottom: 0; 49 | width: 20px; 50 | height: 34px; 51 | background: url(../img//icon_pointer.png) no-repeat; 52 | -moz-background-size: 20px auto; 53 | -o-background-size: 20px auto; 54 | -webkit-background-size: 20px auto; 55 | background-size: 20px auto; 56 | -moz-animation: pointer-anime 1s ease-in-out infinite; 57 | -webkit-animation: pointer-anime 1s ease-in-out infinite; 58 | animation: pointer-anime 1s ease-in-out infinite; 59 | } 60 | section#sample.sample001 .messageView .mv-contents .mv-image.character, 61 | section#sample.sample002 .messageView .mv-contents .mv-image.character { 62 | position: absolute; 63 | right: -62px; 64 | top: -111px; 65 | z-index: 1; 66 | } 67 | section#sample.sample001 .messageView .mv-contents .mv-image.character img, 68 | section#sample.sample002 .messageView .mv-contents .mv-image.character img { 69 | display: block; 70 | width: 300px; 71 | } 72 | section#sample.sample001 .messageView.left .mv-name, 73 | section#sample.sample002 .messageView.left .mv-name { 74 | left: auto; 75 | right: -23px; 76 | } 77 | section#sample.sample001 .messageView.left .mv-contents .mv-image.character, 78 | section#sample.sample002 .messageView.left .mv-contents .mv-image.character { 79 | right: auto; 80 | left: -24px; 81 | } 82 | section#sample.sample001 .messageView.center .mv-contents .mv-image.character, 83 | section#sample.sample002 .messageView.center .mv-contents .mv-image.character { 84 | right: auto; 85 | left: 50%; 86 | margin-left: -150px; 87 | -moz-animation: character-anime 3s ease-in infinite; 88 | -webkit-animation: character-anime 3s ease-in infinite; 89 | animation: character-anime 3s ease-in infinite; 90 | } 91 | @media screen and (max-width: 768px) { 92 | section#sample.sample001 .messageView, 93 | section#sample.sample002 .messageView { 94 | width: auto; 95 | height: auto; 96 | margin: 0 auto 20px; 97 | } 98 | section#sample.sample001 .messageView .mv-contents .mv-name, 99 | section#sample.sample002 .messageView .mv-contents .mv-name { 100 | top: 102px; 101 | left: -11px; 102 | width: 150px; 103 | font-size: 15px; 104 | } 105 | section#sample.sample001 .messageView .mv-contents .mv-image.character, 106 | section#sample.sample002 .messageView .mv-contents .mv-image.character { 107 | right: -15px; 108 | top: -16px; 109 | } 110 | section#sample.sample001 .messageView .mv-contents .mv-image.character img, 111 | section#sample.sample002 .messageView .mv-contents .mv-image.character img { 112 | width: 210px; 113 | } 114 | section#sample.sample001 .messageView .mv-contents .mv-comment, 115 | section#sample.sample002 .messageView .mv-contents .mv-comment { 116 | height: 137px; 117 | } 118 | section#sample.sample001 .messageView .mv-contents .mv-comment .val, 119 | section#sample.sample002 .messageView .mv-contents .mv-comment .val { 120 | font-size: 14px; 121 | } 122 | section#sample.sample001 .messageView .mv-contents .mv-comment .pointer, 123 | section#sample.sample002 .messageView .mv-contents .mv-comment .pointer { 124 | right: 16px; 125 | bottom: -10px; 126 | width: 15px; 127 | height: 34px; 128 | -moz-background-size: 15px auto; 129 | -o-background-size: 15px auto; 130 | -webkit-background-size: 15px auto; 131 | background-size: 15px auto; 132 | } 133 | section#sample.sample001 .messageView.left .mv-name, 134 | section#sample.sample002 .messageView.left .mv-name { 135 | left: auto; 136 | right: -9px; 137 | } 138 | section#sample.sample001 .messageView.left .mv-contents .mv-image.character, 139 | section#sample.sample002 .messageView.left .mv-contents .mv-image.character { 140 | right: auto; 141 | left: -24px; 142 | } 143 | section#sample.sample001 .messageView.center .mv-contents .mv-image.character, 144 | section#sample.sample002 .messageView.center .mv-contents .mv-image.character { 145 | margin-left: -100px; 146 | } 147 | section#sample.sample001 .stage-buttons .btn, 148 | section#sample.sample002 .stage-buttons .btn { 149 | margin-bottom: 10px; 150 | } 151 | } 152 | @-webkit-keyframes character-anime { 153 | 0% { 154 | -moz-transform: translate3d(0, 0, 0); 155 | -ms-transform: translate3d(0, 0, 0); 156 | -webkit-transform: translate3d(0, 0, 0); 157 | transform: translate3d(0, 0, 0); 158 | } 159 | 20% { 160 | -moz-transform: translate3d(0, -18px, 0); 161 | -ms-transform: translate3d(0, -18px, 0); 162 | -webkit-transform: translate3d(0, -18px, 0); 163 | transform: translate3d(0, -18px, 0); 164 | } 165 | 30% { 166 | -moz-transform: translate3d(0, 0, 0); 167 | -ms-transform: translate3d(0, 0, 0); 168 | -webkit-transform: translate3d(0, 0, 0); 169 | transform: translate3d(0, 0, 0); 170 | } 171 | 100% { 172 | -moz-transform: translate3d(0, 0, 0); 173 | -ms-transform: translate3d(0, 0, 0); 174 | -webkit-transform: translate3d(0, 0, 0); 175 | transform: translate3d(0, 0, 0); 176 | } 177 | } 178 | section#sample.sample002 .messageView.flash .effect { 179 | position: absolute; 180 | top: -110px; 181 | left: 0; 182 | display: block; 183 | width: 100%; 184 | height: 400px; 185 | background: #fff; 186 | -moz-animation: flash-anime 3s ease-in 1; 187 | -webkit-animation: flash-anime 3s ease-in 1; 188 | animation: flash-anime 3s ease-in 1; 189 | opacity: 0; 190 | } 191 | @-webkit-keyframes flash-anime { 192 | 0% { 193 | opacity: 0; 194 | } 195 | 20% { 196 | opacity: 0.5; 197 | z-index: 100; 198 | } 199 | 35% { 200 | opacity: 0; 201 | z-index: 100; 202 | } 203 | 50% { 204 | opacity: 0.9; 205 | z-index: 100; 206 | } 207 | 70% { 208 | opacity: 0; 209 | z-index: 100; 210 | } 211 | 100% { 212 | opacity: 0; 213 | z-index: 100; 214 | } 215 | } 216 | section#sample.sample003 .messageView { 217 | position: relative; 218 | height: 320px; 219 | margin-bottom: 20px; 220 | background: #000; 221 | } 222 | section#sample.sample003 .messageView .mv-comment { 223 | width: 630px; 224 | margin: 0 auto; 225 | } 226 | section#sample.sample003 .messageView .mv-comment .val { 227 | font-size: 90px; 228 | font-weight: bold; 229 | color: #f00; 230 | line-height: 320px; 231 | } 232 | @media screen and (max-width: 768px) { 233 | section#sample.sample003 .messageView { 234 | width: auto; 235 | height: auto; 236 | margin: 0 auto 20px; 237 | } 238 | section#sample.sample003 .messageView .mv-comment { 239 | width: 280px; 240 | } 241 | section#sample.sample003 .messageView .mv-comment .val { 242 | font-size: 40px; 243 | } 244 | section#sample.sample003 .stage-buttons .btn { 245 | margin-bottom: 10px; 246 | } 247 | } 248 | 249 | section#sample.sample004 .messageView { 250 | position: relative; 251 | height: 500px; 252 | margin-bottom: 20px; 253 | background: url(../img/sample004/bg_main.jpg) no-repeat; 254 | -moz-background-size: 100% auto; 255 | -o-background-size: 100% auto; 256 | -webkit-background-size: 100% auto; 257 | background-size: 100% auto; 258 | } 259 | section#sample.sample004 .messageView .mv-comment { 260 | padding: 40px; 261 | } 262 | section#sample.sample004 .messageView .mv-comment .val { 263 | font-size: 24px; 264 | color: #fff; 265 | } 266 | section#sample.sample004 .messageView .mv-comment .pointer { 267 | position: absolute; 268 | right: 20px; 269 | bottom: 10px; 270 | width: 20px; 271 | height: 34px; 272 | background: url(../img/icon_pointer.png) no-repeat; 273 | -moz-background-size: 20px auto; 274 | -o-background-size: 20px auto; 275 | -webkit-background-size: 20px auto; 276 | background-size: 20px auto; 277 | -moz-animation: pointer-anime 1s ease-in-out infinite; 278 | -webkit-animation: pointer-anime 1s ease-in-out infinite; 279 | animation: pointer-anime 1s ease-in-out infinite; 280 | } 281 | @media screen and (max-width: 768px) { 282 | section#sample.sample004 .messageView { 283 | width: auto; 284 | height: auto; 285 | min-height: 200px; 286 | margin: 0 auto 20px; 287 | } 288 | section#sample.sample004 .messageView .mv-comment { 289 | padding: 8px; 290 | } 291 | section#sample.sample004 .messageView .mv-comment .val { 292 | font-size: 12px; 293 | } 294 | section#sample.sample004 .messageView .mv-comment .pointer { 295 | bottom: 0; 296 | width: 15px; 297 | height: 34px; 298 | -moz-background-size: 15px auto; 299 | -o-background-size: 15px auto; 300 | -webkit-background-size: 15px auto; 301 | background-size: 15px auto; 302 | } 303 | section#sample.sample004 .stage-buttons .btn { 304 | margin-bottom: 10px; 305 | } 306 | } 307 | -------------------------------------------------------------------------------- /src/css/style.css: -------------------------------------------------------------------------------- 1 | /* 2 | Reset Stylesheet v1.0 3 | Last Updated: 2014-03-02 4 | Author: daisuke.takayama 5 | */ 6 | html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, pre, address, em, img, small, strong, b, i, 7 | dl, dt, dd, ol, ul, li, form, label, table, caption, tbody, tfoot, thead, tr, th, td, article, canvas, footer, 8 | header, hgroup, menu, nav, section, time, audio, video { 9 | margin: 0; 10 | padding: 0; 11 | border: 0; 12 | outline: 0; 13 | font-size: 100%; 14 | vertical-align: baseline; 15 | background: transparent; 16 | } 17 | 18 | body { 19 | line-height: 1; 20 | } 21 | 22 | article, footer, header, hgroup, menu, nav, section { 23 | display: block; 24 | } 25 | 26 | ul { 27 | list-style: none; 28 | } 29 | 30 | a { 31 | margin: 0; 32 | padding: 0; 33 | font-size: 100%; 34 | vertical-align: baseline; 35 | background: transparent; 36 | } 37 | 38 | table { 39 | border-collapse: collapse; 40 | border-spacing: 0; 41 | } 42 | 43 | em, b { 44 | font-style: normal; 45 | } 46 | 47 | img { 48 | vertical-align: top; 49 | } 50 | 51 | hr { 52 | display: block; 53 | height: 1px; 54 | margin: 0; 55 | padding: 0; 56 | border: 0; 57 | outline: 0; 58 | } 59 | 60 | input, select { 61 | vertical-align: middle; 62 | } 63 | 64 | p a { 65 | position: relative; 66 | font-size: 18px; 67 | text-align: center; 68 | } 69 | 70 | .jumbotron.top { 71 | overflow: hidden; 72 | } 73 | 74 | section#top.top .messageView { 75 | position: relative; 76 | width: 700px; 77 | height: 320px; 78 | margin: 80px auto 20px; 79 | cursor: pointer; 80 | } 81 | section#top.top .messageView .mv-contents { 82 | padding: 80px 0 0 0; 83 | } 84 | section#top.top .messageView .mv-contents .mv-name { 85 | position: absolute; 86 | top: 93px; 87 | left: -40px; 88 | width: 300px; 89 | padding: 6px 10px; 90 | background: rgba(47, 109, 174, 0.8); 91 | background: -webkit-gradient(linear, left top, right top, from(rgba(47, 109, 174, 0)), color-stop(0.1, rgba(47, 109, 174, 0.8)), color-stop(0.9, rgba(47, 109, 174, 0.8)), to(rgba(47, 109, 174, 0))); 92 | color: #ffffff; 93 | font-weight: bold; 94 | font-size: 22px; 95 | text-align: center; 96 | text-shadow: #000 1px 1px 1px; 97 | text-shadow: #000 1px 1px 3px 1px; 98 | z-index: 20; 99 | } 100 | section#top.top .messageView .mv-contents .mv-comment { 101 | position: relative; 102 | -moz-box-sizing: border-box; 103 | -webkit-box-sizing: border-box; 104 | box-sizing: border-box; 105 | margin-top: 50px; 106 | height: 160px; 107 | padding: 20px 30px 10px 30px; 108 | background: rgba(33, 54, 94, 0.7); 109 | border-radius: 8px; 110 | color: #ffffff; 111 | z-index: 10; 112 | } 113 | section#top.top .messageView .mv-contents .mv-comment .pointer { 114 | position: absolute; 115 | right: 20px; 116 | bottom: 0; 117 | width: 20px; 118 | height: 34px; 119 | background: url(../img//icon_pointer.png) no-repeat; 120 | -moz-background-size: 20px auto; 121 | -o-background-size: 20px auto; 122 | -webkit-background-size: 20px auto; 123 | background-size: 20px auto; 124 | -moz-animation: pointer-anime 1s ease-in infinite; 125 | -webkit-animation: pointer-anime 1s ease-in infinite; 126 | animation: pointer-anime 1s ease-in infinite; 127 | } 128 | section#top.top .messageView .mv-contents .mv-image.character { 129 | position: absolute; 130 | right: -62px; 131 | top: -111px; 132 | z-index: 1; 133 | } 134 | section#top.top .messageView .mv-contents .mv-image.character img { 135 | display: block; 136 | width: 300px; 137 | } 138 | @media screen and (max-width: 768px) { 139 | section#top.top .messageView { 140 | width: auto; 141 | height: auto; 142 | margin: 0 auto 20px; 143 | } 144 | section#top.top .messageView .mv-contents .mv-name { 145 | top: 102px; 146 | left: -11px; 147 | width: 150px; 148 | font-size: 15px; 149 | } 150 | section#top.top .messageView .mv-contents .mv-image.character { 151 | right: -15px; 152 | top: -16px; 153 | } 154 | section#top.top .messageView .mv-contents .mv-image.character img { 155 | width: 210px; 156 | } 157 | section#top.top .messageView .mv-contents .mv-comment { 158 | height: 137px; 159 | } 160 | section#top.top .messageView .mv-contents .mv-comment .val { 161 | font-size: 14px; 162 | } 163 | section#top.top .messageView .mv-contents .mv-comment .pointer { 164 | right: 16px; 165 | bottom: -10px; 166 | width: 15px; 167 | height: 34px; 168 | -moz-background-size: 15px auto; 169 | -o-background-size: 15px auto; 170 | -webkit-background-size: 15px auto; 171 | background-size: 15px auto; 172 | } 173 | section#top.top .stage-buttons .btn { 174 | margin-bottom: 10px; 175 | } 176 | section#top.top .socialLinkList.share { 177 | margin-top: 30px; 178 | } 179 | section#top.top .optionsTable { 180 | overflow: scroll; 181 | } 182 | } 183 | 184 | @media screen and (max-width: 768px) { 185 | h2.mainTitle { 186 | margin-top: 45px; 187 | } 188 | h2.mainTitle img { 189 | width: 250px; 190 | } 191 | 192 | h2.mainDetail { 193 | font-size: 18px; 194 | } 195 | } 196 | @-webkit-keyframes pointer-anime { 197 | 0% { 198 | -moz-transform: translate3d(0, 0, 0) scale(1); 199 | -ms-transform: translate3d(0, 0, 0) scale(1); 200 | -webkit-transform: translate3d(0, 0, 0) scale(1); 201 | transform: translate3d(0, 0, 0) scale(1); 202 | opacity: 0; 203 | } 204 | 0.1% { 205 | -moz-transform: translate3d(0, -18px, 0) scale(1.1); 206 | -ms-transform: translate3d(0, -18px, 0) scale(1.1); 207 | -webkit-transform: translate3d(0, -18px, 0) scale(1.1); 208 | transform: translate3d(0, -18px, 0) scale(1.1); 209 | opacity: 0; 210 | } 211 | 30% { 212 | -moz-transform: translate3d(0, 0, 0) scale(1); 213 | -ms-transform: translate3d(0, 0, 0) scale(1); 214 | -webkit-transform: translate3d(0, 0, 0) scale(1); 215 | transform: translate3d(0, 0, 0) scale(1); 216 | opacity: 1; 217 | } 218 | 40% { 219 | -moz-transform: translate3d(0, -4px, 0) scale(1); 220 | -ms-transform: translate3d(0, -4px, 0) scale(1); 221 | -webkit-transform: translate3d(0, -4px, 0) scale(1); 222 | transform: translate3d(0, -4px, 0) scale(1); 223 | opacity: 1; 224 | } 225 | 50% { 226 | -moz-transform: translate3d(0, 0, 0) scale(1); 227 | -ms-transform: translate3d(0, 0, 0) scale(1); 228 | -webkit-transform: translate3d(0, 0, 0) scale(1); 229 | transform: translate3d(0, 0, 0) scale(1); 230 | opacity: 1; 231 | } 232 | 94% { 233 | -moz-transform: translate3d(0, 0, 0) scale(1); 234 | -ms-transform: translate3d(0, 0, 0) scale(1); 235 | -webkit-transform: translate3d(0, 0, 0) scale(1); 236 | transform: translate3d(0, 0, 0) scale(1); 237 | opacity: 1; 238 | } 239 | 100% { 240 | -moz-transform: translate3d(0, 0, 0) scale(1); 241 | -ms-transform: translate3d(0, 0, 0) scale(1); 242 | -webkit-transform: translate3d(0, 0, 0) scale(1); 243 | transform: translate3d(0, 0, 0) scale(1); 244 | opacity: 0; 245 | } 246 | } 247 | /* 248 | * navbar 249 | */ 250 | .navbar .fb-like { 251 | margin-top: 16px; 252 | } 253 | 254 | .fbBox { 255 | width: 450px; 256 | margin: 50px auto 0; 257 | } 258 | 259 | /* 260 | * Paragraph Style 261 | */ 262 | .icon.next { 263 | display: inline-block; 264 | width: 17px; 265 | height: 17px; 266 | background: url(../img//icon_sp.png) no-repeat; 267 | -moz-background-size: 20px auto; 268 | -o-background-size: 20px auto; 269 | -webkit-background-size: 20px auto; 270 | background-size: 20px auto; 271 | background-position: left -34px; 272 | } 273 | .icon.social { 274 | display: block; 275 | } 276 | .icon.social.l { 277 | background: url(../img//icon_social_l_sp.png) no-repeat; 278 | -moz-background-size: auto 33px; 279 | -o-background-size: auto 33px; 280 | -webkit-background-size: auto 33px; 281 | background-size: auto 33px; 282 | } 283 | .icon.social.l.facebook { 284 | width: 16px; 285 | height: 30px; 286 | background-position: left top; 287 | } 288 | .icon.social.l.twitter { 289 | width: 32px; 290 | height: 27px; 291 | background-position: -19px top; 292 | } 293 | .icon.social.l.google { 294 | width: 32px; 295 | height: 32px; 296 | background-position: -53px top; 297 | } 298 | .icon.social.l.hatena { 299 | width: 30px; 300 | height: 25px; 301 | background-position: -87px top; 302 | } 303 | .icon.social.l.rss { 304 | width: 33px; 305 | height: 33px; 306 | background-position: -232px top; 307 | } 308 | .icon.social.s { 309 | background: url(../img//icon_social_s_sp.png) no-repeat; 310 | -moz-background-size: auto 15px; 311 | -o-background-size: auto 15px; 312 | -webkit-background-size: auto 15px; 313 | background-size: auto 15px; 314 | } 315 | .icon.social.s.facebook { 316 | width: 8px; 317 | height: 15px; 318 | background-position: left top; 319 | } 320 | .icon.social.s.twitter { 321 | width: 16px; 322 | height: 13px; 323 | background-position: -9px top; 324 | } 325 | .icon.social.s.google { 326 | width: 16px; 327 | height: 16px; 328 | background-position: -26px top; 329 | } 330 | .icon.social.s.hatena { 331 | width: 15px; 332 | height: 13px; 333 | background-position: -43px top; 334 | } 335 | .icon.social.s.feedly { 336 | width: 17px; 337 | height: 15px; 338 | background-position: -59px top; 339 | } 340 | .icon.social.s.pocket { 341 | width: 15px; 342 | height: 13px; 343 | background-position: -78px top; 344 | } 345 | .icon.social.s.line { 346 | width: 17px; 347 | height: 15px; 348 | background-position: -94px top; 349 | } 350 | .icon.social.s.rss { 351 | width: 17px; 352 | height: 17px; 353 | background-position: -116px top; 354 | } 355 | 356 | /* 357 | * .socialLinkList 358 | */ 359 | .socialLinkList::after { 360 | content: ""; 361 | display: block; 362 | clear: both; 363 | } 364 | .socialLinkList > li { 365 | display: block; 366 | } 367 | .socialLinkList.circle > li { 368 | width: 34px; 369 | height: 34px; 370 | background: url(../img//icon_social_circle_sp.png) no-repeat; 371 | -moz-background-size: 205px auto; 372 | -o-background-size: 205px auto; 373 | -webkit-background-size: 205px auto; 374 | background-size: 205px auto; 375 | } 376 | .socialLinkList.circle > li.twitter { 377 | background-position: -42px top; 378 | } 379 | .socialLinkList.circle > li.hatena { 380 | background-position: -84px top; 381 | } 382 | .socialLinkList.circle > li.rss { 383 | background-position: -129px top; 384 | } 385 | .socialLinkList.circle > li.github { 386 | background-position: -171px top; 387 | } 388 | .socialLinkList.circle > li > a { 389 | display: block; 390 | height: 34px; 391 | } 392 | .socialLinkList.share { 393 | margin-top: 60px; 394 | text-align: center; 395 | vertical-align: top; 396 | } 397 | .socialLinkList.share > li { 398 | display: inline-block; 399 | position: relative; 400 | width: 60px; 401 | height: 60px; 402 | margin: 0 8px; 403 | padding: 0; 404 | background: #305097; 405 | -moz-box-sizing: border-box; 406 | -webkit-box-sizing: border-box; 407 | box-sizing: border-box; 408 | border-radius: 4px; 409 | } 410 | .socialLinkList.share > li > .iconWrap { 411 | height: 60px; 412 | } 413 | .socialLinkList.share > li > .iconWrap .icon.social { 414 | margin: 40px auto 0; 415 | } 416 | .socialLinkList.share > li > .iconWrap .icon.social.line { 417 | margin: 24px auto 0; 418 | } 419 | .socialLinkList.share > li.twitter { 420 | background: #00aced; 421 | } 422 | .socialLinkList.share > li.hatena { 423 | background: #008fde; 424 | } 425 | .socialLinkList.share > li.google { 426 | background: #db4a39; 427 | } 428 | .socialLinkList.share > li.pocket { 429 | background: #d3505a; 430 | } 431 | .socialLinkList.share > li.line { 432 | background: #00c300; 433 | } 434 | .socialLinkList.share > li .count { 435 | position: absolute; 436 | top: 5px; 437 | left: 4%; 438 | width: 92%; 439 | height: 15px; 440 | background: #fff; 441 | border-radius: 2px; 442 | } 443 | .socialLinkList.share > li .count > .txt { 444 | font-size: 12px; 445 | text-align: center; 446 | line-height: 15px; 447 | } 448 | .socialLinkList.share > li .count::before { 449 | content: ""; 450 | display: block; 451 | position: absolute; 452 | bottom: -7px; 453 | left: 50%; 454 | height: 0px; 455 | width: 0px; 456 | margin: 0 0 0 -4px; 457 | border-top: #fff 8px solid; 458 | border-left: 4px solid transparent; 459 | border-right: 4px solid transparent; 460 | border-bottom: 0px solid transparent; 461 | } 462 | .socialLinkList.share > li .btn { 463 | position: absolute; 464 | top: 0; 465 | left: 0; 466 | width: 100%; 467 | height: 60px; 468 | z-index: 10; 469 | } 470 | .socialLinkList.share > li .btn > a { 471 | display: block; 472 | width: 100%; 473 | height: 60px; 474 | } 475 | 476 | /* 477 | * footer Style 478 | */ 479 | footer { 480 | position: relative; 481 | height: 150px; 482 | margin-top: 50px; 483 | padding-top: 20px; 484 | background: #3d3d3d; 485 | } 486 | footer::after { 487 | content: ""; 488 | display: block; 489 | clear: both; 490 | } 491 | footer .logo { 492 | float: left; 493 | width: 160px; 494 | padding: 4px 0; 495 | background: #ffffff; 496 | text-align: center; 497 | } 498 | footer .copyright { 499 | position: absolute; 500 | bottom: 6px; 501 | width: 100%; 502 | font-size: 11px; 503 | color: #fff; 504 | text-align: center; 505 | } 506 | footer .socialLinkList.circle { 507 | float: right; 508 | margin-top: 0; 509 | } 510 | footer .socialLinkList.circle > li { 511 | float: left; 512 | margin-right: 10px; 513 | } 514 | -------------------------------------------------------------------------------- /src/css/theme.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webcyou/MessageViewJS/0f0be013ab3a79f3252166905bb18941146b243e/src/css/theme.css -------------------------------------------------------------------------------- /src/html/sample001.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | MessageView.js 17 | 18 | 19 | 20 | 21 | 22 | 23 | 53 | 54 | 55 |
56 | 57 | 69 | 70 | 71 |
72 |
73 |

Message View.js

74 |

Talking Scene JavaScript Library
HTML5, WebGame etc..

75 | 76 | 77 |
78 |
79 |

80 |
81 |

82 |

83 |
84 |

85 |
86 |
87 | 88 | 89 | 98 | 99 |
100 |
101 | 102 | 103 |
104 |

Source

105 | 109 |
110 |
111 |
var message = new MessageViewer({
112 |     "data": [{
113 |         "side_class": "right",
114 |         "name": "生方 すみれ",
115 |         "message":"このJavaScriptライブラリ。<br>普段書いいているブログより反響がいいみたいね。。",
116 |         "img_url": "../img/sample001/character_0001.png"
117 |     },
118 |     {
119 |         "side_class": "left",
120 |         "name": "斑 王石",
121 |         "message":"な、な、なにぃいいいぃいい〜〜〜〜!!<br>う、う、嬉しいじゃねーかぁ!!?",
122 |         "img_url": "../img/sample001/character_0002.png"
123 |     },
124 |     {
125 |         "message":"で、でもよーーー。"
126 |     },
127 |        {
128 |         "side_class": "center",
129 |         "name": "桜 結衣",
130 |         "message":"Web帳の方もよろしくね!!!!<br>URLは「http://www.webcyou.com/」よ!!<br>よろしくぅ〜!",
131 |         "img_url": "../img/sample001/character_0003.png"
132 |     }],
133 |     "option": {
134 |         "loop": true
135 |     }
136 | });
137 |
138 |
139 |
140 | 141 | 142 |
143 |

Demo Creator

144 |

Daisuke Takayama

145 |

web帳:http://www.webcyou.com/

146 |
147 | 148 |
149 |
150 | 151 | 157 |
158 | 159 |
160 |
161 | 162 | -------------------------------------------------------------------------------- /src/html/sample002.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | MessageView.js 17 | 18 | 19 | 20 | 21 | 22 | 23 | 59 | 60 | 61 |
62 | 63 | 75 | 76 | 77 |
78 |
79 |

Message View.js

80 |

Talking Scene JavaScript Library
HTML5, WebGame etc..

81 | 82 | 83 |
84 |
85 |

86 |
87 |

88 |

89 |
90 |

91 |
92 |

93 |
94 | 95 | 96 | 105 | 106 |
107 |
108 | 109 | 110 |
111 |

Source

112 | 116 |
117 |
118 |
var message = new MessageViewer({
119 |     "data": [{
120 |         "side_class": "right",
121 |         "name": "生方 すみれ",
122 |         "message":"え?<br>あなたは誰??",
123 |         "img_url": "../img/sample002/character_0001.png"
124 |     },
125 |     {
126 |         "message":"何処からやって来たの???"
127 |     },
128 |     {
129 |         "side_class": "left",
130 |         "name": "撫月 憐",
131 |         "message":"エデイドゥ・イニヤ・ゲ×ルグエ<br>ラー×ムソーラッソ×$・・・・",
132 |         "img_url": "../img/sample002/character_0002.png"
133 |     },
134 |     {
135 |         "message":"×$&ソ×ルルア×ル×$・・・・"
136 |     },
137 |        {
138 |         "side_class": "flash",
139 |         "name": "生方 すみれ",
140 |         "message":"き、きゃあぁーーー!!!!",
141 |         "img_url": "../img/sample002/character_0001.png"
142 |     },
143 |     {
144 |         "message":"な、なんだったの??今の??"
145 |     }],
146 |     "option": {
147 |         "loop": true
148 |     }
149 | });
150 |
151 |
152 |
153 | 154 | 155 |
156 |

Demo Creator

157 |

Daisuke Takayama

158 |

web帳:http://www.webcyou.com/

159 |
160 | 161 |
162 |
163 | 164 | 170 |
171 | 172 |
173 |
174 | 175 | -------------------------------------------------------------------------------- /src/html/sample003.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | MessageView.js 17 | 18 | 19 | 20 | 21 | 22 | 23 | 37 | 38 | 39 |
40 | 41 | 53 | 54 | 55 |
56 |
57 |

Message View.js

58 |

Talking Scene JavaScript Library
HTML5, WebGame etc..

59 | 60 | 61 |
62 |
63 |

64 |
65 |

66 |

67 |
68 |

69 |
70 |
71 | 72 | 73 | 82 | 83 |
84 |
85 | 86 | 87 |
88 |

Source

89 | 93 |
94 |
95 |
var message = new MessageViewer({
 96 |     "data": [{
 97 |         "message": "悪か?正義か?"
 98 |     }],
 99 |     "option": {
100 |         "loop": true,
101 |         "speed": 430,
102 |         "ignoreSkip": true
103 |     }
104 | });
105 |
106 |
107 |
108 | 109 | 110 |
111 |

Demo Creator

112 |

Daisuke Takayama

113 |

web帳:http://www.webcyou.com/

114 |
115 | 116 |
117 |
118 | 119 | 125 |
126 | 127 |
128 |
129 | 130 | -------------------------------------------------------------------------------- /src/html/sample004.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | MessageView.js 17 | 18 | 19 | 20 | 21 | 22 | 23 | 53 | 54 | 55 |
56 | 57 | 69 | 70 | 71 |
72 |
73 |

Message View.js

74 |

Talking Scene JavaScript Library
HTML5, WebGame etc..

75 | 76 | 77 |
78 |
79 |

80 |
81 |

82 |

83 |
84 |

85 |
86 |
87 | 88 | 89 | 98 | 99 |
100 |
101 | 102 | 103 |
104 |

Source

105 | 109 |
110 |
111 |
var message = new MessageViewer({
112 |     "data": [{
113 |         "message": "それから僕たちは花火大会へと向かった。<br>この花火大会を迎えることによって<br>毎年僕は夏の終わりを感じていたのだった。<br><br>先ほど喧嘩して機嫌を悪くした美佳沙の顔にも少しずつ笑みが浮かんできた。"
114 |     },
115 |     {
116 |         "message": "ドォーン!<br>ドーン!ドーン!<br><br>僕たちは花火の音の鳴る方へと自然に足が進む。"
117 |     },
118 |     {
119 |         "message": "ドォーン!<br>ドーン!ドーン!<br><br>人混みの中を切り分け、夜空に浮かぶ花火に少しでも近づこうと僕たちは足を進める。<br>「この辺が丁度見やすい場所でもあるな。」と僕は思い、少し歩くペースを落とした。<br><br>その時だった。"
120 |     },
121 |     {
122 |         "message": "「ハッ」とした表情をした美佳沙が立ち止まり、<br>少し慌ながらも僕に向かってこう言った。"
123 |     },
124 |     {
125 |         "message": "「このJavaScriptライブラリ。」<br>「MessageViewJSだったかしら?」<br><br>「とても便利じゃない??」"
126 |     },
127 |     {
128 |         "message": "もう返答は明確だった。<br><br>不思議そうな表情のまま返答を待つ美佳沙に向かって、<br>僕は少しはニヒルな笑顔を浮かべこう答えた。"
129 |     },
130 |     {
131 |         "message": "「OH!! YES!!」"
132 |     }],
133 |     "option": {
134 |         "loop": true
135 |     }
136 | });
137 |
138 |
139 |
140 | 141 | 142 |
143 |

Demo Creator

144 |

Daisuke Takayama

145 |

web帳:http://www.webcyou.com/

146 |
147 | 148 |
149 |
150 | 151 | 157 |
158 | 159 |
160 |
161 | 162 | -------------------------------------------------------------------------------- /src/img/character_0001.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webcyou/MessageViewJS/0f0be013ab3a79f3252166905bb18941146b243e/src/img/character_0001.png -------------------------------------------------------------------------------- /src/img/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webcyou/MessageViewJS/0f0be013ab3a79f3252166905bb18941146b243e/src/img/favicon.ico -------------------------------------------------------------------------------- /src/img/icon_pointer.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webcyou/MessageViewJS/0f0be013ab3a79f3252166905bb18941146b243e/src/img/icon_pointer.png -------------------------------------------------------------------------------- /src/img/icon_social_circle_sp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webcyou/MessageViewJS/0f0be013ab3a79f3252166905bb18941146b243e/src/img/icon_social_circle_sp.png -------------------------------------------------------------------------------- /src/img/icon_social_s_sp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webcyou/MessageViewJS/0f0be013ab3a79f3252166905bb18941146b243e/src/img/icon_social_s_sp.png -------------------------------------------------------------------------------- /src/img/main_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webcyou/MessageViewJS/0f0be013ab3a79f3252166905bb18941146b243e/src/img/main_logo.png -------------------------------------------------------------------------------- /src/img/pic_coming_soon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webcyou/MessageViewJS/0f0be013ab3a79f3252166905bb18941146b243e/src/img/pic_coming_soon.png -------------------------------------------------------------------------------- /src/img/sample001/character_0001.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webcyou/MessageViewJS/0f0be013ab3a79f3252166905bb18941146b243e/src/img/sample001/character_0001.png -------------------------------------------------------------------------------- /src/img/sample001/character_0002.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webcyou/MessageViewJS/0f0be013ab3a79f3252166905bb18941146b243e/src/img/sample001/character_0002.png -------------------------------------------------------------------------------- /src/img/sample001/character_0003.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webcyou/MessageViewJS/0f0be013ab3a79f3252166905bb18941146b243e/src/img/sample001/character_0003.png -------------------------------------------------------------------------------- /src/img/sample001/screen_shot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webcyou/MessageViewJS/0f0be013ab3a79f3252166905bb18941146b243e/src/img/sample001/screen_shot.png -------------------------------------------------------------------------------- /src/img/sample002/character_0001.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webcyou/MessageViewJS/0f0be013ab3a79f3252166905bb18941146b243e/src/img/sample002/character_0001.png -------------------------------------------------------------------------------- /src/img/sample002/character_0002.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webcyou/MessageViewJS/0f0be013ab3a79f3252166905bb18941146b243e/src/img/sample002/character_0002.png -------------------------------------------------------------------------------- /src/img/sample002/screen_shot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webcyou/MessageViewJS/0f0be013ab3a79f3252166905bb18941146b243e/src/img/sample002/screen_shot.png -------------------------------------------------------------------------------- /src/img/sample003/screen_shot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webcyou/MessageViewJS/0f0be013ab3a79f3252166905bb18941146b243e/src/img/sample003/screen_shot.png -------------------------------------------------------------------------------- /src/img/sample004/bg_main.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webcyou/MessageViewJS/0f0be013ab3a79f3252166905bb18941146b243e/src/img/sample004/bg_main.jpg -------------------------------------------------------------------------------- /src/img/sample004/screen_shot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webcyou/MessageViewJS/0f0be013ab3a79f3252166905bb18941146b243e/src/img/sample004/screen_shot.png -------------------------------------------------------------------------------- /src/img/screen_shot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webcyou/MessageViewJS/0f0be013ab3a79f3252166905bb18941146b243e/src/img/screen_shot.png -------------------------------------------------------------------------------- /src/img/screen_shot_ogp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webcyou/MessageViewJS/0f0be013ab3a79f3252166905bb18941146b243e/src/img/screen_shot_ogp.png -------------------------------------------------------------------------------- /src/js/message_view.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright (c) 2015 Daisuke Takayama 3 | * Released under the MIT license 4 | * http://opensource.org/licenses/mit-license.php 5 | * 6 | * Author: Daisuke Takayama 7 | * URL: http://www.webcyou.com/ 8 | */ 9 | 'use strict'; 10 | (function(global) { 11 | var document = global.document; 12 | 13 | /** 14 | * Utility Class 15 | * @public 16 | * @param option 17 | */ 18 | var Utility = (function() { 19 | function Utility(option) { 20 | this.support = { 21 | touch: ("ontouchstart" in window) 22 | }; 23 | this.vendor = { 24 | defultEvent: "click", 25 | transitionend: this.whichTransitionEvent(), 26 | animationend: this.whichAnimationEvent() 27 | }; 28 | if(this.support.touch) { 29 | this.vendor.defultEvent = 'touchend'; 30 | } 31 | } 32 | Utility.prototype.whichAnimationEvent = function() { 33 | var t, 34 | el = document.createElement("fakeelement"); 35 | var animations = { 36 | "animation" : "animationend", 37 | "OAnimation" : "oAnimationEnd", 38 | "MozAnimation" : "animationend", 39 | "WebkitAnimation": "webkitAnimationEnd" 40 | }; 41 | for(t in animations) { 42 | if (el.style[t] !== undefined){ 43 | return animations[t]; 44 | } 45 | } 46 | }; 47 | Utility.prototype.whichTransitionEvent = function() { 48 | var t, 49 | el = document.createElement("fakeelement"); 50 | var transitions = { 51 | "transition" : "transitionend", 52 | "OTransition" : "oTransitionEnd", 53 | "MozTransition" : "transitionend", 54 | "WebkitTransition": "webkitTransitionEnd" 55 | }; 56 | for (t in transitions){ 57 | if (el.style[t] !== undefined){ 58 | return transitions[t]; 59 | } 60 | } 61 | }; 62 | return Utility; 63 | })(); 64 | 65 | 66 | /** 67 | * MessageView constructor 68 | * @public 69 | * @param {{data: params}} args 70 | */ 71 | function MessageView(data, args, util) { 72 | this.utility = util; 73 | this.view = document.querySelector(args.view); 74 | this.contents = document.querySelector(args.contents); 75 | this.character = document.querySelector(args.character); 76 | this.characterImg = document.querySelector(args.characterImg); 77 | this.messageView = document.querySelector(args.messageView); 78 | this.message = document.querySelector(args.message); 79 | this.name = document.querySelector(args.name); 80 | this.pointer = document.querySelector(args.pointer); 81 | 82 | this.MESSAGE_VIEW_CLASS = this.view.className; //default messageView 83 | this.MESSAGE_CLOSE_CLASS = args.messageCloseClass; //default .hide 84 | this.MESSAGE_OPEN_CLASS = args.messageOpenClass; //default .in 85 | this.CHARACTER_CLASS = this.character.className; 86 | this.MESSAGE_CLASS = this.message.className; 87 | 88 | this.init.apply(this, arguments); 89 | } 90 | MessageView.prototype = { 91 | init: function() { 92 | }, 93 | 94 | isSet: function(args) { 95 | if(args !== undefined && args !== void 0) { 96 | return true; 97 | } else { 98 | return false; 99 | } 100 | }, 101 | 102 | open: function() { 103 | if(this.view.classList.contains(this.MESSAGE_CLOSE_CLASS)) { 104 | this.view.classList.remove(this.MESSAGE_CLOSE_CLASS); 105 | } 106 | }, 107 | 108 | close: function() { 109 | this.view.classList.add(this.MESSAGE_CLOSE_CLASS); 110 | this.message.classList.add(this.MESSAGE_OPEN_CLASS); 111 | this.character.classList.add(this.MESSAGE_OPEN_CLASS); 112 | }, 113 | 114 | commentChange: function(data) { 115 | this.message.innerHTML = ''; 116 | this.message.innerHTML = data; 117 | this.messageView.classList.remove(this.MESSAGE_OPEN_CLASS); 118 | }, 119 | 120 | commentClear: function() { 121 | this.message.innerHTML = ''; 122 | }, 123 | 124 | characterChange: function(data) { 125 | var that = this; 126 | if (data && data.img_url) { 127 | this.characterImg.src = data.img_url; 128 | setTimeout(function() { 129 | that.character.className = that.CHARACTER_CLASS; 130 | that.character.addEventListener(that.utility.vendor.transitionend, function character() { 131 | that.messageView.className = that.MESSAGE_CLASS; 132 | this.removeEventListener(that.utility.vendor.transitionend, character, false); 133 | }); 134 | }, 80); 135 | } else { 136 | that.character.className = that.CHARACTER_CLASS; 137 | } 138 | }, 139 | 140 | nameChange: function(data) { 141 | this.name.innerHTML = data.name; 142 | }, 143 | 144 | sideChange: function(sideClassName) { 145 | if(this.isSet(sideClassName) && sideClassName !== null){ 146 | if(this.view.classList.contains(sideClassName)) { 147 | this.view.classList.remove(sideClassName); 148 | } 149 | this.view.className = this.MESSAGE_VIEW_CLASS; 150 | } 151 | this.view.classList.add(sideClassName); 152 | }, 153 | 154 | showPointer: function() { 155 | this.pointer.style.visibility = 'visible'; 156 | }, 157 | 158 | hidePointer: function() { 159 | this.pointer.style.visibility = 'hidden'; 160 | }, 161 | 162 | disablePointer: function() { 163 | this.pointer.style.display = 'none'; 164 | } 165 | }; 166 | 167 | 168 | /** 169 | * Message constructor 170 | * @public 171 | */ 172 | function Message(args, fn) { 173 | var that = this, 174 | option = args.option; 175 | 176 | this.option = { 177 | view: ".messageView#default", 178 | contents: ".messageView#default .mv-contents", 179 | character: ".messageView#default .mv-contents .mv-image.character", 180 | characterImg: ".messageView#default .mv-contents .mv-image.character img", 181 | messageView: ".messageView#default .mv-contents .mv-comment", 182 | message: ".messageView#default .mv-contents .mv-comment .val", 183 | name: ".messageView#default .mv-contents .mv-name", 184 | pointer: ".messageView#default .mv-contents .mv-comment .pointer", 185 | messageOpenClass: "in", 186 | messageCloseClass: "hide", 187 | page: 0, 188 | speed: 'normal', 189 | ignoreSkip: false, 190 | loop: false, 191 | isPointer: true, 192 | isClose: true 193 | }; 194 | this.addTime = 30; 195 | this.loading = false; 196 | 197 | this.isNumber = function(x) { 198 | if( typeof(x) != 'number' && typeof(x) != 'string' ) 199 | return false; 200 | else 201 | return (x == parseFloat(x) && isFinite(x)); 202 | }; 203 | 204 | // Option Speed 205 | if(option !== undefined) { 206 | for (var property in option) { 207 | this.option[property] = option[property]; 208 | } 209 | switch (this.option.speed) { 210 | case 'normal': 211 | that.addTime = 30; 212 | break; 213 | case 'fast': 214 | that.addTime = 10; 215 | break; 216 | case 'slow': 217 | that.addTime = 80; 218 | break; 219 | default: 220 | that.addTime = 30; 221 | break; 222 | } 223 | if(this.isNumber(this.option.speed)) { 224 | that.addTime = Math.abs(Math.round(this.option.speed)); 225 | } 226 | } 227 | 228 | // Message Value JSON 229 | if(args !== undefined) { 230 | this.data = args.data; 231 | this.selectedNum = this.option.page; 232 | this.selectedData = args.data[0]; 233 | this.maxNum = args.data.length; 234 | } 235 | 236 | this.set = function(source){ 237 | for (var property in source) { 238 | this.option[property] = source[property]; 239 | } 240 | return this; 241 | }; 242 | 243 | this.messageView = document.querySelector(this.option.view); 244 | 245 | this.onClick = function (e) { 246 | e.stopPropagation(); 247 | e.preventDefault(); 248 | that.next.call(that); 249 | }; 250 | 251 | this.utility = new Utility(this.option); 252 | this.messageView.addEventListener(this.utility.vendor.defultEvent, that.onClick, true); 253 | 254 | if(args.data !== undefined) { 255 | this.init.apply(this, [args.data]); 256 | } 257 | 258 | this.callBack = function() { 259 | if(fn !== void 0) { 260 | fn(); 261 | } 262 | }; 263 | // メッセージスキップの判定 264 | this.skip = false; 265 | } 266 | 267 | Message.prototype = { 268 | init: function(val) { 269 | var that = this; 270 | this.View = new MessageView(this.data, this.option, this.utility); 271 | if(!this.option.isPointer) { 272 | this.disablePointer(); 273 | } 274 | if(this.maxNum > 0) { 275 | that.open(val.data); 276 | } 277 | }, 278 | 279 | isSet: function(args) { 280 | if(args !== undefined && args !== void 0) { 281 | return true; 282 | } else { 283 | return false; 284 | } 285 | }, 286 | 287 | open: function(data) { 288 | if(this.isSet(this.selectedData.side_class)) { 289 | this.sideChange(); 290 | } 291 | if(this.isSet(this.selectedData.name)) { 292 | this.nameChange(); 293 | } 294 | if(this.isSet(this.selectedData.img_url)) { 295 | this.characterChange(); 296 | } else { 297 | this.characterReset(); 298 | } 299 | if(this.isSet(this.selectedData.message)) { 300 | this.commentChange(); 301 | } 302 | this.View.open(data); 303 | }, 304 | 305 | close: function() { 306 | this.messageView.removeEventListener(this.utility.vendor.defultEvent, this.onClick, true); 307 | this.View.close(); 308 | }, 309 | 310 | next: function() { 311 | if (this.loading === true) { 312 | if (!this.option.ignoreSkip) { 313 | this.skip = true; 314 | } 315 | return; 316 | } 317 | this.commentClear(); 318 | this.selectedNum += 1; 319 | if(this.maxNum > this.selectedNum) { 320 | this.selectedData = this.data[this.selectedNum]; 321 | if(this.selectedData.side_class !== undefined) { 322 | this.sideChange(); 323 | } 324 | if(this.selectedData.name) { 325 | this.nameChange(); 326 | } 327 | if(this.selectedData.img_url) { 328 | this.characterChange(); 329 | } else { 330 | this.characterReset(); 331 | } 332 | if(this.selectedData.message) { 333 | this.commentChange(); 334 | } 335 | } else if (this.maxNum <= this.selectedNum) { 336 | // loop 337 | if(this.option.loop) { 338 | this.selectedNum = this.option.page; 339 | this.selectedData = this.data[this.selectedNum]; 340 | this.open(this.data); 341 | } else { 342 | this.end(); 343 | if (this.option.isClose) { 344 | this.close(); 345 | } 346 | } 347 | } 348 | }, 349 | 350 | end: function() { 351 | this.callBack(); 352 | }, 353 | 354 | characterChange: function() { 355 | this.View.characterChange(this.selectedData); 356 | }, 357 | 358 | characterReset: function() { 359 | this.View.characterChange(null); 360 | }, 361 | 362 | sideChange: function() { 363 | this.View.sideChange(this.selectedData.side_class); 364 | }, 365 | 366 | commentChange: function() { 367 | var that = this, 368 | str = this.selectedData.message.split(/]*)?\/?>/g), 369 | splitComment = [], 370 | setComment = '', 371 | interval = this.addTime; 372 | 373 | this.hidePointer(); 374 | for(var i in str) { 375 | if (splitComment.length > 0) { 376 | splitComment.push('
'); 377 | } 378 | splitComment.push(str[i].split('')); 379 | } 380 | 381 | // 平坦化 382 | splitComment = that.flatten(splitComment); 383 | 384 | that.skip = false; 385 | that.loading = true; 386 | 387 | var addChar = function() { 388 | var c = splitComment.shift(); 389 | 390 | if (!c) { 391 | that.loading = false; 392 | that.showPointer(); 393 | return false; 394 | } 395 | setComment += c; 396 | 397 | if (that.skip) { 398 | interval = 0; 399 | setComment += splitComment.join(''); 400 | splitComment = []; 401 | } 402 | that.View.commentChange(setComment); 403 | setTimeout(addChar, interval); 404 | }; 405 | 406 | addChar(); 407 | }, 408 | 409 | flatten: function(val) { 410 | var mixMessage = []; 411 | for(var i = 0; val.length > i; i++) { 412 | if(val[i] instanceof Array) { 413 | for(var n = 0; val[i].length > n; n++) { 414 | mixMessage.push(val[i][n]); 415 | } 416 | } else { 417 | mixMessage.push(val[i]); 418 | } 419 | } 420 | return mixMessage; 421 | }, 422 | 423 | commentClear: function() { 424 | clearTimeout(this.timer); 425 | this.View.commentClear(); 426 | }, 427 | 428 | nameChange: function() { 429 | this.View.nameChange(this.selectedData); 430 | }, 431 | 432 | showPointer: function() { 433 | if(this.option.isPointer) { 434 | this.View.showPointer(); 435 | } 436 | }, 437 | 438 | hidePointer: function() { 439 | this.View.hidePointer(); 440 | }, 441 | 442 | disablePointer: function() { 443 | this.View.disablePointer(); 444 | }, 445 | 446 | setData: function(data) { 447 | this.data = data; 448 | }, 449 | 450 | getData: function() { 451 | return this.data; 452 | } 453 | 454 | }; 455 | 456 | // namespaceにexport 457 | if (global.MessageViewer === void 0) { 458 | global.MessageViewer = {}; 459 | } 460 | global.MessageViewer = Message; 461 | })(this); 462 | -------------------------------------------------------------------------------- /src/scss/_common_inc.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | @import "compass"; 3 | 4 | @import "setting"; 5 | @import "mixin-style"; 6 | @import "reset"; -------------------------------------------------------------------------------- /src/scss/_mixin-style.scss: -------------------------------------------------------------------------------- 1 | @mixin clearfix { 2 | &::after { content: ""; display: block; clear: both; } 3 | } 4 | @mixin createStyle { 5 | content: ""; 6 | display: block; 7 | position: absolute; 8 | } 9 | @mixin ellipsis { 10 | overflow: hidden; 11 | white-space: nowrap; 12 | text-overflow: ellipsis; 13 | } -------------------------------------------------------------------------------- /src/scss/_reset.scss: -------------------------------------------------------------------------------- 1 | /* 2 | Reset Stylesheet v1.0 3 | Last Updated: 2014-03-02 4 | Author: daisuke.takayama 5 | */ 6 | html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, pre, address, em, img, small, strong, b, i, 7 | dl, dt, dd, ol, ul, li, form, label, table, caption, tbody, tfoot, thead, tr, th, td, article, canvas, footer, 8 | header, hgroup, menu, nav, section, time, audio, video { 9 | margin: 0; 10 | padding: 0; 11 | border: 0; 12 | outline: 0; 13 | font-size: 100%; 14 | vertical-align: baseline; 15 | background: transparent; 16 | } 17 | body { line-height: 1; } 18 | article, footer, header, hgroup, menu, nav, section { display: block; } 19 | ul { list-style: none; } 20 | a { 21 | margin: 0; 22 | padding: 0; 23 | font-size: 100%; 24 | vertical-align: baseline; 25 | background: transparent; 26 | } 27 | table { 28 | border-collapse: collapse; 29 | border-spacing: 0; 30 | } 31 | em, b { font-style: normal; } 32 | img { vertical-align: top; } 33 | hr { 34 | display: block; 35 | height: 1px; 36 | margin: 0; 37 | padding: 0; 38 | border: 0; 39 | outline: 0; 40 | } 41 | input, select { vertical-align: middle; } -------------------------------------------------------------------------------- /src/scss/_setting.scss: -------------------------------------------------------------------------------- 1 | $experimental-support-for-mozilla: false; 2 | $experimental-support-for-microsoft: false; 3 | $experimental-support-for-opera: false; 4 | 5 | $use-prefix-webkit: true; 6 | $use-prefix-blink: false; 7 | $use-prefix-moz: false; 8 | $use-prefix-ms: false; 9 | $use-prefix-o: false; 10 | 11 | $baseWidth: 1000px; 12 | $baseHeight: 800px; 13 | $imgPath: "../img/"; 14 | 15 | $mainColor: #fff; 16 | $subColor: #eee; 17 | $accentColor: #e73562; 18 | $fontColor: #333; 19 | $noticeColor: #f00; 20 | 21 | $linkColor: #fff; 22 | $linkColorVisited: #39f; 23 | $linkColorHover: #00f; 24 | $linkColorActive: #00f; 25 | 26 | $yellow: #fbd93c; 27 | 28 | $fontfamily: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro W3", sans-serif; -------------------------------------------------------------------------------- /src/scss/sample.scss: -------------------------------------------------------------------------------- 1 | @charset "UTF-8"; 2 | @import "compass"; 3 | 4 | @import "setting"; 5 | @import "mixin-style"; 6 | 7 | 8 | //sample001 9 | section#sample.sample001, 10 | section#sample.sample002 { 11 | .messageView { 12 | position: relative; 13 | width: 700px; 14 | height: 320px; 15 | margin: 80px auto 20px; 16 | cursor: pointer; 17 | .mv-contents { 18 | padding: 80px 0 0 0; 19 | .mv-name { 20 | position: absolute; 21 | top: 93px; 22 | left: -40px; 23 | width: 300px; 24 | padding: 6px 10px; 25 | background: rgba(47, 109, 174, 0.8); 26 | background: -webkit-gradient(linear, left top, right top, from(rgba(47, 109, 174, 0)), color-stop(0.1, rgba(47, 109, 174, 0.8)), color-stop(0.9, rgba(47, 109, 174, 0.8)), to(rgba(47, 109, 174, 0))); 27 | color: #ffffff; 28 | font-weight: bold; 29 | font-size: 22px; 30 | text-align: center; 31 | @include text-shadow(#000 1px 1px 3px 1px); 32 | z-index: 20; 33 | } 34 | .mv-comment { 35 | position: relative; 36 | @include box-sizing(border-box); 37 | margin-top: 50px; 38 | height: 160px; 39 | padding: 20px 30px 10px 30px; 40 | background: rgba(33,54,94, 0.7); 41 | border-radius: 8px; 42 | color: #ffffff; 43 | z-index: 10; 44 | .pointer { 45 | position: absolute; 46 | right: 20px; 47 | bottom: 0; 48 | width: 20px; 49 | height: 34px; 50 | background: url(#{$imgPath}/icon_pointer.png) no-repeat; 51 | @include background-size(20px auto); 52 | @include animation(pointer-anime 1s ease-in-out infinite); 53 | } 54 | } 55 | .mv-image.character { 56 | position: absolute; 57 | right: -62px; 58 | top: -111px; 59 | z-index: 1; 60 | img { 61 | display: block; 62 | width: 300px; 63 | } 64 | } 65 | } 66 | 67 | &.left { 68 | .mv-name { 69 | left: auto; 70 | right: -23px; 71 | } 72 | .mv-contents { 73 | .mv-image.character { 74 | right: auto; 75 | left: -24px; 76 | } 77 | } 78 | } 79 | 80 | &.center { 81 | .mv-contents { 82 | .mv-image.character { 83 | right: auto; 84 | left: 50%; 85 | margin-left: -150px; 86 | @include animation(character-anime 3s ease-in infinite); 87 | } 88 | } 89 | } 90 | } 91 | 92 | @media screen and (max-width: 768px) { 93 | .messageView { 94 | width: auto; 95 | height: auto; 96 | margin: 0 auto 20px; 97 | .mv-contents { 98 | .mv-name { 99 | top: 102px; 100 | left: -11px; 101 | width: 150px; 102 | font-size: 15px; 103 | } 104 | .mv-image.character { 105 | right: -15px; 106 | top: -16px; 107 | img { width: 210px; } 108 | } 109 | .mv-comment { 110 | height: 137px; 111 | .val { font-size: 14px; } 112 | .pointer { 113 | right: 16px; 114 | bottom: -10px; 115 | width: 15px; 116 | height: 34px; 117 | @include background-size(15px auto); 118 | } 119 | } 120 | } 121 | 122 | &.left { 123 | .mv-name { 124 | left: auto; 125 | right: -9px; 126 | } 127 | .mv-contents { 128 | .mv-image.character { 129 | right: auto; 130 | left: -24px; 131 | } 132 | } 133 | } 134 | &.center .mv-contents .mv-image.character { margin-left: -100px; } 135 | } 136 | .stage-buttons { 137 | .btn { margin-bottom: 10px; } 138 | } 139 | } 140 | 141 | @-webkit-keyframes character-anime { 142 | 0% { @include transform(translate3d(0,0,0)); } 143 | 20% { @include transform(translate3d(0,-18px,0)); } 144 | 30% { @include transform(translate3d(0,0,0)); } 145 | 100% { @include transform(translate3d(0,0,0)); } 146 | } 147 | } 148 | 149 | //sample002 150 | section#sample.sample002 { 151 | .messageView { 152 | &.flash { 153 | .effect { 154 | position: absolute; 155 | top: -110px; 156 | left: 0; 157 | display: block; 158 | width: 100%; 159 | height: 400px; 160 | background: #fff; 161 | @include animation(flash-anime 3s ease-in 1); 162 | opacity: 0; 163 | } 164 | } 165 | } 166 | @-webkit-keyframes flash-anime { 167 | 0% { 168 | opacity: 0; 169 | } 170 | 20% { 171 | opacity: 0.5; 172 | z-index: 100; 173 | } 174 | 35% { 175 | opacity: 0; 176 | z-index: 100; 177 | } 178 | 50% { 179 | opacity: 0.9; 180 | z-index: 100; 181 | } 182 | 70% { 183 | opacity: 0; 184 | z-index: 100; 185 | } 186 | 100% { 187 | opacity: 0; 188 | z-index: 100; 189 | } 190 | } 191 | } 192 | 193 | 194 | //sample003 195 | section#sample.sample003 { 196 | .messageView { 197 | position: relative; 198 | height: 320px; 199 | margin-bottom: 20px; 200 | background: #000; 201 | .mv-comment { 202 | width: 630px; 203 | margin: 0 auto; 204 | .val { 205 | font-size: 90px; 206 | font-weight: bold; 207 | color: #f00; 208 | line-height: 320px; 209 | } 210 | } 211 | } 212 | @media screen and (max-width: 768px) { 213 | .messageView { 214 | width: auto; 215 | height: auto; 216 | margin: 0 auto 20px; 217 | .mv-comment { 218 | width: 280px; 219 | .val { font-size: 40px; } 220 | } 221 | } 222 | .stage-buttons { 223 | .btn { margin-bottom: 10px; } 224 | } 225 | } 226 | } 227 | 228 | 229 | //sample004 230 | section#sample.sample004 { 231 | .messageView { 232 | position: relative; 233 | height: 500px; 234 | margin-bottom: 20px; 235 | background: url(#{$imgPath}sample004/bg_main.jpg) no-repeat; 236 | @include background-size(100% auto); 237 | .mv-comment { 238 | padding: 40px; 239 | .val { 240 | font-size: 24px; 241 | color: #fff; 242 | } 243 | .pointer { 244 | position: absolute; 245 | right: 20px; 246 | bottom: 10px; 247 | width: 20px; 248 | height: 34px; 249 | background: url(#{$imgPath}icon_pointer.png) no-repeat; 250 | @include background-size(20px auto); 251 | @include animation(pointer-anime 1s ease-in-out infinite); 252 | } 253 | } 254 | } 255 | @media screen and (max-width: 768px) { 256 | .messageView { 257 | width: auto; 258 | height: auto; 259 | min-height: 200px; 260 | margin: 0 auto 20px; 261 | .mv-comment { 262 | padding: 8px; 263 | .val { font-size: 12px; } 264 | .pointer { 265 | bottom: 0; 266 | width: 15px; 267 | height: 34px; 268 | @include background-size(15px auto); 269 | } 270 | } 271 | } 272 | .stage-buttons { 273 | .btn { margin-bottom: 10px; } 274 | } 275 | } 276 | } -------------------------------------------------------------------------------- /src/scss/style.scss: -------------------------------------------------------------------------------- 1 | @import "common_inc"; 2 | @import "theme"; 3 | 4 | p a { 5 | position: relative; 6 | font-size: 18px; 7 | text-align: center; 8 | } 9 | .jumbotron.top { overflow: hidden; } 10 | 11 | //top 12 | section#top.top { 13 | .messageView { 14 | position: relative; 15 | width: 700px; 16 | height: 320px; 17 | margin: 80px auto 20px; 18 | cursor: pointer; 19 | .mv-contents { 20 | padding: 80px 0 0 0; 21 | .mv-name { 22 | position: absolute; 23 | top: 93px; 24 | left: -40px; 25 | width: 300px; 26 | padding: 6px 10px; 27 | background: rgba(47, 109, 174, 0.8); 28 | background: -webkit-gradient(linear, left top, right top, from(rgba(47, 109, 174, 0)), color-stop(0.1, rgba(47, 109, 174, 0.8)), color-stop(0.9, rgba(47, 109, 174, 0.8)), to(rgba(47, 109, 174, 0))); 29 | color: #ffffff; 30 | font-weight: bold; 31 | font-size: 22px; 32 | text-align: center; 33 | @include text-shadow(#000 1px 1px 3px 1px); 34 | z-index: 20; 35 | } 36 | .mv-comment { 37 | position: relative; 38 | @include box-sizing(border-box); 39 | margin-top: 50px; 40 | height: 160px; 41 | padding: 20px 30px 10px 30px; 42 | background: rgba(33,54,94, 0.7); 43 | border-radius: 8px; 44 | color: #ffffff; 45 | z-index: 10; 46 | .pointer { 47 | position: absolute; 48 | right: 20px; 49 | bottom: 0; 50 | width: 20px; 51 | height: 34px; 52 | background: url(#{$imgPath}/icon_pointer.png) no-repeat; 53 | @include background-size(20px auto); 54 | @include animation(pointer-anime 1s ease-in infinite); 55 | } 56 | } 57 | .mv-image.character { 58 | position: absolute; 59 | right: -62px; 60 | top: -111px; 61 | z-index: 1; 62 | img { 63 | display: block; 64 | width: 300px; 65 | } 66 | } 67 | } 68 | } 69 | 70 | @media screen and (max-width: 768px) { 71 | .messageView { 72 | width: auto; 73 | height: auto; 74 | margin: 0 auto 20px; 75 | .mv-contents { 76 | .mv-name { 77 | top: 102px; 78 | left: -11px; 79 | width: 150px; 80 | font-size: 15px; 81 | } 82 | .mv-image.character { 83 | right: -15px; 84 | top: -16px; 85 | img { width: 210px; } 86 | } 87 | .mv-comment { 88 | height: 137px; 89 | .val { font-size: 14px; } 90 | .pointer { 91 | right: 16px; 92 | bottom: -10px; 93 | width: 15px; 94 | height: 34px; 95 | @include background-size(15px auto); 96 | } 97 | } 98 | } 99 | } 100 | .stage-buttons { 101 | .btn { margin-bottom: 10px; } 102 | } 103 | .socialLinkList.share { margin-top: 30px; } 104 | .optionsTable { overflow: scroll; } 105 | } 106 | } 107 | 108 | @media screen and (max-width: 768px) { 109 | h2.mainTitle { 110 | margin-top: 45px; 111 | img { width: 250px; } 112 | } 113 | h2.mainDetail { font-size: 18px; } 114 | } 115 | 116 | @-webkit-keyframes pointer-anime { 117 | 0% { 118 | @include transform(translate3d(0,0,0) scale(1)); 119 | opacity: 0; 120 | } 121 | 0.1% { 122 | @include transform(translate3d(0,-18px,0) scale(1.1)); 123 | opacity: 0; 124 | } 125 | 30% { 126 | @include transform(translate3d(0,0,0) scale(1)); 127 | opacity: 1; 128 | } 129 | 40% { 130 | @include transform(translate3d(0,-4px,0) scale(1)); 131 | opacity: 1; 132 | } 133 | 50% { 134 | @include transform(translate3d(0,0,0) scale(1)); 135 | opacity: 1; 136 | } 137 | 94% { 138 | @include transform(translate3d(0,0,0) scale(1)); 139 | opacity: 1; 140 | } 141 | 100% { 142 | @include transform(translate3d(0,0,0) scale(1)); 143 | opacity: 0; 144 | } 145 | } 146 | 147 | /* 148 | * navbar 149 | */ 150 | .navbar { 151 | .fb-like { margin-top: 16px; } 152 | } 153 | 154 | .fbBox { 155 | width: 450px; 156 | margin: 50px auto 0; 157 | } 158 | 159 | 160 | /* 161 | * Paragraph Style 162 | */ 163 | .icon { 164 | &.next { 165 | display: inline-block; 166 | width: 17px; 167 | height: 17px; 168 | background: url(#{$imgPath}/icon_sp.png) no-repeat; 169 | @include background-size(20px auto); 170 | background-position: left -34px; 171 | } 172 | 173 | &.social { 174 | display: block; 175 | &.l { 176 | background: url(#{$imgPath}/icon_social_l_sp.png) no-repeat; 177 | @include background-size(auto 33px); 178 | &.facebook { 179 | width: 16px; 180 | height: 30px; 181 | background-position: left top; 182 | } 183 | &.twitter { 184 | width: 32px; 185 | height: 27px; 186 | background-position: -19px top; 187 | } 188 | &.google { 189 | width: 32px; 190 | height: 32px; 191 | background-position: -53px top; 192 | } 193 | &.hatena { 194 | width: 30px; 195 | height: 25px; 196 | background-position: -87px top; 197 | } 198 | &.rss { 199 | width: 33px; 200 | height: 33px; 201 | background-position: -232px top; 202 | } 203 | } 204 | 205 | &.s { 206 | background: url(#{$imgPath}/icon_social_s_sp.png) no-repeat; 207 | @include background-size(auto 15px); 208 | &.facebook { 209 | width: 8px; 210 | height: 15px; 211 | background-position: left top; 212 | } 213 | &.twitter { 214 | width: 16px; 215 | height: 13px; 216 | background-position: -9px top; 217 | } 218 | &.google { 219 | width: 16px; 220 | height: 16px; 221 | background-position: -26px top; 222 | } 223 | &.hatena { 224 | width: 15px; 225 | height: 13px; 226 | background-position: -43px top; 227 | } 228 | &.feedly { 229 | width: 17px; 230 | height: 15px; 231 | background-position: -59px top; 232 | } 233 | &.pocket { 234 | width: 15px; 235 | height: 13px; 236 | background-position: -78px top; 237 | } 238 | &.line { 239 | width: 17px; 240 | height: 15px; 241 | background-position: -94px top; 242 | } 243 | &.rss { 244 | width: 17px; 245 | height: 17px; 246 | background-position: -116px top; 247 | } 248 | } 249 | } 250 | 251 | } 252 | 253 | /* 254 | * .socialLinkList 255 | */ 256 | .socialLinkList { 257 | @include clearfix; 258 | > li { 259 | display: block; 260 | } 261 | 262 | &.circle { 263 | > li { 264 | width: 34px; 265 | height: 34px; 266 | background: url(#{$imgPath}/icon_social_circle_sp.png) no-repeat; 267 | @include background-size(205px auto); 268 | &.twitter { background-position: -42px top; } 269 | &.hatena { background-position: -84px top; } 270 | &.rss { background-position: -129px top; } 271 | &.github { background-position: -171px top; } 272 | > a { 273 | display: block; 274 | height: 34px; 275 | } 276 | } 277 | } 278 | 279 | &.share { 280 | margin-top: 60px; 281 | text-align: center; 282 | vertical-align: top; 283 | > li { 284 | display: inline-block; 285 | position: relative; 286 | width: 60px; 287 | height: 60px; 288 | margin: 0 8px; 289 | padding: 0; 290 | background: #305097; 291 | @include box-sizing(border-box); 292 | border-radius: 4px; 293 | > .iconWrap { 294 | height: 60px; 295 | .icon.social { 296 | margin: 40px auto 0; 297 | &.line { margin: 24px auto 0;} 298 | } 299 | } 300 | 301 | &.twitter { background: #00aced; } 302 | &.hatena { background: #008fde; } 303 | &.google { background: #db4a39; } 304 | &.pocket { background: #d3505a; } 305 | &.line { background: #00c300; } 306 | 307 | .count { 308 | position: absolute; 309 | top: 5px; 310 | left: 4%; 311 | width: 92%; 312 | height: 15px; 313 | background: #fff; 314 | border-radius: 2px; 315 | > .txt { 316 | font-size: 12px; 317 | text-align: center; 318 | line-height: 15px; 319 | } 320 | &::before { 321 | @include createStyle; 322 | bottom: -7px; 323 | left: 50%; 324 | height: 0px; 325 | width: 0px; 326 | margin: 0 0 0 -4px; 327 | border-top: #fff 8px solid; 328 | border-left: 4px solid transparent; 329 | border-right: 4px solid transparent; 330 | border-bottom: 0px solid transparent; 331 | } 332 | } 333 | 334 | .btn { 335 | position: absolute; 336 | top: 0; 337 | left: 0; 338 | width: 100%; 339 | height: 60px; 340 | z-index: 10; 341 | > a { 342 | display: block; 343 | width: 100%; 344 | height: 60px; 345 | } 346 | } 347 | } 348 | } 349 | } 350 | 351 | 352 | 353 | /* 354 | * footer Style 355 | */ 356 | footer { 357 | @include clearfix; 358 | position: relative; 359 | height: 150px; 360 | margin-top: 50px; 361 | padding-top: 20px; 362 | background: #3d3d3d; 363 | .logo { 364 | float: left; 365 | width: 160px; 366 | padding: 4px 0; 367 | background: #ffffff; 368 | text-align: center; 369 | } 370 | .copyright { 371 | position: absolute; 372 | bottom: 6px; 373 | width: 100%; 374 | font-size: 11px; 375 | color: #fff; 376 | text-align: center; 377 | } 378 | .socialLinkList.circle { 379 | float: right; 380 | margin-top: 0; 381 | > li { 382 | float: left; 383 | margin-right: 10px; 384 | } 385 | } 386 | } 387 | -------------------------------------------------------------------------------- /src/scss/theme.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/webcyou/MessageViewJS/0f0be013ab3a79f3252166905bb18941146b243e/src/scss/theme.scss --------------------------------------------------------------------------------