印刷効果ログインページ
少し特別な登録ページを作りたい
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
を使用して小数点の数を通常値に戻します.Reference
この問題について(印刷効果ログインページ), 我々は、より多くの情報をここで見つけました https://velog.io/@codedot/타이핑-효과-랜딩-페이지テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol