wecod 사전스터디 첫째주 과제는 자기소개 페이지 만들기이다.

먼저 구글링으로 여러 사람들이 만든 자기소개 페이지와 wecode윗 기수 선배님들의 자기소개 페이지를 찾아보았다. 그중 참고 할 만한 페이지들을 선별해서 넣을 기능과 페이지 디자인을 구상하면서 페이지 제작을 시작했다.

우선 페이지를 두페이지로 제작하기로 구상했다.
첫번째 페이지는 애니메이션효과를 주어 처음 페이지에 들어가는 느낌으로 만들었다.



페이지에 접속하면 welcome이라는 텍스트가 위에서 아래로 내려오면서 점점사라지고 내 소개를 하는 텍스트가 빠르게 나타난다. 그리고 사진을 클릭하면 진짜 내 자기소개 페이지로 접속되게 구현하였다.

코드는 이렇다,
<div class="fade-out-box">
	Welcome!
</div>
<div class="fade-in-box">
	I'm Inho
</div>

먼저, html로 각각의 텍스트에 class를 지정해 주었다.
``` @keyframes fadeInDown{ 0%{ opacity:0; transform:translate3d(0, -50%, 0); } to{ opacity:1; transform:translateZ(0); } } ```
그리고 css style sheet에, fadeInDown animation기능을 사용했다. fadeInDown은 animation의 속성중 하나로, 이름처럼 나타나면서 아래쪽으로 이동하는 기능이다. 내려오는 시작점을 -50%으로 지정해서 바로 위에서 내려오게 구현하였다.
.fade-out-box {
    display: inline-block;
    animation: fadeInDown 1s, fadeout 1s;
    -moz-animation: fadeInDown 1s, fadeout 1s; /* Firefox */
    -webkit-animation: fadeInDown 1s, fadeout 1s; /* Safari and Chrome */
    -o-animation: fadeInDown 1s, fadeout 1s; /* Opera */
    animation-fill-mode: forwards; /*animation이 실행되고 마지막 상태를 유지함*/
    /* padding: 20px; */
    font-size: 75px;
    position:absolute;
    color:black;
    align-items: center;
    margin-top: 20px;
    font-family: 'DOSGothic';
}

fadeInDown이 실행되면 fadeOut 기능을 통해, welcome이 사라지게 구현했다.
fadeInDown은 완전히 실행되는데까지 1초가 걸리게 만들었고, fadeOut도 1초가 걸리게 설정 했다.
그리고 Firefox, Safari, Chrome, Opera모두에서 작동되게 구현하였다.

@keyframes fadeout {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
@-moz-keyframes fadeout { /* Firefox */
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
@-webkit-keyframes fadeout { /* Safari and Chrome */
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}
@-o-keyframes fadeout { /* Opera */
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

fadeOut이기때문에 opacity를 1에서 0으로 설정해서 사라지는 효과로 주었다.

.fade-in-box {
    display: inline-block;
    animation: fadeIn 2s;
    -moz-animation: fadein 2s; /* Firefox */
    -webkit-animation: fadein 2s; /* Safari and Chrome */
    -o-animation: fadein 2s; /* Opera */
    animation-fill-mode: backwards;
    animation-delay: 1s;  
    position:absolute;
    font-size:75px;
    color:black;
    margin-top: 20px;
    font-family: 'DOSGothic';
}

fadeIn과 fadeOut의 position을 absolute로 주어 welcome과 i'm inho가 같은 위치에 올수 있도록 했다.
animation-delaty를 1s로 주어서 1초가 지나면 fadeIn이 실행되도록 해서 fadeOut이 끝나면 fadeIn이 실행된다.

@keyframes fadein {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-moz-keyframes fadein { /* Firefox */
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-webkit-keyframes fadein { /* Safari and Chrome */
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@-o-keyframes fadein { /* Opera */
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

fadeIn은 fadeOut과 반대로 opacity를 설정했다.

profile
경제학과를 졸업후 개발에 뛰어든 햇병아리입니다.

0개의 댓글