텍스트 스크롤 효과를 알아 내려고 시도했습니다.

저는 웹 사이트에서 본 효과가 마음에 들었습니다. 나는 어떻게하면 JavaScript와 CSS를 통해 그 효과를 볼 수 있었는지 페인트로 훑어 보았습니다. 그러나이 사이트는 한국어로 더 어려워지기 때문에 자바 스크립트에 익숙하지 않은 것으로 시작합니다.텍스트 스크롤 효과를 알아 내려고 시도했습니다.

사이트는 다음과 같습니다 http://search.naver.com/search.naver?where=nexearch&query=idolfix&sm=top_hty&fbm=1&ie=utf8

는 누구도 페이지가 10 개 링크 몇 초마다 업데이트되는 페이지의 오른쪽 상단에 미치는 영향 본 사람 - 특히 방법 장소에서 텍스트 스크롤?

출처

2011-08-25 ONDEV

워 :

$('.current').animate({ 'top': '-1em' }); $('.next').animate({ 'top': 0 });

여기 살아있는 예입니다! 깔끔한 효과. "키워드"스크립트에있는 것 같지만 ... 보이지 않게해야합니다 .... 효과를 재구성하는 것이 더 쉬워야합니다. –

예, 부지불식간에 내 사이트 (내 질문에 URL)를 방문한 http-referer를 확인했는데 이것이 처음으로 생각났습니다. 그 코드를 통해 몇 주를 보냈습니다. 나는 데이터베이스 녀석의 더 많은 것을이 디자인 재료를 배우는 것을 시도하고있다. – ONDEV

그들은 래퍼 div가 overflow: hidden입니다.

그 div 안에는 현재 값과 다음 값이있는 2 개의 div가 있습니다. 그냥 .next.current 일을하고, AJAX와 새로운 .next 값을 추가해야 효과 후

<div class="wrap"> 
    <div class="current"> 
     foo 
    </div> 
    <div class="next"> 
     bar 
    </div> 
</div>

. 처음에는

에서, .next DIV가 (실제로 아래) .wrapper 외부 이다, 그들은 그것을 이동합니다.

효과는 동시에 두 div를 움직이는 jQuery로 쉽게 수행 할 수 있습니다. http://jsfiddle.net/tusbar/GFZTE/

출처

2011-08-26 00:05:50

니스! 5 초마다 업데이트하는 방법을 알고 있습니까? 아마 아약스 요? – ONDEV

5 초마다 AJAX 요청을하는'setTimeout'을 실행 한 다음 div를 업데이트합니다. –

정말 고마워요! 나는 지금 실험 할 것이다. :-) – ONDEV

텍스트 스크롤 효과를 알아 내려고 시도했습니다.

답변

관련 문제