印刷効果ログインページ

少し特別な登録ページを作りたい
CSSを勉強しているうちに、知っているSucodingの講座を見て作った、思いがけない方法で作った、不思議で覚えたいことが少ない.

CSS効果

#dynamic {
  position: relative;
  display: inline-block;
}

#dynamic::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: -10px;
  width: 4px;
  height: 100%;
  background-color: white;
}

#dynamic.active::after {
  display: none;
}

#dynamicにdisplay : inline-blockが含まれているのは、Pタグによって生成されるためであり、カーソルの位置はpタグの領域と同じであるため、文字数が短くなったり長すぎたりすると、カーソルの位置が適切ではないため、上記のような形態が与えられる.

JS

let target = document.querySelector("#dynamic");

function randomString() {
  let stringArr = ["Learn to HTML", "Learn to CSS", "Learn to Javascript"];
  let selectString = stringArr[Math.floor(Math.random() * stringArr.length)];
  // Math.floor를 넣어 소수점으로 나오던 숫자를 3을 넘지 않는 랜덤한 숫자가 나오게 됨
  let selectStringArr = selectString.split("");

  return selectStringArr;
}

// 타이핑 리셋
function resetTyping() {
  target.textContent = "";
  dynamic(randomString());
}

//한글자씩 텍스트 출력 함수
function dynamic(randomArr) {
  if (randomArr.length > 0) {
    target.textContent += randomArr.shift();
    setTimeout(function () {
      dynamic(randomArr);
    }, 80);
  } else {
    setTimeout(resetTyping, 3000);
  }
}
dynamic(randomString());

//커서 깜빡임 효과
function blink() {
  target.classList.toggle("active");
}
setInterval(blink, 500);

出力する値を配列に配置し、Math.random()を使用してランダムにフォーマットを生成します.この場合、小数点ではMath.floorを使用して小数点の数を通常値に戻します.