애니메이션 스크롤 이미지 효과를 생성하는 방법

debugcn 에 게시 Dev

jbutler483

스크롤 텍스트 상자를 만들기 위해 다음 스 니펫을 사용하고 있습니다.

<html>

<head>
  <style type="text/css">
    #scroll {
      position: absolute;
      white-space: nowrap;
      top: 0px;
      left: 200px;
    }
    #oScroll {
      margin: 0px;
      padding: 0px;
      position: relative;
      width: 200px;
      height: 20px;
      overflow: hidden;
    }
  </style>
  <script type="text/javascript">
    function scroll(oid, iid) {
      this.oCont = document.getElementById(oid)
      this.ele = document.getElementById(iid)
      this.width = this.ele.clientWidth;
      this.n = this.oCont.clientWidth;
      this.move = function() {
        this.ele.style.left = this.n + "px"
        this.n--
          if (this.n < (-this.width)) {
            this.n = this.oCont.clientWidth
          }
      }
    }
    var vScroll

    function setup() {
      vScroll = new scroll("oScroll", "scroll");
      setInterval("vScroll.move()", 20)
    }
    onload = function() {
      setup()
    }
  </script>
</head>

<body>
  <div id="oScroll">
    <div id="scroll">This is the scrolling text</div>
  </div>
</body>

</html>

그러나 '스크롤링'이미지를 만들려고 <img>합니다. 'This is the scrolling text'div 내에 태그 를 만들려고 할 때마다 페이지에 표시되지 않습니다.

나는 자바 스크립트를 처음 접했고 (완전한 초보자) 누군가이 이미지를이 효과에 추가하는 방법을 알려 주면 감사하겠습니다.

사륜 짐마차

포토샵 등에서 내 자신의 gif 이미지를 만드는 것 외에는 이와 같은 것을 만드는 방법을 찾을 수 없었습니다.

편집 그러나 marqee를 사용해 보았습니다.

선택 윤곽 사용

RobH

128px 높이의 이미지를 div에 추가하려면 포함하는 요소의 높이도 20px에서 128px로 변경해야합니다.

작동하는 코드는 다음과 같습니다.

<html>

<head>
  <style type="text/css">
    #scroll {
      position: absolute;
      white-space: nowrap;
      top: 0px;
      left: 200px;
    }
    #oScroll {
      margin: 0px;
      padding: 0px;
      position: relative;
      width: 200px;
      height: 128px;
      overflow: hidden;
    }
  </style>
  <script type="text/javascript">
    function scroll(oid, iid) {
      this.oCont = document.getElementById(oid)
      this.ele = document.getElementById(iid)
      this.width = this.ele.clientWidth;
      this.n = this.oCont.clientWidth;
      this.move = function() {
        this.ele.style.left = this.n + "px"
        this.n--
          if (this.n < (-this.width)) {
            this.n = this.oCont.clientWidth
          }
      }
    }
    var vScroll

    function setup() {
      vScroll = new scroll("oScroll", "scroll");
      setInterval("vScroll.move()", 20)
    }
    onload = function() {
      setup()
    }
  </script>
</head>

<body>
  <div id="oScroll">
    <img id="scroll" src='http://i.stack.imgur.com/P8i8o.png' />
  </div>
</body>

</html>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-06-1

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사

애니메이션 스크롤 이미지 효과를 생성하는 방법

애니메이션 스크롤 이미지 효과를 생성하는 방법

애니메이션으로 ScrollViewer를 스크롤하는 방법

Android에서 스크롤 할 때 이미지를 효과적이고 효율적으로로드하는 방법

애니메이션 이미지에 텍스트를 배치하는 방법

WinForms 스크롤을 애니메이션하는 방법

스크롤 기반 애니메이션 : 만드는 방법

스크롤 할 때 애니메이션을 튕기는 방법?

오른쪽에서 왼쪽으로 애니메이션 효과로 이미지를 표시하는 방법

애니메이션 스킨 메시로 윤곽 효과를 얻는 가장 좋은 방법

이미지 슬라이더에서 애니메이션 텍스트를 중지하는 방법

jQuery를 사용하여 애니메이션 스크롤을 아래로 버튼으로 만드는 방법

Marvel 인트로를 모방하는 이미지 시퀀스 애니메이션

애니메이션 총알 이미지를 만드는 방법?

GIF 애니메이션이 완료된 후 페이지 스크롤을 활성화하는 방법

Firefox : 짧은 애니메이션없이 맨 위로 스크롤하는 방법?

UICollectionView를 스크롤하는 동안 NSLayoutConstraint 애니메이션

알파로 스프라이트 시트 애니메이션의 오래된 이미지를 지우는 방법

자바 스크립트 만 사용하여 라이트 박스 애니메이션 효과를 만드는 방법 (라이브러리 없음)

초기 단계에서 애니메이션 효과를 시작하는 방법

CSS3로 호버 효과를 애니메이션하는 방법

onScroll 요소에 애니메이션을 적용 할 때 정확한 스크롤 위치를 얻는 방법

사용자가 스크롤하여 볼 때 애니메이션하는 방법

이미지를 사용하지 않고 배경색 애니메이션 – 이탈 애니메이션 방법

goJS에서 새 링크를 애니메이션하는 방법

goJS에서 새 링크를 애니메이션하는 방법

애니메이션이있는 스크롤보기를 기반으로 사용자 지정 컨트롤을 만드는 방법은 무엇입니까?

스케일 애니메이션을 사용하여 Android에서 이미지를 숨기는 방법

Paragon 사이트와 유사한 스크롤 효과를 얻는 방법

내 웹 사이트에서 스크롤하는 동안 이미지 크기를 조정하고 있지만 크기 조정을위한 애니메이션을 만드는 방법을 알 수 없습니다.

Android 애플리케이션에서 수직 애니메이션 스크롤을 설정하는 방법