3. 프로젝트 똥파리 - 에셋 적용하기

티스토리 뷰

Projects/똥파리

3. 프로젝트 똥파리 - 에셋 적용하기

고기상추밥 2019. 12. 4. 01:32

서론

저번시간에 작업해둔 이미지 스프라이트를 HTML에 불러와서 CSS 애니메이션을 적용해보겠습니다.

HTML 구조 잡기

적절한 폴더에다가 index.html 파일을 생성해준뒤

HTML 기본 구조를 잡아 줍니다.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="control">
      <div class="bee"></div>
    </div>
  </body>
</html>

body 태그안에 div 엘리멘트를 생성해준뒤 .control 클래스 값을 줬습니다.

그리고 그안에 div 일리멘트와 .bee 클래스값을 줬습니다.

.controll 엘리멘트에다가 포지션 fixed를 줘서 .bee를 조종 해주기 위해서

구조를 이렇게 잡았습니다.

CSS 적용하기

.control {
  position: fixed;
  top: 0;
  left: 0;
  width: 100px;  
  z-index: 999;
  pointer-events: none;
}

가장위에 보이게하기위해서 z-index:999로 잡아줍니다.

bee가 날라다니다가 마우스클릭을 방해할수도 있으니까 pointer-events:none; 으로 클릭방지 해줍니다.

width 100px로 잡아주고 position fixed로 정해줍니다.

이렇게하면 top 과 left 프로퍼티를 조정해주면 .bee가 화면 원하는곳에 날라다니겠죠?


.bee {
  max-width: 100px;
  position: relative;
}

.bee::after {
  content: "";
  position: absolute;
  width: 100%;
  padding-top: 84%;
  background-image: url("bee.png");
  background-repeat: no-repeat;
  background-size: 200%;
  animation: flying 0.2s steps(2) infinite;
}

부모 엘리멘트의 높이에 따라 변하게 하기위해서 width 100% 줍니다.

이미지의 비율에 따라서 패딩값을 84%로 줬습니다.

이미지 배경을 정해주고

크기는 2개의 이미지를 사용중이므로 200%

animation은 steps()을 사용해줬습니다.

@keyframes flying {
  to {
    background-position: 200%;
  }
}

키프레임은 백그라운드-포지션 200%으로 잡아주면

steps()에 따라서 알아서 변화합니다

모든것이 적용 됬을때 모습입니다.

저작자표시 비영리 변경금지

'Projects > 똥파리' 카테고리의 다른 글

5. 프로젝트 똥파리 - 자동재생 적용하기 (0)	2019.12.06
4. 프로젝트 똥파리 - 똥파리 날라다니게 하기 (0)	2019.12.05
2. 프로젝트 똥파리 - 에셋 구하기 (0)	2019.12.02
1. 프로젝트 똥파리 - 소개글 (0)	2019.12.01

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2025/01 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

글 보관함

Select

티스토리 뷰