4번째 스킨 작업중

들어오면 이 영상이 나오도록 하였는데, 신곡을 사용하고 싶어도 신곡은 영상을 끊을 타이밍이 애매해서 Heart Shaker 뮤직비디오를 사용했다.

헤더는 원래 쭉 고정되어 있도록 했다가, 이런저런 판단 끝에 비디오가 끝나면 내려오는 방향이 좋을 것 같아서 비디오가 끝나면 나타나도록 변경했다.

비디오 등이 페이드아웃 되는 시점은 jquery scrollex를 이용하였고, 헤더의 등장 애니메이션은 css를 이용했다.

@keyframes reveal-top {
    0% {
        top: -4em;
        opacity: 0;
    }

    100% {
        top: 0;
        opacity: 1;
    }
}

여타 태그들과 마찬가지로 -ms- -moz-등을 이용해서 설정을 해줬다.

ex) @-ms-keyframes

사이드 네비게이션은 굉장히 단순한 느낌으로 하나를 만들었다.

<div id="Leftnav" class="sidenav">
    <span class="closebtn"><i class="fas fa-times"></i></span>
</div>

.openbtn {
    margin-left: 10px;
    font-size: 30px;
    line-height: 50px;
    cursor: pointer;
}

.closebtn {
    position: absolute;
    top: 5px;
    right: 25px;
    font-size: 30px;
    float: right;
    cursor: pointer;
}

#Leftnav {
    height: 100vh;
    width: 350px;
    position: fixed;
    top: 0;
    left: -350px;
    opacity: 0;
    background-color: #fff;
    overflow-x: hidden;
    -moz-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
    padding: 50px 10px;
    z-index: 1000;
}

#Leftnav.reveal {
    left: 0;
    opacity: 1;
}

$(".openbtn").click(function () {
    $("#Leftnav").addClass("reveal")
}),
$(".closebtn").click(function () {
    $("#Leftnav").removeClass("reveal")
})

본문은 지난번에 작성한 세번째 스킨글에서 사용했던 백그라운드 이미지를 사용했다.

제일 크게 바뀐 점이 "infinite scroll"의 삽입인데, 페이지가 남는 게 좀 더 직관적으로 원하는 페이지에 갈 수 있다는 장점은 있지만, 상단에 비디오를 배치하고 보니 아무래도 infinite scroll을 이용하는 게 좀 더 모양새가 나겠다 싶어서 적용하게 되었다.

하는 김에 masonry 디자인도 다시 적용해보았다.

본문 디자인 대부분이 앞 스킨을 그대로 가져왔지만, 제목 부분과 글의 정보를 나타내는 부분에서 변화를 주었다.

무엇보다 큰 변화는, 묘한오빠님이 글을 보기 힘들다는 문제를 지적해주셔서 삽입한 글자 크기 조절 버튼이다. 예전에 지인에게 만든 스킨을 보여주며 가독성에 관해 논했던 적이 있었지만, 크게 불편하지 않아 보인다고 생각해서 흐지부지 넘겼던 문젠데, 정확하게 짚어주셨다.

방식 자체는 간단하게 클릭하면 페이지를 감싸는 부분에 class를 하나 추가하고, 만약 이미 class를 가지고 있다면 제거하는 방식을 이용했다.

사용하지 않는 태그 페이지를 이용해 about 페이지를 만들었다.

사용하진 않지만, 티스토리에서 기본적으로 추가해놓은 페이지라 티스토리가 추가한 잡다한 기능(ex. body id) 등을 이용할 수 있어서 괜찮다고 생각한다.

title은 자바스크립트를 이용해 변경했다.

if (window.location.pathname == '/tag') {
    document.title = "About" ;
};

이메일 버튼을 삭제하고 전체화면 버튼을 삽입했다.

만들기 시작한 기간이 얼마 되지 않아 썩 훌륭하진 않지만, 이번 스킨은 조금 시간을 더 투자해서 완성도를 조금 더 높여보고자 하는 욕심이 생긴다.