利用impress.js制作技术ppt

impress.js介绍

impress.js是一个在现代浏览器中基于CSS3的一个展示框架的JavaScript库，可以用来制作非常酷的幻灯片,impress.js就是受Prezi启发做成的。
impress.js源码：https://github.com/impress/impress.js

impress.js基本使用

1. 创建自己的展示的目录文件
2. 从impress.js项目里复制js和css目录和index.html
3. 用浏览器打开index.html,就能看到impress.js给的官方demo
4. 如果使用官方demo的模板样式，可以在官方demo上进行自己的ppt内容填充，如果想要设计自己的模板样式，需要有html/css的相关基础

press.js基本属性

• data-x:幻灯片的x坐标
• data-y:幻灯片的y坐标
• data-scale:通过指定一个值来进行缩放，data-scale为5则将会在你幻灯片原始尺寸基础放大5倍
• data-rotate:通过一个数字度数来确定旋转你的幻灯片
• data-rotate-x:为3D用，这个数字度数是它应该相对x轴旋转多少度。（前倾/后仰）
• data-rotate-y:为3D用，这个数字度数是它应该相对y轴旋转多少度。 （左摆/右摆）
• Data-rotate-z:为3D用，这个数字度数是它应该相对z轴旋转多少度
• data-autoplay:自动播放，设置自动播放时间

引入代码高亮组件hightlight.js

hightlight.js是一个代码高亮js框架，支持176种语言与79种展示样式，由此可以通过它，使得ppt上的代码片段更加优美．
hightlight.js源码：https://github.com/isagalaev/highlight.js

impress.js使用demo

下面代码只展示ppt核心展示的代码，相关js和css代码分别在js和css文件夹下，其中相关js和css可以从impress.js和hightlight.js项目源码中查找，具体样式也可以自己定制修改．
具体DEMO参看:https://github.com/yongssu/impress-demo/

    
    
    
    
    
    
    
    





    你的浏览器不支持，请按照 Chrome, Safari or Firefox 等浏览器




    

        
这是PPT的主标题
    
    

        
这是第01张PPT标题
        

        这是第一张PPT内容
        

        这是第一张PPT内容
    
    

        
这是第02张PPT标题
        

        旋转90度
    
    

        
这是第03张PPT标题
        

        比平常的ppt放大5倍
    
    

        
这是第04张PPT标题
        

        3D　x轴旋转90度
    
    

        
这是第05张PPT标题
        

        3D　x轴旋转90度
    
    

        
这是第06张PPT标题
        

        data-rotate-y="0"
    
    

        
这是第07张PPT标题
        

        data-rotate-y="90"
    
    

        
这是第08张PPT标题
        

        data-rotate-y="0"
    
    

        
这是第09张PPT标题
        

        data-rotate-z="0"
    
    

        
这是第10张PPT标题
        

        data-rotate-z="90"
    
    

        
这是第11张PPT标题
        

        data-rotate-z="0"
    
    

        
代码高亮
        

        
            
                [
                    {
                        "title": "apples",
                        "count": [12000, 20000],
                        "description": {"text": "...", "sensitive": false}
                    },
                    {
                        "title": "oranges",
                        "count": [17500, null],
                        "description": {"text": "...", "sensitive": false}
                    }
                ]
            
        
    
    

    
 







    
Use a spacebar or arrow keys to navigate. 

       Press 'P' to launch speaker console.