CSSでアヒルを移動しましょうか?

9178 ワード
TIL テキストリンク

学習内容

이번 시간에는 CSS animation을 적용한 화면을 페이지 로딩 때 띄우는 것에 대해서 공부해보았다.

ページのロード

먼저 페이지 로딩 때 준비한 화면이 출현했다가 사라지는 방법에 대해서 알아보자.
<body>
<div class='wrapper'>
    <div><img class="bird" src="/static/image/yellow_bird.png" alt="yellow-bird"></div>
</div>

<div class="main-content"></div>
<script>
    let wrapper = document.querySelector('.wrapper')
    window.addEventListener('load', function() {
        wrapper.parentElement.removeChild(wrapper);
    })
</script>
</body>
핵심은 wrapper로 지정한 <div>...</div> 태그가 화면이 load되면 해당 태그를 감춤으로써 페이지 로딩
시 화면이 없어지는 방식이다. <script>...</script> 내부에 있는 코드를 보면 창이 load 됐을 때 클래
스 wrapper가 자식 요소를 지움으로써 로딩창이 없어지게 된다.

클래스 main-content라는 영역에는 css에 용량이 큰 이미지를 삽입해서 loading 화면이 나타나는데 까지
시간이 걸리게 설정해주었다. 
.main-content{
    width: 100%;
    height: 100vh;
    background: url("https://source.unsplash.com/random/4000x4000") center no-repeat;
    background-size: cover;
}

アニメーション(Animation)

메인화면으로 들어가기 전 사용자가 화면에 대기하고 있는 시간 때 좋지 않은 인상을 줄 수 있기 때문에 동적
으로 웹 화면을 구성하기 위해 애니메이션에 대해 알아보게 되었다.

먼저 애니메이션을 적용할 대상은 <img>...</img> 부분이다. 애니메이션을 적용하는 방법은 아래 코드와 같
다.

우선 애니메이션을 적용할 대상의 요소를 선택자 태그로 우선 지정해서 (이름, 적용할 애니메이션의 지속시간,
애니메이션의 반복 횟수, 적용 할 애니메이션의 빠르기 지정)을 설정해주었다. 
.bird {
    animation-name: bird;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    transition-timing-function: linear;
}
아래 코드의 경우 만들면서 한가지 재미있는 사실을 발견할 수 있었는데 translateY(value) 안에 들어가
는 값이 함수 좌표계에서 y축의 값에 해당한다. (0,0) 원점이 있으면 30px 위인 (0, 30px) 지점에서 애
니메이션이 시작하는 것이다.

따라서 끊기지 않는 애니메이션을 만들기 위해선 from에서 애니메이션이 시작하는 좌표와 to에서 애니메이
션이 끝나는 좌표가 동일해야지 중간에 끊기지 않고 smooth한 애니메이션을 만들 수가 있다.
@keyframes bird {
    from {
        transform: translateY(30px);
    }
    25% {
        transform: translateY(-15px);
    }
    50% {
        transform: translateY(15px);
    }
    75% {
        transform: translateY(-15px);
    }
    to {
        transform: translateY(30px);
    }
}
gif로 변환한 이미지여서 보기 그렇지만 병아리가 물에 둥둥 떠있는 것 같은 인상을 준다. 애니
메이션의 연속성을 위해 from과 to의 시작 위치를 맞추는 것은 중요하다~! TIL 모달창과 겹치는
부분이 있지만 애니메이션 부분을 공부해서 덧붙이니 오늘도 하나 배우고 남긴다.
[TIL]201021 Database - mySQL
【メモ】文中の単語の逆順出力