MARQUEE없이 HTML5 및 CSS3에서 스크롤 가능한 콘텐츠 만들기

오랫동안 HTML 을 작성해 온 사람들은 그 요소를 기억할 것입니다. 이것은 브라우저 특정 요소로 화면 전체에 스크롤 텍스트 배너를 만들었습니다. 이 요소는 HTML 사양에 추가 된 적이 없으며 다양한 지원을 통해 다양한 브라우저에서 지원됩니다. 사람들은 종종 긍정적이고 부정적인이 요소의 사용에 대해 매우 강한 의견을 가지고있었습니다. 그러나 당신이 그것을 좋아하든 싫어하든간에 그것은 박스 경계를 ​​넘쳐나는 내용을 만드는 목적에 도움이됩니다.

강력한 개인적인 견해를 제외하고는 브라우저가 완전히 구현하지 못한 이유 중 하나는 시각 효과로 간주되므로 구조를 정의하는 HTML에 의해 정의되어서는 안된다는 것입니다. 대신 시각적 효과 또는 표현 효과는 CSS에 의해 관리되어야합니다. 그리고 CSS3는 브라우저가 어떻게 마키 효과 를 요소에 추가하는지 제어하는 ​​선택 윤곽 모듈을 추가 합니다 .

새로운 CSS3 속성

CSS3에는 오버 플로우 스타일, 선택 윤곽 스타일, 선택 윤곽 개수, 선택 윤곽 방향 및 선택 윤곽 속도와 같이 선택 윤곽에서 내용이 표시되는 방식을 제어하는 ​​데 도움이되는 5 개의 새 속성 이 추가되었습니다.

넘치는 스타일
오버플로 스타일 속성 (CSS 오버플로 문서에서 설명 함)은 내용 상자를 오버플로하는 내용의 기본 스타일을 정의합니다. 선택 윤곽 선 또는 선택 윤곽 블록에 값을 설정하면 내용이 왼쪽 / 오른쪽 (선택 윤곽 선) 또는 위 / 아래 (선택 윤곽 블록)로 안팎으로 밀려납니다.

마키 스타일
이 속성은 내용을보기 (및 바깥 쪽)로 이동하는 방법을 정의합니다.

옵션은 스크롤, 슬라이드 및 대체입니다. 스크롤은 내용이 화면에서 완전히 벗어나기 시작한 다음 표시 영역이 화면에서 완전히 벗어날 때까지 이동합니다. 슬라이드는 콘텐츠가 화면에서 완전히 벗어나 시작한 다음 콘텐츠가 화면 위로 완전히 이동하고 화면에 슬라이드 할 콘텐츠가 더 이상 남아 있지 않을 때까지 이동합니다.

마지막으로, alternate는 내용을 앞뒤로 움직여 좌우로 바운스합니다.

마키 플레이 횟수
MARQUEE 요소를 사용하는 단점 중 하나는 천막이 결코 멈추지 않는다는 것입니다. 그러나 marquee-play-count 스타일 속성을 사용하면 특정 횟수만큼 내용을 켜고 끌 수있는 선택 윤곽을 설정할 수 있습니다.

움직이는 방향
또한 화면에서 내용을 스크롤 할 방향을 선택할 수도 있습니다. 정방향 및 역방향 값은 오버플로 스타일이 선택 윤곽선 인 경우 텍스트의 방향성을 기반으로하고 오버플로 스타일이 윤곽 블록 인 경우 위아래로 설정됩니다.

움직이는 방향 세부 정보

넘치는 스타일 언어 방향 앞으로
연회실 ltr 왼쪽 권리
rtl 권리 왼쪽
마키 블록 쪽으로 하위

연회 속도
이 속성은 내용이 화면에서 얼마나 빨리 스크롤되는지를 결정합니다. 값은 느림, 보통 및 빠름입니다. 실제 속도는 내용과 브라우저에 표시되는 내용에 따라 다르지만 속도가 느린 속도는 느린 속도보다 느린 속도보다 느립니다.

마키 속성의 브라우저 지원

CSS 선택 윤곽 요소를 작동 시키려면 공급 업체 접두사 를 사용해야 할 수도 있습니다. 그들은 다음과 같습니다 :

CSS3 공급 업체 접두사
overflow-x : 선택 윤곽선; overflow-x : -webkit-marquee;
마키 스타일 -webkit-marquee-style
마키 플레이 횟수 -webkit-marquee-repetition
marquee-direction : 앞으로 | 뒤로; -webkit-marquee-direction : 앞으로 | 뒤로;
연회 속도 -webkit-marquee-speed
이에 해당하지 않는 -webkit-marquee-increment

마지막 속성을 사용하면 선택 윤곽의 내용이 화면에서 스크롤 될 때 단계가 얼마나 크거나 작게 정의되어야하는지 정의 할 수 있습니다.

선택 윤곽을 작동 시키려면 공급 업체 접두어 값을 먼저 배치 한 다음 CSS3 사양 값을 따라야합니다. 예를 들어, 다음은 200x50 상자에서 텍스트를 왼쪽에서 오른쪽으로 다섯 번 스크롤하는 선택 윤곽 CSS입니다.

{
너비 : 200px; 높이 : 50px; white-space : nowrap;
오버 플로우 : 숨김;
overflow-x : -webkit-marquee;
-webkit-marquee-direction : 전달;
-webkit-marquee-style : 스크롤;
-webkit-marquee-speed : 보통;
-webkit-marquee-increment : 작은;
-webkit-marquee-repetition : 5;
overflow-x : 선택 윤곽선;
marquee-direction : 앞으로;
marquee-style : 스크롤;
움직이는 속도 : 정상;
마키 플레이 횟수 : 5;
}