2
如何通过滚动触发并控制文字动画?滚动控制的文字动画
<p class="class">TEXT</p>
transform:translateX(-500px);opacity:0;
transform:translateX(0px);opacity:1;
如何通过滚动触发并控制文字动画?滚动控制的文字动画
<p class="class">TEXT</p>
transform:translateX(-500px);opacity:0;
transform:translateX(0px);opacity:1;
您可以使用Skrollr。
导入库,事遂所愿,当你滚动条在X_start
<p class="class" data-X_start=" transform:translateX(-500px);opacity:0;" data-X_end=" transform:translateX(0px);opacity:1;">
TEXT</p>
将启动动画,并完成它,当你达到x_end当。
或
不要忘记使用前缀进行跨浏览器兼容性。
例(使用jQuery):
//css
.class {
-moz-transform: translateX(-500px);
-ms-transform: translateX(-500px);
-o-transform: translateX(-500px);
-webkit-transform: translateX(-500px);
transform:translateX(-500px);
opacity:0;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.class.animated {
-moz-transform: translateX(0px);
-ms-transform: translateX(0px);
-o-transform: translateX(0px);
-webkit-transform: translateX(0px);
transform: translateX(0px);
opacity: 1;
}
//html
<p class="class">TEXT</p>
//js - animate on scrol event
$("#target").scroll(function() {
$(".class").toggleClass("animate");
});
简单的一点,谢谢! – Saturi 2014-09-22 11:18:02