CSS를 사용하여 원활한 스크롤 텍스트 표시 효과를 만드는 방법.

CSS를 사용하여 원활한 스크롤 텍스트 표시 효과를 만드는 방법에 대한 단계

웹 디자인에서 원활한 스크롤 텍스트 표시 효과는 사람들에게 더 부드럽고 매력적인 사용자 경험을 제공합니다. 이 효과는 일반적으로 회전식 슬라이드 및 뉴스 스크롤과 같은 장면에서 사용됩니다. 이 문서에서는 CSS를 사용하여 원활한 스크롤 텍스트 표시 효과를 얻는 구체적인 단계를 소개하고 관련 코드 예제를 제공합니다.

1단계: HTML 구조 만들기

먼저 스크롤 텍스트가 포함된 컨테이너 요소를 만들어야 합니다. div, ul 또는 기타 HTML 요소일 수 있습니다. 예를 들어 div 요소를 생성하고 고유 ID를 지정합니다.

<div id="scrolling-text">
  <ul>
    <li>文字1</li>
    <li>文字2</li>
    <li>文字3</li>
    <li>文字4</li>
    <li>文字5</li>
  </ul>
</div>

2단계: 스타일 설정

다음으로 너비, 높이, 오버플로 처리 등을 포함하여 컨테이너 요소의 스타일을 설정해야 합니다. 동시에 너비, 높이, 행 높이 등을 포함하여 각 스크롤 항목의 스타일도 설정해야 합니다. 다음은 기본 스타일 설정입니다.

#scrolling-text {
  width: 300px;
  height: 200px;
  overflow: hidden;
  position: relative;
}

#scrolling-text ul {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  animation: scrolling 10s linear infinite;
}

#scrolling-text ul li {
  width: 300px;
  height: 40px;
  line-height: 40px;
}

3단계: 원활한 스크롤 효과 달성

이제 CSS 애니메이션을 사용하여 텍스트의 원활한 스크롤 효과를 구현해야 합니다. @keyframes 규칙을 사용하여 스크롤이라는 애니메이션을 정의하고 이를 스크롤 ul 요소에 적용할 수 있습니다.

@keyframes scrolling {
  0% {
    top: 0;
  }
  100% {
    top: -200px;
  }
}

위 코드에서는 키프레임 0%와 100%를 사용하여 각각 애니메이션의 시작 상태와 종료 상태를 정의합니다. . top 속성은 스크롤 항목의 수직 위치를 제어합니다.

4단계: 경험 최적화

스크롤 효과의 가독성과 사용자 경험을 향상시키기 위해 컨테이너 요소에 마우스 이벤트를 추가하고, 마우스를 가리키면 스크롤을 일시 중지하고, 마우스가 떠날 때 스크롤을 다시 시작할 수 있습니다. 다음은 JavaScript를 사용하여 구현된 샘플 코드입니다.

var scrollingText = document.getElementById('scrolling-text');

scrollingText.onmouseenter = function() {
  scrollingText.style.animationPlayState = 'paused';
}

scrollingText.onmouseleave = function() {
  scrollingText.style.animationPlayState = 'running';
}

위의 JavaScript 코드를 추가하면 마우스를 스크롤 컨테이너 위로 가져가면 애니메이션이 일시 중지되고 마우스가 멀어지면 다시 시작됩니다.

이 시점에서 CSS를 사용하여 원활한 스크롤 텍스트 표시 효과를 얻는 모든 단계를 완료했습니다. 웹 디자인 스타일에 더 잘 맞는 스크롤 효과를 얻기 위해 필요에 따라 스타일과 애니메이션 속성을 조정할 수 있습니다.

요약하자면, 이 문서에서는 CSS를 사용하여 HTML 구조 만들기, 스타일 설정, 원활한 스크롤 효과 달성 및 경험 최적화를 포함하여 원활한 스크롤 텍스트 표시 효과를 만드는 구현 단계를 소개합니다. 이 기사가 웹 디자인에서 텍스트 스크롤 효과를 얻는 데 도움이 되기를 바랍니다.

위 내용은 CSS를 사용하여 원활한 스크롤 텍스트 표시 효과를 만드는 방법.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!