루프가있는 텍스트 애니메이션 슬라이더

Question

세로 슬라이더와 같은 텍스트 루프를 만들고 싶습니다. 그래서 나는이 효과를 누군가의 포트폴리오에서 보았고 언제 기억할 수없는 것입니다. 나는 그냥 많이 느린처럼 어떻게 보일지 미리보기와 GIF 이미지를 만들어 :

<p>This is some example</p> <h1>Text</h1> <h1>Text 2</h1> <h1>Text 3</h1> 

하는 방법으로 나는 플러그인과 슬라이더를 사용하지 않고 애니메이션을 할 수있다. 감사.

Answer 1

다음은 몇 가지 추가 작업이 필요하지만 잘 시작해야하는 예입니다.

http://jsfiddle.net/YbDq3/1/

jQuery를

$(document).ready(function() { 
    $('h1').css({top: 40, opacity: 0}); 
    scrollWord(); 
}); 

function scrollWord() { 
    $('h1').last().animate({top: 7, opacity: 1}, 200, 'linear', function() { 
     $(this).animate({top: -20, opacity: 0}, 200, 'linear', function() { 
      $(this).css({top: 40, opacity: 0}); 
      $('p').after($(this)); 
      scrollWord(); 
     }); 
    }); 
} 

CSS

h1 {font-size: inherit; padding: 0; display: inline-block; font-weight: normal; margin: 0 0 0 5px; position: absolute;} 
p {margin: 0; padding: 0; display: inline-block;} 

HTML

<p>This is some example</p><h1>Text</h1><h1>Text2</h1><h1>Text3</h1> 

는 희망이 도움이!