KokoaTalk Clone Coding: splash screen(animation)
splash screen html css 작성
friends screen이 나타나기 전에 애니메이션으로 1초간 나타나고 사라지면서 friends screen이 나타남
→ friends screen과 다른 레이어를 구성해서 friends screen 위에 화면이 나타나고 사라짐
splash-screen을 script 전, 마지막 부분에 작성
position: absolute; 로 작성하면 앞서 작성한 friends.html과 다른 레이어로 작성됨
position: relative; 작성 없이 body를 기준으로 정렬되도록 함
높이와 너비를 100으로 작성해 모든 화면에 100% 로 차지하도록 함
icon을 가운데 위치하게하고, 크기 조정
이제 위에서 만든 레이어를 사라지게 만들면서 friends screen이 나타나게 animation을 생성
간단한 animation을 작성
문제: 1초가 지나면 animation이 끝나고 원래대로 돌아옴
animation에 forwards를 작성하여 animation이 끝나고 마지막 keyframes 내용(opacity: 0;)이 기억되도록 함
문제: 투명도는 0이 되었지만, 레이어는 그대로 남아있는 상태이기 때문에, 아래의 레이어 내용이 클릭이 되지 않음
아래의 레이어를 클릭할 수 있도록 하려면,
keyframes에 visibility: hidden; 작성으로 animation이 끝나면 브라우저가 해당 레이어를 무시하도록 함
splash screen을 더 오래 보이도록 하려면, animation의 시간을 조정해서 오래 보이도록 하는 것보다,
animation이 진행되는 시간을 지연(작동되기 전까지의 시간을 만듦)시키는 게 로딩되는 것 처럼 보이게 함
완성