滾動控制的文字動畫

Question

如何通過滾動觸發並控制文字動畫？

<p class="class">TEXT</p> 


transform:translateX(-500px);opacity:0; 
transform:translateX(0px);opacity:1; 

Answer 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當。

Answer 2

1. 您必須設置您的初始樣式值。
2. 修改樣式值：
   a。添加類
   b。添加內聯樣式屬性
   c。使用CSS3動畫樣式屬性

或

1. 使用外部JS庫。

不要忘記使用前綴進行跨瀏覽器兼容性。

例（使用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"); 
});