오프닝 만들기가 이렇게 어렵나

오프닝이고 나발이고 첨에 웹폰트 연결도 안되서 때려칠뻔

인터넷에서 하란 대로 했는데도 안되가지고 뭐가 문젠가 했는데

파일경로 이렇게 했어야 되는거 너무 올라가서 걸어놔가지구 아무도 내 말을 안들어줬던거임

적용된 웹폰트 반갑다...

오프닝을 원래 어떻게 할라 했었냐면

그림이 opacity 조절되서 옆에서 쌰악 나오고 글자 타이핑 애니메이션을 가운데에 넣어주고 싶었는데 3시간동안 된게 없음 ㅋㅋ 노트북 배터리 살려달라고 우는중 (나도 우는중)

진짜 이래저래 다 찾아서 코드 계속 갈아엎었는데 될 희망이 보이는 코드를 찾음

<div class="opening">
    <img class="opening-bg" src="/img/water_lilies2.jpg" alt="">
    <span class="text"></span><span class="blink"></span>
</div>

<script>
const content = '저녁이 오면 나는 다시 되뇌이고, \n 더 잘하려는 희망을 가지고 다음 날을 열망한다.';
const text = document.querySelector('.text');
let i = 0;

function typing(){
    let txt =  content[i++];
    text.innerHTML += txt === '\n' ? '<br/>' : txt;
    if (i > content.length){
        text.textContent = '';
        i = 0;
        clearInterval(i);
    }
}
setInterval(typing, 200);
</script>

근데 죄송한데 저 한번만 실행 시키고 싶거든요
clearInterval 뭐시기 쓰면 된다는데 어디다 넣어봐도 안되서 보니까 함수를 다시 만들어야되는거 같다 ㅋㅋㅋㅋㅋㅋㅋ 진짜 제발,,,

css는 왜 어려운걸까

뭐가 많으니까 어렵겠지

.opening {
    height: 100vh;
    font-size: 2rem;
    position: relative;
    text-align: center;
}
.opening-bg {
    opacity: 0.6;
    position: absolute; left: 0; top: 0;
    width: 100%; height: auto;
}
.blink {
    animation: blink 0.5s infinite;
    font-size: 2.5rem;
}
@keyframes blink {
    to {
        opacity: 0;
    }
}

배경 이미지 넣을 걸 그냥 분리시켜서 img로 걸어놨는데 그냥 무너져버림 와르르

opacity 미안한데 글자말고 사진에만 해달라고

내가 봤을 때 낼 다시 싸악 갈아 엎지 않을까,,,진짜 너무 어려워요 살려주세요