我有一个面向左侧的动物图像,滚动时向左移动 -> 水平翻转 -> 向右移动 -> 水平翻转等。
问题是当用户向上滚动时,动物会倒退。在 direction === 'up'
上,我试图让图像立即翻转,这样当用户滚动时它面向正确的移动方向。
<span class="animal skrollable skrollable-between"
data-100="right: 2%;" data-400="right: 78%;"
data-401="-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
-ms-transform: scaleX(-1);
transform: scaleX(-1);
-ms-filter: 'FlipH';
filter: FlipH;" data-700="right: 2%;" data-701="-moz-transform: scaleX(-1);
-o-transform: scaleX(1);
-webkit-transform: scaleX(1);
-ms-transform: scaleX(1);
transform: scaleX(1);
-ms-filter: 'FlipH';
filter: FlipH;"
data-900="right: 78%;" data-901="-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
-ms-transform: scaleX(-1);
transform: scaleX(-1);
-ms-filter: 'FlipH';
filter: FlipH;"
data-1450="right: 2%;" style="right: 2%;">
</span>
脚本
<script>
var animal = $('.animal')[0];
var s = skrollr.init({
edgeStrategy: 'set',
smoothScrolling: true,
keyframe: function (element, keyframe, direction) {
if (element !== animal) {
return;
}
if (direction === 'up') {
animal.style.webkitTransform = "1";
animal.style.MozTransform = "1";
animal.style.msTransform = "1";
animal.style.OTransform = "1";
animal.style.transform = "1";
animal.style.msFilter = "flipH";
}
}
});
</script>
另一个问题是我也试过使用 @addClass:MyClass
所以整个事情都被清理了,在一个类中而不是在 HTML 中,但它根本不起作用。
我已经在带有内联注释的 fiddle 中添加了一个示例来显示问题。 http://jsfiddle.net/dp5zvxwk/1/
最佳答案
使用包装元素而不是尝试翻转元素本身。我在文档中添加了一个 skrollr-up/down 类来实现这一点。
.skrollr-up .animal {
transform: scaleX(-1);
}
http://jsfiddle.net/dp5zvxwk/3/
在尝试使用 skrollr 之前,请确保您非常了解 html 和 css。
关于javascript - Skrollr,在方向改变时翻转图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33117493/