灵武做网站:如何用Impress.js创建惊人的可视化和演示

灵武做网站

印象深刻的是一个jQuery插件,它使用CSS 3功能创建漂亮的演示文稿。所有现代浏览器都支持这个插件创建的令人惊叹的可视化。

查看演灵武做网站示文件下载项目文件

通过访问GitHub下载它。单击zip按钮,如下面的屏幕截图所示,jQuery库将通过示例下载。

灵武做网站:如何用Impress.js创建惊人的可视化和演示

下载完成后,解压缩zip文件夹,您将找到用于演示的示例文件。由于我们的目的是学习使用插件,我们应该从头开始编码。首先,创建一个基本的html文档,如下面的代码所示,并包含press.js文件。

Basic HTML document with impress library included

	
		Impress Demo
	
	
		
	

初始化库

为了使用Impress.js,您需要使用库定义的语法。插件搜索一个元素的ID印象,以创建您的可视化幻灯片。因此,我们将创建一个ID“印象”的div。然后,您可以使用press().init()函数初始化库,如下面的代码所示。


	
		Impress Demo
	
	

现在,我们已经准备好探索Impress.js的强大功能。让我们继续创建幻灯片。

让我们开始创建幻灯片

只要幻灯片符合库定义的标准,任何大小的幻灯片都可以给人留下深刻印象。我在下面的代码中创建了两张简单的幻灯片,让我们开始我们的演示。


	
		Impress Demo
	
	

Creating Stunning Visualizations Impress.js
First Slide Moves From Left To Right Impress.js

  • 如果不提供ID值,库将自动将ID值包括为步骤-1、步骤-2等。运行演示文稿后,您将能够在完成幻灯片转换时在URL上看到这些ID值的变化。
  • 类属性值是将元素标识为幻灯片的唯一基本要求。您的每个幻灯片都应该使用类值作为步骤。
  • 在第一张幻灯片中,我们不必定义data-x和data-y值。它将以给定的大小显示在默认浏览器窗口中。
  • 如果我们指定了data-x值,这意味着幻灯片的中心将定位在我们提供的data-x值上。数据-y值也是如此。所以数据-x=-100和数据-y=300意味着幻灯片的中心将定位在(-100 px,300 px)。
  • 因此,在指定的分辨率中打开HTML文件,然后按空格键查看操作中的可视化。

印象库支持的效果

目前,有几种效果可以用于创建可视化。如果您是CSS专家,您将能够使灵武做网站用库支持的这些特性找到无限的效果,

  • 数据-x-移动您的幻灯片在x轴左>右或右>左方向取决于当前的位置.示例:如果当前x值为100,则数据-x=‘200’将向class->左移动,而数据-x=‘-200’将向class->右移动!
  • 数据-y-移动您的幻灯片在y轴顶部->底部或底部>顶部方向取决于当前位置。示例:如果当前y值为100,数据y=‘200’将移动class=‘>顶部,而数据y=’-200‘将移动到顶部>底部!
  • 数据-z-移动您的幻灯片在z轴远离屏幕或向屏幕取决于当前的位置。示例:如果当前z值为100,数据z=‘200’将远离屏幕,而数据z=‘-200’将移向屏幕。
  • 数据旋转-x将幻灯片绕x轴旋转给定的度.例如:数据比例尺-x=‘90’将顺时针旋转幻灯片90度,数据比例尺-x=‘-90’将幻灯片逆时针旋转90度。
  • 数据旋转-y将幻灯片绕y轴旋转给定的度。例如:数据比例尺-y=‘90’将顺时针旋转幻灯片90度,数据比例尺-y=‘-90’将幻灯片逆时针旋转90度。
  • 数据旋转-z将幻灯片绕z轴旋转给定的度。例如:数据比例尺-z=‘90’将顺时针旋转幻灯片90度,数据比例尺-z=‘-90’逆时针旋转幻灯片90度。数据旋转等于数据旋转-z。

我们已经在演讲中制作了两张幻灯片。让我们结合插件的效果制作更多的幻灯片。我将向您展示每张幻灯片的代码,并在下一节中详细解释它所做的工作。

灵武做网站:如何用Impress.js创建惊人的可视化和演示

Slide Mountain 斯来得山(凯次克来最高峰) 3

此幻灯片同时定义了data-x和data-y值。因此,它将同时向x和y方向移动,因此会有对角线过渡。

This Slide Moves From Right To Left and Bottom To Top

Slide Mountain 斯来得山(凯次克来最高峰) 4

此幻灯片的x值与以前的x值相同,y值为-500。因此,与以前的幻灯片相比,数据-y值减少了。因此,它将从上到下移动。如果要将其从底部移动到顶部,只需将数据-y值与上一张幻灯片相比增加即可。

This Slide Moves Top To Bottom

谁是牛头王

此幻灯片的数据-旋转值为150,并增加数据-x值.因此,在x轴上运动时,它将顺时针旋转150度.

This Slide Rotates Clockwise Around z-axis

Slide Mountain 斯来得山(凯次克来最高峰) 6

此幻灯片的数据比例尺值为3.因此,这张幻灯片将比以前的幻灯片大3倍。

This Slide Scales 3 Times

Slide Mountain 斯来得山(凯次克来最高峰) 7

此幻灯片灵武做网站具有定义的X、Y和Z值。因此它将在沿X和Y方向行进的同时离开屏幕。

Away

Slide Mountain 斯来得山(凯次克来最高峰) 8

与以前的幻灯片相比,此幻灯片降低了数据-z值。所以它会向屏幕移动。

Towards

Slide Mountain 斯来得山(凯次克来最高峰) 9

该幻灯片将进一步向屏幕移动,因为它有一个减少的数据-z值。

Futher Towards

Slide 10

最后,我们以数据比例尺=10的形式制作最后一张幻灯片,因此它将是其他幻灯片的10倍。您将能够在此视图中看到所有10张幻灯片的位置。

Visualization Slide Positions


    



    
    


Creating Stunning Visualizations Impress.js Press Spacebar or Tab To Get Started
This Slide Moves From Left To Right
This Slide Moves From Right To Left
This Slide Moves From Right To Left and Bottom To Top
This Slide Moves Top To Bottom
This Slide Rotates Clockwise Around z-axis
This Slide Scales 3 Times
Away
Towards
Futher Towards
Visualization Slide Positions
Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation. For the best experience please use the latest Chrome, Safari or Firefox browser.

检查浏览器兼容性

除了Opera之外,所有主流浏览器的新版本(如Firefox、Chrome、Safari和InternetExplorer 10)都支持Impress.js可视化。如果不支持浏览器,则可以使用库定义的回退消息。我已经将其包含在上面的完整源代码中。为了正确地显示它,还必须定义其他样式。浏览器回退消息所需的所有代码如下:





Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation. For the best experience please use the latest Chrome, Safari or Firefox browser.

What Next?

看看下面给出的灵武做网站一些给人印象深刻的jQuery插件可视化。

  • 阅读这篇文章的作者Rakhitha Nimesh的书“用印象深刻的演示”成为现在的演示忍者!
  • @bartaz从meet.js峰会转换的css 3D
  • Heck是什么-John Polacek的“响应式Web设计”
  • 由Andreas Kieckens使用Wakame-VDC的数据中心虚拟化