[클론코딩/코코아톡] 노마드 코더 코코아톡 클론코딩 #8 Splash Screen, Animations, No Mobile

Splash Screen - 화면 생성

- splash screen 생성.

(friends.html)

    <!-- Splash Screen -->
    <div id="splash-screen">
        <i class="fas fa-comment"></i>
    </div>

(friends.css)

...

#splash-screen {
    background-color: var(--yellow);
    position: absolute;
    height: 100vh;
    width: 100vw;
    top : 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 132px;
}

 

Splash Screen - 애니메이션 추가

- SplashScreen 사라지도록 애니메이션 추가.

 

- forwards : 마지막 속성 값을 애니메이션이 끝나고 유지함.

  → opacity : 0으로 남아있음.

  → 클릭을 해도 실행되지 않음,

 

 

- visibility: hidden;

  : 마우스에 걸리지 않게 빠지는 것.

    html을 숨기거나 없애려면 javaScript을 사용해야 함.

 

(friends.css)

...

@keyframes hideSplashScreen {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
        visibility: hidden;
    }
}

#splash-screen {
    background-color: var(--yellow);
    position: absolute;
    height: 100vh;
    width: 100vw;
    top : 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 132px;
    animation: hideSplashScreen 0.4s ease-in-out forwards;
    animation-delay: 1s;
}

 

Navigation Animation - badge에 애니메이션 추가

- nav-bar의 badge 회전 애니메이션 추가.

(nav-bar.css)

...
@keyframes notificationAnimation {
    0% {
        transform: none;
    }
    50% {
        transform: translateY(-5px) rotateY(180deg);
    }
    100% {
        transform: none;
    }
}

.nav__notification {
    position: absolute;
    left: 20px;
    bottom: 15px;
    animation: notificationAnimation 2s ease-in-out infinite;
}

 

Navigation Animation - nav-bar 아이콘에 애니메이션 추가

- nav-bar에 있는 아이콘 하나씩 올라오도록 애니메이션 추가

(nav-bar.css)

...

@keyframes appearBtnAnimation {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.nav__btn {
    transform: translateY(50px);
    opacity: 0;
    animation: appearBtnAnimation 1s ease-in-out forwards;
}

.nav__btn:nth-child(2) {
    animation-delay: 0.2s;
}

.nav__btn:nth-child(3) {
    animation-delay: 0.5s;
}
.nav__btn:last-child {
    animation-delay: 0.8s;
}

 

Gear Animation - header의 gear아이콘 애니메이션 추가

- header의 gear 아이콘 위에  마우스가 올라갈 경우, 아이콘 회전하도록 애니메이션  추가.

...

@keyframes rotateGear {
    from {
        transform: none;
    }
    to {
        transform: rotateZ(360deg);
    }
}

.screen-header__icons .fa-gear:hover {
    animation: rotateGear 3s ease-in-out infinite;
}

 

Heart Animation - open-post의 heart 아이콘 애니메이션 추가

- open-post의 하드 개수 표시 위에 마우스 올라갈 경우, heart 아이콘이 뛰도록 애니메이션 추가.

 

- will-change : 브라우저에게 무엇이 바뀔지 알려줌. 애니메이션이 좀 더 괜찮아짐.

  아래의 경우 heart 아이콘이 흔들리는 경우를 없애줌.

...

@keyframes heartBeat {
    0% {
        color: white;
        transform: none;
    }
    50% {
        color: tomato;
        transform: scale(1.3);
    }
    100% {
        color: white;
        transform: none;
    }
}
.open-post__heart-count:hover i {
    will-change: transform;
    animation: heartBeat 1s linear infinite;
}

 

Chats Screen Animation - fadeIn

- 채팅창 애니메이션 추가.

...

@keyframes fadeIn {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: none;
        opacity: 1;
    }
}

.main-chat {
    margin-top: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    animation: fadeIn 0.8s linear;
}

 

No Moblie Media Query

- 지정한 크기보다 크면 화면 안보이도록 설정. 

(모든 .html 파일)

    <!-- No Mobile Media Query -->
    <div id="no-mobile">
        <span>Your Screen is too big</span>
    </div>

(no-moblie.css)

#no-mobile  {
    position: absolute;
    z-index: 99;
    height: 100vh;
    width: 100vw;
    background-color: var(--yellow);
    display: flex;
    top: 0;
    justify-content: center;
    align-items: center;
    font-size: 32px;
    font-weight: 600;
}

@media screen and (max-width:645px) {
    #no-mobile {
        display: none;
    }
}