지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > HTML 튜토리얼 > 본문

HTML에서 텍스트 스크롤 효과를 얻는 방법

青灯夜游
풀어 주다： 2018-11-29 09:30:58
원래의
34480명이 탐색했습니다.

HTML에서는 HTML 태그를 통해 텍스트 스크롤 효과를 얻을 수 있으며, 태그에 다양한 속성을 설정하여 다양한 텍스트 스크롤 효과를 얻을 수 있습니다.

HTML에서 텍스트 스크롤 효과를 얻는 방법

HTML에서 텍스트의 스크롤 효과를 얻는 것은 실제로 매우 간단합니다. 이 글에서는 HTML 태그를 사용하여 텍스트의 스크롤 효과를 얻는 방법을 소개합니다. 태그에 대해 다른 속성을 설정합니다.

HTML Marquee 태그는 이미지나 텍스트를 가로 또는 세로로 스크롤하는 데 사용할 수 있는 비표준 HTML 요소입니다.

간단히 말하면 이미지나 텍스트를 자동으로 위, 아래, 왼쪽, 오른쪽으로 스크롤합니다.

간단한 텍스트 스크롤 구현의 예인 를 살펴보겠습니다. 

<marquee> 这是html marquee标签的一个简单滚动例子</marquee >
로그인 후 복사

Rendering:

HTML에서 텍스트 스크롤 효과를 얻는 방법

정말 간단하지 않나요? 스크롤하려는 텍스트를 < marquee> 태그 바로 안쪽에 있습니다.

다음으로 HTML 태그의 속성을 살펴보고 HTML 태그가 이미지나 텍스트의 스크롤을 설정하는 방법을 살펴보겠습니다.

Marquee 요소에는 움직이는 자막의 모양과 스크롤 방법을 제어하고 조정하는 데 사용되는 여러 속성이 포함되어 있습니다.

HTML에서 텍스트 스크롤 효과를 얻는 방법

Marquee 태그 롤링 자막 설정의 예:

이러한 속성을 사용하여 태그를 설정하고 예제 효과를 살펴보겠습니다.

1. 방법, 배경색 

<marquee width = "100%" behavior = "scroll" bgcolor = "pink" >     
	这是滚动字幕的一个例子......  
</marquee>
로그인 후 복사

렌더링:

HTML에서 텍스트 스크롤 효과를 얻는 방법

2. 조금 더 복잡한 스크롤 자막

스크롤해야 하는 모든 콘텐츠는 스크롤 상자의 전체 길이 위로 미끄러지지만 끝에서 멈춰 영구적으로 표시됩니다. 내용. 

<marquee width = "100%" behavior = "slide" bgcolor = "pink" >     
   这是一个复杂的滚动字幕例子......  
</marquee >
로그인 후 복사

렌더링:

HTML에서 텍스트 스크롤 효과를 얻는 방법

3. HTML 텍스트의 스크롤 방향을 설정하세요

선택 윤곽 태그의 속성을 설정하여 텍스트 스크롤 방향을 변경할 수 있습니다. 방향은 왼쪽, 오른쪽, 위, 아래가 될 수 있습니다.

오른쪽 선택 상자를 스크롤하는 예를 살펴보겠습니다. 

<marquee width = "100%">     
   文本默认从右向左滚动......  
</marquee >  
<marquee width = "100%" bgcolor = "pink"  direction = "right" >     
   设置文本从左向右滚动......  
</marquee >
로그인 후 복사

렌더링:

HTML에서 텍스트 스크롤 효과를 얻는 방법

4. 텍스트가 오른쪽에서 왼쪽으로, 그리고 왼쪽에서 오른쪽으로 스크롤되도록 자막을 주기적으로 왼쪽과 오른쪽으로 스크롤하도록 설정하세요. 

<marquee width = "100%" behavior = "alternate" bgcolor = "pink" >     
   文本从右向左滚动后，在从左向右滚动的例子......  
</marquee>
로그인 후 복사
图 렌더링:


5, HTML 중첩 롤링 자막(& lt; marquee & gt; 라벨) HTML에서 텍스트 스크롤 효과를 얻는 방법

<marquee width = "400px" height ="200px" behavior = "alternate" style ="border:2px solid red" >      
	<marquee behavior = "alternate" >   
	      嵌套滚动字幕框...  
	</marquee >  
</marquee>
로그인 후 복사
효과 맵:

HTML에서 텍스트 스크롤 효과를 얻는 방법

html & lt; marquee & gt;

1) Marquee에서 설정한 롤링 자막은 인간의 눈이 움직임과 자막에 지속적으로 끌리기 때문에 산만해질 수 있습니다. 2) Marquee로 설정된 텍스트는 움직일 수 있으므로 스크롤 속도에 따라 정적 텍스트를 클릭하기가 더 어렵습니다.

3) Marquee 태그 요소는 비표준 HTML 요소입니다.

4) Marquee에서 설정한 스크롤 자막은 불필요하게 사용자의 주의를 끌고 텍스트를 읽기 어렵게 만듭니다.

브라우저 지원:

요약: HTML에서 텍스트 스크롤 효과를 얻는 방법위 내용은 이 글의 전체 내용입니다. 모든 사람의 학습에 도움이 되기를 바랍니다.

위 내용은 HTML에서 텍스트 스크롤 효과를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
html marquee
원천：php.cn
이전 기사：HTML5에서 캔버스와 SVG의 차이점은 무엇입니까 다음 기사：HTML5와 HTML4의 차이점은 무엇입니까
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
Width 속성을 추가하여 콘텐츠를 왼쪽으로 이동합니다. 나는 본문에 여백을 제공했습니다. main {left margin: 200px; right margin: 200px; text alignment: center} ...
에서 2024-04-06 22:01:35
0
3
816
웹 애플리케이션에 버전 정보를 표시하는 모범 사례는 무엇입니까? 웹 애플리케이션을 개발 중입니다. 웹 애플리케이션에 버전 정보를 표시하는 모범 사례는 무엇입니까? 저는 semantic versioning을 사용하고 있고 이미 ...
에서 2024-04-06 19:13:16
0
2
476
Laravel 8 - /{editable_text} 경로를 /{user} 경로로 리디렉션하는 방법 사용자 프로필로 연결되는 리디렉션 경로를 만들려고 했습니다. 리디렉션 경로는 사용자 데이터베이스의 문자열/텍스트여야 하며 동일한 사용자 프로필 페이지로 리디렉션되...
에서 2024-04-06 17:26:11
0
1
410
React Three Fiber: 스크롤 이벤트가 지연되는 이유는 무엇입니까? ReactThreeFiber에는 카메라 줌 전체에 걸쳐 유지하려는 스프라이트를 생성하는 React 구성 요소가 있습니다. 알고리즘은 작동하는 것 같지만(시간이 지...
에서 2024-04-06 13:39:24
0
1
410
Live Server를 사용하는 웹 사이트를 파일에서 실행할 때 작동하지 않습니다. 여러 브라우저를 사용해 보았지만 모든 경우에 웹사이트가 LiveServer에서 잘 작동했습니다. 반면, Firefox/Chrome을 사용하여 실행하면 사이트에서 ...
에서 2024-04-06 12:46:18
0
1
403
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