0
페이지에서 동적 텍스트 스크롤을 만들려고합니다. 디자인 위주로 곡면을 그리면서 곡면을 스크롤하고 싶습니다. 플래시를 사용해야합니까? 왜냐하면 내가하지 않기 때문에.HTML/Javascript/CSS의 곡선에서 동적 텍스트 스크롤을 만들려면 어떻게해야합니까?
A
답변
5
커브와 함께 문자가 회전해야합니까? 굴림 경로를 따르는 텍스트의 문자를 회전하지 않고 가져 오는 것은 JavaScript로 가능합니다. 텍스트가 회전해야하는 경우 VML/SVG/Canvas를 사용하여 텍스트를 회전 할 수 있지만이 경우 Flash로 더 잘 처리 할 수 있습니다. http://s.blixt.org/physics-enabled-html/
내가 할 생각이있어 :
이
은 후,하지만 텍스트가 작동하고 당신은 내가 회전하지 않음으로써 무엇을 의미하는지 볼 수 있습니다 방법을 살펴이 정확히되지 않습니다 뭔가는 할 수있다, 또는 당신에 대해 어떻게 생각하지 않을 수 있습니다,하지만 당신에게 도움이 될 수 있습니다그것은 엘을 찾습니다 (HTML 5: data-* attributes)로 변환하고 구문 분석하여 텍스트가 이동할 경로를 만듭니다. 나는 또한 그것을 지원하는 브라우저 CSS3를 사용하여 회전을 포함하도록 업데이트
(최근 모질라와 웹킷 브라우저를.)
0
그럼 당신은 문자의 각 단일 문자 또는 쌍을 애니메이션 할 수있다. 그것은 가능하지만 플래시를 사용하면 훨씬 더 빠르고 효율적입니다. 곡선의 수학적 표현을 만들어야합니다.
정말 필요한가요? 깜박임/움직이는 텍스트는 실제로 좋은 디자인 실습으로 간주되지 않습니다. 물론 예외가 있습니다.
편집 :
솔루션에 더 포인터에 대한 주석을 참조하십시오.
+0
나는 천막 문자를 사용하는 것이 매우 성가시다는 것을 알고있다. 하지만 사이트의 나머지 부분을 수정하여 잘 보이게 할 수 있는지 확인하고 싶습니다. 또한이 스크롤 텍스트는 내용이 아닌 배경/디자인의 일부입니다. – fent
+0
글쎄, 애니메이션을하기 위해 JavaScript/HTML을 사용하는 데별로 나쁘지 않습니다. 나는 많은 사람들이 움직이는 gif와 태그를 깜빡 거리게하는 이유가 있다고 말하고 있습니다. Blixt와 같은 나의 대답은 정확합니다. 그것은 가능하지만 플래시에서 자바 스크립트를 사용하는 데 훨씬 적은 노력이 소요됩니다. 텍스트의 각 문자를 별도의 요소로 분할하고 각 요소를 개별적으로 애니메이션하거나 캔버스를 사용해야합니다. 캔버스를 사용하지 않으면 모든 브라우저에서 아직 지원되지 않는 레벨 3 CSS를 사용하지 않는 한 html 요소를 회전 할 수 없습니다 (x/y 축에서 em 이동). –
+0
또한 경로를 따라 이동하려면 수학 함수를 사용하여 경로를 표현하는 방법을 찾아야합니다. 경로의 복잡성에 따라 다른 방법이 있습니다. 귀하의 질문에서 나는 경로가 원과 같은 간단한 것이 아니라고 가정합니다. http://en.wikipedia.org/wiki/Polynomial_interpolation 및 http://en.wikipedia.org/wiki/Spline_(mathematics)를 확인해보십시오. 아직 실제로 답변을 얻지 못했다면 코드를 작성하면 몇 번의 마우스 클릭만으로 플래시를 사용하는 것이 더 나을 것입니다. –
텍스트를 회전 할 수 있어야합니다. – fent
위의 예제를 보면 JavaScript 만 사용하여 경로를 따라 텍스트를 이동하고 회전 할 수 있지만 이전 브라우저 (또는 꽤 최근 브라우저)에 대해서는 회전 지원을 사용할 수 없다는 것을 알 수 있습니다. 경로를 따라 움직이는 부분은 모든 브라우저에서 작동합니다. – Blixt
아, 그리고 이와 비슷한 것을 사용한다면 JavaScript의 인터페이스 관련 부분에 경로를 두는 것이 좋습니다. 경로는 콘텐츠에 가치를 부여하지 않으며 HTML에 삽입하면 안됩니다. 브라우저를 통해 작동하는 방식을 시도하고 싶었 기 때문에 방금했습니다 (모든 브라우저에서 작동 함이 밝혀졌습니다). .) – Blixt