스크롤에 가로 배경 텍스트를 만드는 방법

8195 단어 tutorialanimationcssjavascript
Pierre's portfolio 페이지에서 본 후 방법을 찾기 위해 고군분투했습니다. 그 모습이 정말 마음에 들어서 다시 만들어보고 싶었습니다.



저는 아직 프론트엔드 기술에서 매우 초기 단계이지만 어쨌든 공유할 것이라고 생각했습니다.

1단계: HTML


  • 간단한 HTML 페이지를 만들고 텍스트 콘텐츠 추가

    • <body>
<header>
<h1>
This can be any text you want, can be interesting, 
fun, exciting, or just something about yourself
</h1>
</header>
</body>


  • 그 아래에 div를 추가합니다. 이것은 스크롤링 텍스트가 되며 scroll-text 와 같은 유용한 이름이 됩니다.

    • <body>
<header>
<h1>
This can be any text you want, can be interesting, 
fun, exciting, or just something about yourself
</h1>
</header>
<div class="scroll-text">
      <span class="bg-text">WELCOME</span>
</div>
</body>


    2단계: CSS


  • 이번 포스트에서는 스크롤 효과를 보실 수 있도록 본문을 아주 길게 만들어 봤습니다.

    • body {
  height: 5000px;
  background-color: #272727;
  font-family: "DM Sans", sans-serif;
}


  • 그런 다음 본문이 더 잘 보이도록 몇 가지 요소를 추가했습니다. 데스크톱에서는 전체 화면으로 표시할 때 중앙에 유지하기 위해 min-height를 사용했지만 모바일에서는 화면 밖으로 나가는 것을 방지했습니다.

    • header {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
  padding: 0 14rem;
}


  • 텍스트의 경우 상당히 유동적일 수 있기를 원했습니다. 저는 Utopia이라는 사이트를 이용하여 유체형 스케일을 구했습니다.

    • header h1 {
  font-size: clamp(2.85rem, 2.18rem + 3.37vw, 4.58rem);
  color: #fff;
}


  • 마지막으로 scroll-text 컨테이너와 bg-text 컨테이너를 편집하여 크고 윤곽이 잡히도록 했습니다. white-space: nowrap를 사용하여 텍스트 줄 바꿈을 방지하고 transition: all 0.5s를 사용하여 잘 스크롤되었는지 확인했습니다. bg-text의 경우 fill-color가 배경과 일치하는지 확인하기 위해 추가 기능을 추가했습니다.

    • .scroll-text {
  position: fixed;
  top: 0;
  left: -800px;
  white-space: nowrap;
  z-index: -1;
  transition: all 0.5s;
}

.bg-text {
  font-size: 40rem;
  color: rgb(122, 122, 122);
  -webkit-text-fill-color: #272727; /* Will override color (regardless of order) */
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: rgb(70, 70, 70);
}


    3단계: 자바스크립트


  • 이것은 쉬운 부분입니다. .scroll-text 클래스에 대한 querySelector를 추가했습니다.
  • 그런 다음 창의 위치를 ​​확인하는 on scroll 이벤트 함수를 만들었습니다.
  • 그런 다음 기본 설정에 따라 x 픽셀만큼 가로 위치를 변경하는 JS의 간단한 스타일 변경입니다.

    • let scrollText = document.querySelector(".scroll-text");

window.onscroll = () => {
    let pos = window.scrollY;
    // console.log(pos);
    scrollText.style.left =  `-${pos/2}px`;
}




    그리고 당신은 그것을 가지고 있습니다. 몇 가지 오류나 잘못된 관행을 범했을 수 있지만 여전히 새롭고 배우고 있습니다. 당신이 적어도 뭔가를 배웠기를 바랍니다 :)

    CodePen Link
    bowling의 physical simulation에서 Spring head의 C++를 사용해 보았습니다 (1)
    poj 1458 최장 공통 서열

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage