소개 프로필 꾸미기

기존 소개 페이지가 너무 밋밋해서 script를 활용한 새로운 소개 단락을 만들기로 결정하였다. 결과본은 위에 나와있는 것과 같다.
스크롤을 내리면 텍스트가 등장하고, “HELLO!”라는 인삿말은 귀엽게 통통 튀게, 그리고 내 정보들에 대해 간단하게 작성한 텍스트들이 차례대로 등장하는 모습이다. 타이핑이 일어나는 듯한 효과를 주었다.
수행하기 위해서는 html단에서 텍스트가 들어갈 자리를 마련해주고, 각 정의된 자리에 대해서 스크립트 및 css로 디자인이나 함수를 지정해주면 된다. 어떤 식으로 수정하였는지 차례대로 정리해보겠다.

소개글이 들어갈 자리를 HTML에서 마련하기

기존의 소개글이 구성된 모습은 위와 같은데, 너무 밋밋하다. 따라서 본인은 _includes/about.html을 수정해주었다.

HELLO!

위에서 본 것처럼 우선 인사를 해줘야겠다 싶었다. ~~동방예의지국에 인사도 안하면 예의없는 사람이 되어버릴지도 모른다.~~

그래서 인사를 하는 부분을 다음과 같이 넣어준다.

<div class="welcome" id="welcome_block">
    <div class="sayhello" id="hello">
        <body>
            <div class="waviy">
                <span style="--i:1">H</span>
                <span style="--i:2">E</span>
                <span style="--i:3">L</span>
                <span style="--i:4">L</span>
                <span style="--i:5">O</span>
                <span style="--i:6">!</span>
                <span style="--i:7">!</span>
            </div>
        </body>
    </div>
    <div class="introduce">
        <div class="word"></div>
    </div>
</div>

굳이 한글자 한글자 따로 해준 이유는 뒤에서 설명하겠지만 한글자씩 통통 튀는 효과를 주기 위함이다. 다른 글자로 해보고 싶다면 위와 같은 방식으로 내용만 다르게 입력해주면 된다.

내 TMI 대방출하기(타이핑하는 효과로 들어가는 부분)

그리고 내 TMI를 대방출할 곳을 다음과 같이 넣어준다.

<div class="introduce">
    <div class="word"></div>
</div>

이렇게만 해주는 이유는 스크립트로 넣을 텍스트를 한글자씩 띄울 것이기 때문에, 단순히 텍스트가 들어갈 장소만 지정해주는 것이다.

HELLO 스타일 지정해주기

다음으로 제일 중요한 것은 앞서 만들어놓은 애들한테 스타일을 적용하는 것이다. 본인은 dark mode와 light mode 두 경우 모두 적용하기 위해서 서로 다른 스타일을 먹였지만, 코드는 거의 똑같기 때문에 한 부분에 대한 내용만 리뷰해놓겠다. 위에서 만들어놓은 html 코드를 보게 되면, HELLO가 들어갈 부분의 class를 sayhello라 해놨으므로 다음과 같이 스타일을 적용할 수 있다. 그전에 폰트를 미리 맨 위쪽에 import해야한다. 참고로 다음 파일은 assets/css/style.scss에 들어가는 내용이다.

@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&display=swap');

그러고 나면 다음과 같은 코드를 적용할 부분에 알맞게 복붙해넣으면 된다.

.sayhello{
    margin-top: 180px;
    .waviy {
        position: relative;
        -webkit-box-reflect: below -10px linear-gradient(transparent, rgba(0,0,0,.2));
        font-size: 5vmax;
    }
    .waviy span {
        font-family: 'Alfa Slab One', cursive;
        position: relative;
        display: inline-block;
        background: linear-gradient(rgb(3, 158, 200), rgb(0, 99, 228), darkblue);
        color: transparent;
        -webkit-background-clip: text;
        text-transform: uppercase;
        animation: waviy 1s infinite;
        animation-delay: calc(.1s * var(--i));
    
    }
    @keyframes waviy {
        0%,40%,100% {
            transform: translateY(0)
        }
        20% {
            transform: translateY(-10px)
        }
    }
}

