-
Notifications
You must be signed in to change notification settings - Fork 0
/
idea.html
145 lines (124 loc) · 5.44 KB
/
idea.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
<!DOCTYPE html>
<html>
<head>
<title>road is building...</title>
<meta charset="utf-8">
<style type="text/css">
b {
color: skyblue;
}
</style>
</head>
<body>
<a href="https://github.com/preziotte/party-mode">preziotte</a>
<a href="">tweenjs</a>
<a href="">easeljs</a>
http://www.createjs.com/getting-started/soundjs
可能不起眼的东西都是一个系统，研究。不偷懒。
调参数，自定义组件，可拖拽组件，调参数可以制作组件
important
https://github.com/wayou/HTML5_Audio_Visualizer
aimate,video, autdio, transiton, greensock, html5,
bootcdn
site map, library , gallerys
sound cloud music visualize
https://wavesurfer-js.org
html5 canvas
sound cloud api:
http://www.michaelbromley.co.uk/experiments/soundcloud-vis/#muse/undisclosed-desires
full screen scroll page
pdf.js pdf reader javascript
maps
fallback to ie
http://www.bootcdn.cn/html5shiv/
这个插件不粗o
http://dimsemenov.com/plugins/magnific-popup/
http://paperjs.org/
checkbox
http://www.bootcdn.cn/iCheck/
lazyload
lightweight chart;
interact.js
drag and drop;
easeljs make canvas easily.
twemoji
odometer.js
http://wangmeng.baidu.com/
checkbox
http://icheck.fronteed.com/#demo
http://paperjs.org/tutorials/
grid layout library
http://masonry.desandro.com/
不久应该会改版。
http://morrisjs.github.io/morris.js/
http://leafletjs.com/
<q>these pro should use many cool effect, or made by yourself, with geek sprit</q>
<ul>
<li><b>timeline</b></li>
<li>start: 4</li>
<li><b>htmlStory（daily life recorder）</b></li>
<li>start: 5</li>
<li>process: 0%</li>
<li>state: 寻找灵感</li>
<li><b>analyse</b></li>
<li>start: 5</li>
<li>processing: 0%</li>
<li>2016-8-10 html-story component</li>
<li>2016-8-10 html-story dialog</li>
<li>state: thinking and 寻找灵感</li>
<li>state: compose a song.(谱曲阶段)</li>
<li><b>GIS based personal pro</b></li>
<li>start: 4</li>
</ul>
<p>可能带来灵感的东西,可能用得上的</p>
<ul>
<li><a href="http://www.html5tricks.com/demo/pure-css3-jingang/index.html">css3 effect</a></li>
<li><a href="http://developer.51cto.com/art/201508/489526.htm">专业设计师的十大动画工具</a></li>
<li><a href="http://kan.willin.org/?p=1311">willin设计很有场景感</a></li>
<li><a href="http://impress.github.io/impress.js/#/imagination">impress</a></li>
<li><a href="https://greensock.com/">greensock有很多值得模仿的效果</a></li>
<li><a href="http://markdalgleish.com/projects/bespoke.js/">bespoke.js</a></li>
<li><a href="http://lanyrd.com/topics/javascript/handouts/">handouts</a></li>
<li><a href="http://imakewebthings.com/deck.js/#download-now">deck.js</a></li>
<li>其实我以为可以用设计作为主体，然后做出一种比较优秀的设计。比如这张图片作为底图，可以做出一个家庭的感觉。比如说，开门，开灯，一般的动作都可以做到。不过应该需要到以设计作为主体的设计。摆放一些东西，然后有一个故事的流线。简单，有人物，有剧情，有故事。模拟剧情。模拟场景。还可以换场景，并且最好是面向对象开发。
其实觉得可以用calss来控制场景，然后组件可以通过绝对定位，每个组件都是一个对象，可以自己控制自己的位置和动作。用trasition做场景的切换。现在主要是设计的问题
面向组件开发和面向对象开发
每个后台都可以自己布置自己的组件。布置自己与众不同的东西。不过数据库是一个问题。我觉得可以做成本地的文件，配置参数和剧情可以导出特定的格式，这样是最好的，比如.psd就被注册为adbe公司的photoshop通用格式。最好能够
<img src="img/handler.jpg">
</li>
</ul>
<h3>some principle</h3>
<p>scence(场景), layout(布局), character(角色), story(故事), dialog(对话),</p>
<p>写故事很重要，而且要持续。。</p>
<p>从书上去找到答案。</p>
<p>技术是另外一条腿。</p>
<p>尽量不用后台，和数据库，用json</p>
<p>make sure theme of the story, and your thought in the story.</p>
<p>js处理image的方法，创建image的方法</p>
inkscape
<p>目标：能达到孰能盛桥的境界</p>
<embed src="svg.svg" type="image/svg+xml"></embed>
<svg>
<rect x="50" y="20" width="150" height="150" style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9"></rect>
</svg>
<svg style="width:400;height:300">
<rect x="100" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5;"></rect>
<ellipse cx="300" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2"></ellipse>
</svg>
<svg>
<ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple"></ellipse>
<ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime"></ellipse>
<ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow"></ellipse>
</svg>
<svg>
<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2"></line>
</svg>
<svg style="width:500px;
height:500px;">
<polygon points="220, 100 300, 210 170, 250" style="fill: #ccc;stroke:#000;stroke-width:1"></polygon>
</svg>
<svg>
<polyline points="0,0 0, 20 20, 20 20, 40 40, 60" style="fill:white;stroke: red;stroke-width:2;"></polyline>
</svg>
</body>
</html>