스크롤 제어 텍스트 애니메이션

Question

스크롤을 사용하여 텍스트 애니메이션을 트리거하고 제어하는 ​​방법은 무엇입니까?

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


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

Answer 1

Skrollr을 사용할 수 있습니다.

가져 오기 라이브러리, 무언가

<p class="class" data-X_start=" transform:translateX(-500px);opacity:0;" data-X_end=" transform:translateX(0px);opacity:1;"> 
      TEXT</p> 

이 스크롤 막대가 X_start에있을 때 애니메이션을 시작하고 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"); 
});