여기서 background로 gradient를 주고, 해당 색이 적용될 부분을 텍스트에만 맞춰주는 코드가 있는데, 이를 통해 다음과 같이 예쁜 색을 텍스트에도 사용할 수 있다.

background: linear-gradient(rgb(3, 158, 200), rgb(0, 99, 228), darkblue); --> 배경색을 gradient로 해주는 코드(linearly 바뀐다)
color: transparent; --> 텍스트 부분을 투명하게 만들어주는 코드
-webkit-background-clip: text; --> background가 적용될 부분을 text 부분으로 한정시키는 코드

색을 테마에 따라 다르게 적용한 모습은 위와 같다. 단색으로 텍스트 색을 적용하는 것보다 다이내믹해 보여서 더 좋은 것 같다.

타이핑 효과가 나는 텍스트 만들기

사실 이게 위에거보다 더 어려웠다. 여기서는 자바스크립트가 아니라 JQuery라는 걸 쓰는데, 이걸 html에 적용할 때 어떻게 하는지 몰라서 이것저것 시도해보다가 결국 성공했다. 다음에 또 까먹을지도 모르니까 기록해둬야겠다. 앞서 우리는 html에서 TMI가 들어갈 공간을 단순히 word라고만 지정해주고 마무리했었다.

JQuery 스크립트를 HTML에 넣는 방법

보통 JavaScript를 HTML에 넣을 때

<script>
    어쩌구 저쩌구
</script>

이런 식으로 넣게 된다. 그러나 단순히 위의 태그 안에 JQuery 코드를 작성하면 자바 스크립트를 디폴트로 돌려버리기 때문에 사용할 수 없다. 따라서 다음과 같은 스크립트를 위에 추가해준다.

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

이제 거의 마무리되었다. 이 스크립트 밑에 다음과 같이 내용을 적어주었다.

<script>
    var words = ['My name is Junyoung Park', 'Yonsei University', 'Electrical and electronic engineering', 'Deep learning', 'I like Sushi', 'I also like design'],
        cursor = ' ┃',
        part,
        i = 0,
        offset = 0,
        len = words.length,
        forwards = true,
        skip_count = 0,
        skip_delay = 15,
        speed = 70;
        
    var wordflick = function () {
        setInterval(function () {
            if (forwards) {
                if (offset >= words[i].length) {
                    ++skip_count;
                    if (skip_count == skip_delay) {
                        forwards = false;
                        skip_count = 0;
                    }
                }
            }
            else {
                if (offset == 0) {
                    forwards = true;
                    i++;
                    offset = 0;
                    if (i >= len) {
                        i = 0;
                    }
                }
            }
            part = words[i].substr(0, offset);
            if (skip_count == 0) {
                if (forwards) {
                    offset++;
                }
                else {
                    offset-=3;
                    if(offset<0){
                        offset = 0;
                    }
                }
            }
            $('.word').text(part + cursor);
        }, speed);
    };

    $(document).ready(function () {
        wordflick();
    });
</script>

‘var words’라고 되어있는 부분이 내 TMI가 마구 방출될 때 순서대로 읽어들일 string 모음이다. 따라서 해당 내용만 바꾸면 된다. 그리고 본인은 한글자씩 타이핑하는 효과를 주되, 지울 때는 보다 빠르게 지워주길 원해서 if(forward)가 아니면 offset을 3씩 빼고, 0보다 작아지면 0으로 만드는 조건문을 사용했다. 본인 취향에 따라 해당 코드를 조금씩 손보면 될 것 같다.

스타일 지정해주기

앞서 HELLO의 경우와 같이 css 파일에 관련 스타일을 지정해준다.

.introduce{       
    margin-top: 90px;
    margin-bottom: 120px;
    .word {
        margin: auto;
        color: black;
        font: 500 normal 3vmax 'tahoma';
    }
}