我只是使用scrollr.js插件,看到了以下DEMO PAGE,我的问题是动画是在WOOOT
div上完成的,代码如下:
<div data-0="background-color:rgb(0,0,255);transform[bounce]:rotate(0deg);" data-500="background-color:rgb(255,0,0);transform[bounce]:rotate(360deg);" class="skrollable skrollable-between" style="-webkit-transform: rotate(0deg); transform: rotate(0deg); background-color: rgb(0, 0, 255);">WOOOT</div>
现在注意如何像这样添加三次微风(我认为是):
transform[bounce]:rotate(0deg);" data-500="background-color:rgb(255,0,0);
现在上面是什么样的css语法?还是仅仅是scrollr.js的东西?我知道scrollr.js在内部定义了一些立方微风,但是如果我检查元素,我对元素没有定义任何立方微风,但我仍然对上述语法感到困惑。那么
[bounce]
到底是什么?有人可以解释吗?该文档的usage,但是我想知道该语法在幕后到底在做什么,是否添加了CSS三次微风?
最佳答案
transform[bounce]
不是CSS属性。这是skrollr专用的语法,用于为动画添加轻松性,由插件解释。 From the docs:
Skrollr允许非线性动画。可以通过将每个属性放在属性后面的方括号中来使用所谓的缓动函数。有一个内置的缓动函数列表(请参见下面的JavaScript部分),您可以使用缓动选项来使用自己的函数。
缓动算法可以表示为三次方贝塞尔曲线,但是此插件似乎可以用JavaScript处理动画,而不使用CSS动画。
关于javascript - 了解scrollr.js立方微风,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/31310220/