(2024 03 14) js 21일차

    <main id="main">

        <div class="container">

            <h4>Welcome</h4>

            <h2>I'M A <span></span></h2>

            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eu risus accumsan, volutpat diam eget, rhoncus ipsum. Phasellus in molestie felis, finibus venenatis mauris.</p>

            <button class="download">DownLoad</button>

            <button class="mouse"><i class="fa-solid fa-computer-mouse"></i></button>

        </div>

    </main>

 

이 부분에 대한 js 코드는

(function (){
const spanel = document.querySelector("main h2 span");
const txtArr=["web publisher","front-end developer","web ui desginer"]

let index=0
let currentTxt = txtArr[index].split(""); //텍스트를 하나씩 가져와 배열로 만든다 새로운 배열을 만든다


function writeTxt(){
    spanel.textContent +=currentTxt.shift();
    if (currentTxt.length !==0) {
        setTimeout(writeTxt, Math.floor(Math.random()*100));
    }
    else {
        currentTxt=spanel.textContent.split("");
        setTimeout(deleteTxt,3000);
    }

}

function deleteTxt() {
    currentTxt.pop();
    spanel.textContent=currentTxt.join("");
    if (currentTxt.length !==0) {
        setTimeout(deleteTxt,Math.floor(Math.random()*100));
    }
    else {
        index=(index+1)%txtArr.length;
        currentTxt = txtArr[index].split("")
        writeTxt();
    }


}

writeTxt();
})();

이 js 코드의 기능

main에 있는 span 부분에 텍스트를 타이핑 하듯이 한글자 한글자씩 입력하고 지우고 새로운 문장을 입력하고 지우고 하는것을 반복하는 코드이다 

 

txtArr 에는 입력하고  싶은 문장이 담겨있다 

currentTxt 는 txtArr[index]를 split("")쪼개서 다시 배열로 저장하는 기능으로 

현재 txtArr[index] 값이 => '나는 하늘을 좋아한다 '  이면

'나'  '는'  '   '  '하'  '늘' '을' '좋' '아' '한' '다' 리거 한글자 한글자식 배열로 저장된다 

 

writeTxt 함수는 

currentTxt.shift(); 로 인해 한글자씩 앞에서 꺼내지면 이 꺼내진 글자를 span에 집어 넣는걸 반복한다

currentTxt 배열의 길이가  0 이되면 이때까지 span에 추가한 문자들을 다시 currenTxt에 넣어서 원래 상태로 만들고

deleteTxt라는 함수를 실행한다 

 

deleteTxt함수는

currentTxt 를 뒤에서 부터 하나씩 빼서 빼고난후 span에 currentTxt를 출력한다

만약 currentTxt 길이가 0이되면 index값을 증가 시키고 writeTxt 를 실행시킨다

이때 index값을 증가시면  txtArr 에 담겨있는 다음 값이 나타난다 

 

이과정을 무한히 반복하기 위해서  index=(index+1)%txtArr.length; 이코드가 있다 index값이 txtArr. 길이보다 커질때에도 

무한히 돌아갈수 있도록 하는 코드이다 

 

 

const headerel =document.querySelector('header');
window.addEventListener('scroll',function() {
    const browerScrolly=window.scrollY;
    if(browerScrolly>0){
        headerel.classList.add("active");

    }
    else{
        headerel.classList.remove("active")
    }
})

이 js 코드는 스크롤할때마다 실행하는 이벤트로 

스크롤을 하면 현재 y좌표를 받아오면 만약 이 y좌표가 0보다 크다면 즉 스쿨을 했다면

header 에 active 라는 클래스를 추가하면 0이라면 active라는 클래스를 지우는 함수이다 

 

const animationMove = function(selector){

    const targetel = document.querySelector(selector);
    const browerScrolly=window.scrollY;
    const targetScrolly = targetel.getBoundingClientRect().top+browerScrolly;
    window.scrollTo({top:targetScrolly,behavior:'smooth'});
};

const scollMoveel = document.querySelectorAll("[data-animation-scroll='true']");
for(let i = 0; i < scollMoveel.length; i++){
    scollMoveel[i].addEventListener('click',function(e){
        const target = this.dataset.target; //선택자를 가져옴
        animationMove(target);
    });
}

 

scollMoveel 아래에 있는 for문부터 확인해보면

scollMoveel를 클릭하였을때 scollMoveel의 dataset에 담긴 선택자를 받아와 animationMove함수를 실행한다

 

animationMove함수는

현재의 y값을 저장하고 getBoundingClientRect()를 사용하여 대상 요소의 상단 위치를 가져와서 아까 저정한 y의 값을 가져와서 그 두개의 값을 더한곳을 이동시키는 함수이다