타자기 효과

3050 단어 javascript
페이지가 로드될 때 내 이름이 입력되는 내 포트폴리오 사이트에 대한 아이디어가 있습니다. 화려해 지겠지만 시작하려면 타이핑 효과를 파악하고 싶습니다. 운 좋게도 정말 간단하고 정말 멋져 보이는 Typed.js이라는 라이브러리를 찾았습니다!

나는 그냥 장난을 치고 있었으므로 지금은 바닐라 JavaScript를 사용하고 있습니다. 그래서 간단한 html 문서를 만들고 CDN 스크립트를 포함하는 것으로 시작했습니다.

<head>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
  <title>Typing Effect</title>
</head>

<body>
  <h2>
    <span id="typed"><!-- content will be typed here --></span>
  </h2>
</body>


가장 간단한 방법은 스크립트 태그를 만들고 배열로 순환하려는 문자열을 추가하는 것입니다.

<script>
  const typed = new Typed('.element', {
    strings: ['This effect is super cool!', "I'm going to use it.", 'All the time!'],
    typeSpeed: 40
  };
</script>


그리고 붐, 이미 실행 중입니다!



하지만 조금 더 복잡하고 맞춤화되고 싶었습니다. 내 JavaScript가 아닌 내 HTML이 입력해야 할 내용을 결정하기를 원합니다. 처음에는 html 데이터 속성을 사용할 것이라고 생각했지만, 그럴 필요조차 없다는 것을 알았습니다. 스타일 태그를 포함하여 일반 html로 작성할 수 있으며 그러면 Typed.js가 선택하고 stringsElement 옵션을 설정하여 바로 사용하세요. 또한 더 고급 기능을 추가할 계획이므로 내 html에서 가져오기 위해 자체 파일script.js로 분리했습니다.

// html
<h2>
  <div id="typed-strings">
    <p>This effect is <mark><em>super</mark></em> cool!</p>
    <p>I'm going to use it.</p>
    <p>For pretty much everything</p>
  </div>
  <span id="typed"><!-- content will be typed here --></span>
</h2>

// JavaScript
const typed = new Typed('#typed', {
  stringsElement: '#typed-strings',
  typeSpeed: 40
});


그런 다음 다른 기능을 가지고 놀면서 이러한 옵션을 선택했습니다. 약간 속도를 늦추고 텍스트가 삭제되기 전에 지연을 추가하고 터미널을 시뮬레이트하기 위해 커서를 밑줄로 변경했습니다. 터미널 효과를 돋보이게 하기 위해 CSS로 커서 요소도 사용자 지정했습니다. 3번 반복하고 싶어서 loop, loopCount 옵션도 추가했습니다.

// JS
const typed = new Typed('#typed', {
  stringsElement: '#typed-strings',
  typeSpeed: 40,
  backDelay: 1000,
  loop: true,
  loopCount: 3,
  cursorChar: '_'
});

// css
.typed-cursor {
  font-weight: 900;
  box-shadow: 0px 1px;
  font-size: 1.3em;
}


그리고 몇 분 만에 완벽한 타이핑 효과를 얻었습니다.



다음 단계는 배치 및 다양한 색상을 포함하여 실제로 사용자 정의하는 것이지만 다음 주 프로젝트입니다.
Mac를 사용하여 SSH 서버 프로세스를 수행하는 Docker 이미지 만들기

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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