jQuery和css3文字3d翻转动画特效插件
这是一款效果非常炫酷的jQuery和css3文字翻转动画特效插件。CSS3为开发者们提供了许多非常有用的动画效果，使网页不再枯燥无味。在这个插件中，通过使用Adjector.js和css3使文字不断的做3d翻转和旋转动画，效果非常有趣。
HTML结构
Adjector.js是十分简单的jQuery插件，你可以非常容易的集成它到你的项目中。
<h1 class=“contain”> <span class="adject">Im</span> <span class=“adject">Robo | Geek | Cool | Lazy | Nerd</span></h1> |
上面是第1-3个demo的html结构。
<div id="sub" class=“contain"> <span class=“adject”> [ Paragraph 1 ] | [ Paragraph 1 ] | [ Paragraph 1 ] | [ Paragraph 1 ] | [ Paragraph 1 ] </span></div> |
上面是第4个demo的html结构。
几个例子的Html结构除了将<h1>换位<div>之外没有什么不同。在第4个例子中使用<div>是为了使用CSS来渲染它。在所有的例子中，通用的class都是contain和adject。
- contain：它是作为3d翻转或旋转的容器。
- adject：这个class中包含的元素是被翻转或旋转的内容元素。内容默认使用过“|”符号分割，但是可以通过jQuery来改变这个分割符号。
JAVASCRIPT
<script type="text/javascript"> $(document).ready(function(){ $(".contain .adject").adjector({ arm: 0 }); });</script> |
上面是demo1的js文件。
<script type="text/javascript"> $(document).ready(function(){ $(".contain .adject").adjector({ arm: 0 }); });</script> |
上面是demo2的js文件。
<script type="text/javascript"> $(document).ready(function(){ $(".contain .adject").adjector({ sep: "|", stay: 1000, trans: 800, arm: -150 }); });</script> |
上面是demo3的js文件。
上面的js文件必须在html头部引入jQuery和adjector.js 文件后踩能使用。上面的js文件将调用adjector 函数，并告诉它容器是.contain，翻转的目标是.adject，并提供input的值，如果input的值没有指定，那么插件将使用一个默认值，如demo1那样。你要确保提供了正确的.contain和.adject值。下面列出了一些可用的jQuery参数：
- sep ：该参数是用于分割文本和文本块的分割符。默认值值“|”，但是你可以像demo3那样更改它。
- stay ：该参数是文本在屏幕上的停留时间，单位为ms。对于单个文本，如demo1-demo3，该参数适用了较短的时间值，在demo4中的文本块，适用了3000ms的数值。
- trans ：该参数是翻转或旋转的时间，单位是ms。
- arm ：该参数是翻转或旋转的圆的半径如果arm设置为0，那么文本将绕圆心旋转。如果设置为整数，那么文本将从左向右旋转，如果设置为负数，那么文本将从右向左旋转。数值的大小决定它们位移的大小，你可以多试几个数值来看看效果。
CSS样式
大部分的CSS样式时根据js文件的输入值来确定样式。
/* ==================================== * adjector.css * ==================================== * Copyright 2014 Arsh Shah Dilbagi. * http://robo.im * * ================================= */.adjecting { display: inline-block; position: relative; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin-x: 50%;} .adjecting .front-face, .adjecting .back-face { display: inline-block; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden;} .adjecting .front-face { position: absolute;} .adjecting .back-face { position: relative;}/* ====================================================== * CSS for Demo pages only - Not required with the plugin * =================================================== */#robo-wrapper { display: inline-block; width: 100%; text-align: center;} #robo-wrapper h1 { font-family: 'Raleway', sans-serif; font-size: 100px; font-weight: 900; text-transform: uppercase;} #robo-wrapper #option-details { display: inline-block; font-size: 18px; padding: 2px 7px; margin-bottom: 20px; background: rgba(255, 255, 255, 0.08); font-family: monospace; border-left: 3px solid #fff; border-right: 3px solid #fff;} .paragraph-content #heading { width: 400px; height: 70px; margin: 0 auto; font-family: 'Raleway', sans-serif; font-size: 60px; font-weight: 900; text-align: center;} .paragraph-content #sub { width: 400px; height: 300px; margin: 0 auto; font-size: 20px; text-align: justify;} |
上面的CSS或CSS3代码是非常简单的，相信你能看懂。主要的CSS3 transform 属性是通过jQuery文件中用户输入的值来发生作用。
