먼저 구글링으로 여러 사람들이 만든 자기소개 페이지와 wecode윗 기수 선배님들의 자기소개 페이지를 찾아보았다. 그중 참고 할 만한 페이지들을 선별해서 넣을 기능과 페이지 디자인을 구상하면서 페이지 제작을 시작했다.
우선 페이지를 두페이지로 제작하기로 구상했다.
첫번째 페이지는 애니메이션효과를 주어 처음 페이지에 들어가는 느낌으로 만들었다.
페이지에 접속하면 welcome이라는 텍스트가 위에서 아래로 내려오면서 점점사라지고 내 소개를 하는 텍스트가 빠르게 나타난다.
그리고 사진을 클릭하면 진짜 내 자기소개 페이지로 접속되게 구현하였다.
<div class="fade-out-box">
Welcome!
</div>
<div class="fade-in-box">
I'm Inho
</div>
.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를 설정했다.