echoesworks
v0.2.2
Published
Next-Generation Tech Blog/Presentation Framework
Downloads
15
Maintainers
Readme
Next-Generation Tech Blog/Presentation/Slider Framework
zh
下一代技术
博客
/展示
/幻灯片
框架
简介: EchoesWorks —— 打造下一代技术Blog/Presentation 框架
##Demo: http://demo.echoesworks.com/
##Feature
###Core
- Markdown Presentation
- Integrate Github Code/Gist Code
- Full Screen Background Image
- Left/Right side Images Support
- Process Bar
- Auto Play
- Subtitles
- Tab Control
zh
- 支持 Markdown
- Github代码显示
- 全屏背景图片
- 左/右侧图片支持
- 进度条
- 自动播放
- 字幕
- 分屏控制
##Usage##
###Clone Demo
git clone [email protected]:echoesworks/echoesworks-demo.git yourslide
###Setup
1.Install
bower install echoesworks
2.Data
Create example.md
:
<section>
![background](app/background.jpg)
#EchoesWorks
##Phodal Huang
</section>
<section>
#Design for Developer
##EchoesWorks?
##What is different?
##What we need?
</section>
Create data.json
:
[
{
"time": "00:01.00",
"code": "https://raw.githubusercontent.com/phodal/echoesworks/master/bower.json",
"word": "hello, world"
},
{
"time": "00:05.00",
"word": [
{
"word": "Привет"
},
{
"word": "Bonjour"
},
{
"word": "こんにちは"
},
{
"word": "你好"
},
{
"word": "Ciao"
},
{
"word": "Hello, World"
}
]
},
{
"time": "00:12.51",
"code": false,
"word": "hello, world, 2"
}]
- Markdown Slide
- Data for code & Time Control
3.Code
var EW = new EchoesWorks({
element: 'slide'
});
Example with slide
EchoesWorks.get('data/example.md', function(data){
document.querySelector('slide').innerHTML = EchoesWorks.md.parse(data);
EchoesWorks.imageHandler();
new EchoesWorks({
element: 'slide'
});
})
##Setup Development##
1.Install devDependencies
npm install
2.Development
3.Run Test
npm test
4.Push Code & Waiting CI
##Intro
- ajax. Ajax Function
- bar. Process Bar Function
- effect. fadeIn & fadeOut animate
- events_handler. handler keydown & touch & slide event
- image. fullscreen, left ,right image
- main. main function to connection other function
- parser. parser data.json
- slide. core slide code
- umarkdown. markdown convert
- utils. utils function
##Inspired by & Thanks to##
Slide
Markdown
Time
Process Bar
##License##
© 2015 Phodal Huang. This code is distributed under the MIT license. See LICENSE.txt
in this directory.