JavaScript를 사용하여 글꼴의 왼쪽 및 오른쪽 스크롤 효과를 얻는 방법-프런트엔드 Q&A-php.cn

JavaScript를 사용하여 글꼴의 왼쪽 및 오른쪽 스크롤 효과를 얻는 방법

PHPz

풀어 주다： 2023-04-06 13:39:11

원래의

2088명이 탐색했습니다.

사회가 지속적으로 발전함에 따라 프론트엔드 개발 기술은 점점 성숙해지고 있습니다. 그 중 가장 중요한 웹 프론트엔드 개발 언어 중 하나인 JavaScript는 풍부한 확장성과 운용성을 갖고 있습니다. 실제 개발에서는 JavaScript를 사용하여 글꼴의 왼쪽 및 오른쪽 스크롤 효과와 같은 다양한 동적 효과를 얻을 수 있습니다. 이 기사에서는 JavaScript를 사용하여 글꼴의 왼쪽 및 오른쪽 스크롤 효과를 얻는 방법을 자세히 소개합니다.

1. HTML 구조

먼저 스크롤하려는 글꼴을 표시하기 위해 html로 컨테이너를 만들어야 합니다. html 구조는 다음과 같습니다:

<div id="scrollBox">
  <span id="scrollText">这是一段要滚动的文本This is a roll text.</span>
</div>

로그인 후 복사

이 구조에서는 div 컨테이너와 span 텍스트라는 두 가지 요소를 사용합니다. 그 중 div 컨테이너는 텍스트의 스크롤 범위를 제한하는 데 사용되며, span 텍스트는 스크롤할 텍스트 내용입니다. div容器和span文本。其中，div容器用于限定文本的滚动范围，span文本则是要进行滚动的文本内容。

二、CSS样式

接下来，我们需要使用CSS样式来对上述html结构进行修饰，使其具有滚动效果。CSS样式如下：

#scrollBox {
  width: 200px; /* 容器宽度 */
  height: 30px; /* 容器高度 */
  overflow: hidden; /* 隐藏超出容器部分的内容 */
  border: 1px solid #ddd; /* 容器边框 */
}
#scrollText {
  display: inline-block; /* 文本块级元素转为内联块级 */
  white-space: nowrap; /* 不允许文本换行 */
  font-size: 16px; /* 字体大小 */
  color: #333; /* 字体颜色 */
  margin-right: 20px; /* 右侧空隙，用于控制滚动速度 */
  animation: textScroll 10s linear infinite; /* 文本滚动动画 */
}
@keyframes textScroll {
  0% { transform: translateX(0); } /* 初始状态 */
  100% { transform: translateX(-100%); } /* 最终状态 */
}

로그인 후 복사

我们使用了overflow: hidden属性来隐藏超出容器范围的内容，如此一来，我们就可以将要滚动的文本内容全部放到容器中。同时，我们使用white-space: nowrap属性来防止文本内容发生换行。margin-right属性用于控制滚动速度，数值越大滚动越慢，反之亦然。

最关键的是，我们使用了CSS3中的animation属性来设置文本滚动动画。@keyframes关键字用来声明动画的关键帧，即滚动效果的始末状态。我们在textScroll动画中，设置了初始状态为0%，最终状态为-100%，即文本滚出容器。

三、JavaScript交互

通过以上CSS样式设置，我们已经完成了滚动效果的布局，但实际上，滚动效果是属于浏览器的渲染效果，并非JavaScript直接实现。为了控制这个滚动效果，我们还需要一定程度的JavaScript交互。接下来，我们将通过JavaScript来实现文本滚动的启停。

var textEle = document.getElementById('scrollText'); // 获取文本元素
var textAnimation = textEle.style.animation; // 获取文本动画
textEle.style.animation = 'none'; // 停止文本滚动
window.setTimeout(function() {
  textEle.style.animation = textAnimation; // 恢复文本滚动
}, 0);

로그인 후 복사

我们使用document.getElementById方法来获取要进行滚动的文本元素，通过获取文本元素的animation属性来获取文本动画。然后，通过设置该元素的animation属性为none，即可停止文本滚动效果。最后，我们使用setTimeout方法来异步执行恢复文本滚动，即复原初始的animation

2. CSS 스타일

다음으로 CSS 스타일을 사용하여 위의 html 구조를 수정하여 스크롤 효과를 주어야 합니다. CSS 스타일은 다음과 같습니다.

rrreee

overflow:hidden 속성을 사용하여 컨테이너 범위를 벗어나는 콘텐츠를 숨깁니다. 이러한 방식으로 스크롤할 모든 텍스트 콘텐츠를 컨테이너. 동시에 white-space: nowrap 속성을 사용하여 텍스트 내용이 줄 바꿈되는 것을 방지합니다. margin-right 속성은 스크롤 속도를 제어하는 데 사용되며, 값이 클수록 스크롤 속도가 느려집니다.

가장 중요한 것은 CSS3의 animation 속성을 사용하여 텍스트 스크롤 애니메이션을 설정한다는 것입니다. @keyframes 키워드는 애니메이션의 키프레임, 즉 스크롤 효과의 시작과 끝을 선언하는 데 사용됩니다. textScroll 애니메이션에서 초기 상태를 0%로 설정하고 최종 상태를 -100%로 설정합니다. 즉, 텍스트가 롤아웃됩니다. 컨테이너의. 🎜🎜3. JavaScript 상호 작용🎜🎜위의 CSS 스타일 설정을 통해 스크롤 효과의 레이아웃을 완성했지만 실제로 스크롤 효과는 브라우저의 렌더링 효과이며 JavaScript로 직접 구현되지는 않습니다. 이 스크롤 효과를 제어하려면 어느 정도의 JavaScript 상호 작용도 필요합니다. 다음으로 JavaScript를 사용하여 텍스트 스크롤을 시작하고 중지하겠습니다. 🎜rrreee🎜스크롤할 텍스트 요소를 가져오기 위해 document.getElementById 메서드를 사용하고, 텍스트 요소의 animation 속성을 가져와서 텍스트 애니메이션을 가져옵니다. 그런 다음 요소의 animation 속성을 none으로 설정하여 텍스트 스크롤 효과를 중지할 수 있습니다. 마지막으로 setTimeout 메서드를 사용하여 텍스트 스크롤을 비동기적으로 복원합니다. 즉, 초기 애니메이션 설정을 복원합니다. 🎜🎜위의 JavaScript 상호작용을 통해 텍스트 스크롤 효과 구현을 완료했습니다. 🎜🎜4. 요약🎜🎜지금까지 글꼴의 왼쪽 및 오른쪽 스크롤 효과를 구현하는 JavaScript 방법을 성공적으로 구현했습니다. 텍스트의 스크롤 효과는 CSS 스타일을 통해 설정할 수 있으며, 텍스트 스크롤의 시작과 중지는 JavaScript 상호 작용을 통해 제어할 수 있어 실용성과 참조 가치가 있습니다. 이 기사가 JavaScript를 처음 접하고 프런트 엔드 개발 기술의 성장을 계속 지원하는 개발자에게 도움이 되기를 바랍니다. 🎜

위 내용은 JavaScript를 사용하여 글꼴의 왼쪽 및 오른쪽 스크롤 효과를 얻는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!