网站制作插件动画过渡
有经验的网页设计师和前端人员都知道,在开始设计网页之前,通常会在白板或草稿纸上绘制草图,以便于整体布局。虽然很多设计师选择在白板上完成这一过程,但也有很多设计师选择用网站制作插件来“插件”;草案“和;,其中,** 受欢迎的是内置模板功能Sketch。
内置的模板和Sketch基本功能** 了设计师和前端用户的基本要求。第三方开发者提供的大量插件起到了很好的补充作用。
animsition:用户友好的jQuery插件动画网站正在进行转换
使用CSS3JavaScript,很容易创建网站动画。有些使用CSS3动画在网站页上转换。当前版本的级联样式表允许您创建简单的淡入和幻灯片效果以及到其他页面的3D转换。相当新的jQuery插件“和animsitionrdquo;它很容易集成到您的web项目页面过渡动画。
合并数据、标记HTML、启动插件
animsition可以快速集成和配置。它包括HTML文档中包含的JavaScript和样式表文件。此外,还需要一个HTML标记容器,它将消失或收缩转换。你经常希望一切都是动态的,容器应该包含你身体里的一切。
它是,但是,可能包含部分内容。例如,导航标志通常不会更改,因此不需要动画。
<div class=ldquo;animsitionrdquo;gt;hellip;hellip; lt/部门gt;对于容器ldquoanimsitionrdquo;类很重要,因此插件可以访问它和动画元素。也将给出ldquo;书信电报;一台gtldquo;元素“andanimsitionlink”和;类,所以可以给出网站animsition。
书信电报;类别=ldquo;animsition链接href=ldquo;联系。HTMLrdquo;燃气轮机;和lt;1; 然后,使用不同的参数运行插件和配置帮助。
$(ldquo;。animsitionrdquo;)。animsition({教室:ldquoflip-in-xrdquo高于:ldquoflip-输出-xrdquo;})
调用插件ldquoanimsitionrdquo;课程通过jQuery。精选ldquo;教室;和ldquo;远高于“和”;定义如何删除当前页和新页。
因此,成立ldquo;教室;示例中的当前页通过ldquoflip-in-xrdquo淡入淡出;只要它是加载的效果。整定ldquo;比“和”要高得多;,相反,将当前页面淡出ldquoflip-淡出-xrdquo;影响,只要你调用ldquoanimsition链接“和;班级。
有更多的选项来配置插件。例如,可以指定要传递的动画的持续时间ldquo;硬化;和ldquo;超时rdquo作为动画页面转换,如果链接选择要提前加载的页面,则插件将在目标网站页面之前加载转换。加载网站您将看到基于CSS3和SVG的典型加载动画。此动画可以由一个人替换。只需确保加载的动画可以通过CSS类访问。
$(ldquo;。animsitionrdquo;)。animsition({加载类:ldquo;myloadinganimationrdquo;})在上面的例子中,默认动画是“with class”;我的加载动画rdquo;相反。
animsition提供了许多页面过渡效果,包括各种淡入淡出效果。有简单的淡入淡出效果和更复杂的页面幻灯片到一边。
还可以使用旋转效果向左或向右扭曲页面,或在窗口内外扭曲页面,使用翻页效果将页面向前或向后旋转。可以通过选择不同的透视图来更改翻转的程度。
此外,该插件还具有放大效果,在离开页面时将页面放大,并放大新页面。可设置为ldquo;课堂教学;和ldquo;下课后;。当然,你要注意离开和加载一个页面,有一个ldquo;rdquo;和ldquo;rdquo;为每个效果选项选择适当的效果。
所有链接的个人网站转换
通过插件调用只能定义每个淡入淡出效果配置。影响定义见ldquo;课堂教学;和ldquo;远高于“Rd”;适用于整个文档。
但是,可以为每个链接定义单独的淡出效果。为此,只需通过data属性添加ldquo;书信电报;燃气轮机;rdquo;元素。
书信电报;类别=ldquo;animsition链接数据animsition =ldquo;淡出;数据animsition持续时间=ldquo;1000rdquo;href=ldquo;联系。HTMLrdquo;燃气轮机;联系人ldquo;数据animsitionquot;定义颜色的淡入效果。动画的持续时间可由指定的数据animsition“duration;”确定;。指定数据属性用于重写插件调用信息中的值。不能在新页面内定义淡入淡出效果ldquo;书信电报;燃气轮机;rdquo;但是您可以通过data属性ndash为每个页面指定它;在容器中,添加网站内容。
<div class=ldquo;animsitionrdquo;数据animsition =ldquo; 淡入数据animsition时间=ldquo;1500rdquo;gt;hellip;hellip; lt/部门gt;
叠加效应特性
除了不同的页面转换外,animsition还提供了一种特殊的覆盖效果。这些非活动页面;相反,当加载新页面时,一个形状会悬停在屏幕窗口的背景中。当它完成时,你的窗户就像一片叶子。
同样,您可以选择各种不同的选项,例如,从任何方向或到任何方向的动画形状。为了达到叠加效果,你需要激活它们的设置。
$(ldquo;。animsitionrdquo;)。animsition({overlay:real})animsitionWordPress
该插件可以集成到WordPress系统中,无需使用特殊插件进行进一步配置。这允许您在WordPress界面中轻松调整页面转换(操作时间)。
浏览器支持和相关链接
animsition所有主要浏览器,包括Internet Explorer10及更高版本。其他浏览器没有版本号显示。但您可以假设animsition和所有浏览器都支持CSS3。您可以将CSS属性更改为ldquounsupportcssrdquo;选项关闭浏览器不支持这些功能的插件。
$(ldquo;。animsitionrdquo;)。animsition({unsupportcss:})房地产ldquo;和;动画时间;默认情况下,将定义不同的供应商选项。调整是没有必要的,但你可以改变它,当然,如果你喜欢你的需求清单。
animsition根据免费MIT许可证发布,可用于个人和商业项目。
谢泼德专业深圳网站制作相关推荐:2015网站制作趋势网站制作插件动画过渡深圳网站制作专业企业流程网页制作的现实意义