• [CSS 3D] 인터랙티브 웹 효과 구현하기 (1)

    2019. 8. 5.

    by. 나나 (nykim)

    320x100

    + 이 글의 내용은 인프런의 [인터랙티브 웹 개발 제대로 시작하기] 강좌의 '종합예제' 부분 내용을 담고 있습니다.

     

     

    1. 3D 공간 작성하기

     

    가장 먼저 3D 공간을 작성합니다. 양옆에는 벽이 있고, 정면에 벽이 세 개 있는 구조입니다.

    마크업은 world > stage > house 구조로 이루어져있습니다.

     

    <div class="world">
      <div class="stage">
        <div class="house">
          <div class="house__wall house__wall--left"></div>
          <div class="house__wall house__wall--right"></div>
          <div class="house__wall house__wall--front house__wall--front-a">
            <div class="house__contents">
              <h2 class="house__contents-title">
                Hello!
              </h2>
            </div>
          </div>
          <div class="house__wall house__wall--front house__wall--front-b">
            <div class="house__contents">
              <h2 class="house__contents-title">
                Bonjour!
              </h2>
            </div>
          </div>
          <div class="house__wall house__wall--front house__wall--front-c">
            <div class="house__contents">
              <h2 class="house__contents-title">
                Namaste!
              </h2>
            </div>
          </div>
          <div class="house__wall house__wall--front house__wall--front-d">
            <div class="house__contents">
              <h2 class="house__contents-title">
                안녕하세요!
              </h2>
            </div>
          </div>
        </div>
      </div>
    </div>

     

    다음은 CSS 차례입니다.

    일단 윈도 화면을 다 덮을 거니까 html에게 height:100%를 줍니다.

     

    html {
      height: 100%;
    }
    
    body {
      margin: 0;
      padding: 0;
      min-height: 100%;
      background: #49b293;
      -webkit-overflow-scrolling: touch;
    }

     

    그리고 3D를 구현할 수 있도록, .world에다 perspective: 1000px 속성을 줍니다.

    이때, position:fixed; width: 100vw; height:100vh; 로 항상 꽉찬 상태로 보이게끔 합니다.

     

    .world {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      perspective: 1000px;
    }

     

    그 다음은 .stage 차례입니다.

    .world가 3D 공간 전체에 해당한다면, .stage는 .house와 앞으로 추가될 캐릭터들이 놓이는 곳입니다.

     

    .stage {
      position: absolute;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      transform-style: preserve-3d; //IE 지원하지 않음
    }

     

    이 .stage는 absolute로 띄워준 다음 화면 전체에 꽉차도록 했습니다.

    그리고 transform-style:preserve-3d속성을 줘서 3D 효과가 자신을 통과하도록 했죠.

    참고로 이 속성은 IE에서 먹히지 않지만, IE 따위 이제 무시해야하지 않을까요? (쑻)

     

     

     


     

    2. house 만들기

     

    다음은 .house 차례입니다.

    얘도 마찬가지로 전체 크기를 갖게 하고, preserve-3d를 줍니다.

    .house {
      position: relative;
      width: 100vw;
      height: 100vh;
      transform-style: preserve-3d;
    }

     

    이제는 .house__wall 입니다. 얘들은 정면에서 주르륵 설 건데요, 마찬가지로 화면에 꽉 찬 크기를 갖습니다.

    움직이게 하려면 absolute 속성을 줘야겠죠? 배경색도 하얗게 칠해줍니다.

     

    작성하는 김에 .house__contents도 살짝 정리해줄게요.

     &__wall {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.8);
    }
    
    &__contents {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        color: #333;
        font-size: 5em;
    }

     

    그럼 위와 같이 벽들이 굉장히 부담스럽게 붙어있을 텐데요 허허

    이걸 좀 떨어져서 바라봐야겠습니다.

    그걸 위해 .house에게 transform: translateZ(-500vw)를 줍니다.

     

    짠! 벽들이 멀어졌어요!

     

    다음은 각각의 벽을 스타일링합니다.

    먼저 왼쪽 벽입니다.

    왼쪽과 오른쪽의 두 벽은 길게 보여야하기 때문에, width:1000vw; 로 길게 만들어줍니다.

     

     

    이 벽이 왼쪽에서 / <- 이 형태로 보여지게끔 Y축을 기준으로 회전시킵니다.

     

    ...엥?

     

    근데... 회전시켜보니 이따구(?)로 되어있어요.

    그 이유는 크기가 1000vw이니, 회전축이 다른 house__wall 과 달랐기 때문이죠.

     

    중앙점이 저어어어쪽이라 이렇게 돌아갑니다

     

    그럼 어떻게 해야할까요?

    저 왼쪽벽의 중앙점을 바꿔버리면 되지 않을까요?

    크기가 1000vw이니 그 절반의 500vw만큼 왼쪽으로 땡겨주는 거죠!

     

    &--left {
          left: -500vw;
    }

     

    크기의 절반만큼 땡겨요(?)

     

    짠!

     

    또는 transform: translasteZ(-500vw) 해도 똑같은 결과를 얻을 수 있습니다 :-)

    기억하세요, 크기의 절반!

     

    &--left {
      width: 1000vw;
      transform: rotateY(90deg) translateZ(-500vw);
      background: #f8f8f8;
    }

     

    오른쪽 벽도 왼쪽 벽과 비슷하게 만들어줍니다.

     

    &--right {
      width: 1000vw;
      transform: rotateY(90deg) translateZ(-400vw);
      background: #f8f8f8;
    }

     

    엇, 그런데 왜 얘는 -400vw일까요?

    왜냐면 -500vw만큼 땡기면, 왼쪽 벽과 똑같은 모습이 될 테니까요.

    얘는 오른쪽에 서야하니, 중앙벽 크기(100vw)만큼 덜 땡겨준 것입니다.

     

     

    이제 .house__wall-front도 각각의 Z축 값을 지정해줍니다.

     

    &--front {
      &-a {
        transform: translateZ(450vw);
      }
    
      &-b {
        transform: translateZ(250vw);
      }
    
      &-c {
        transform: translateZ(-100vw);
      }
    
      &-d {
        transform: translateZ(-450vw);
      }
    }

     

     


     

    3. 스크롤로 Z축 움직이기

     

    다음은 스크롤로 house의 Z축을 움직여보겠습니다.

    스크립트 파일을 작성해보죠! 충돌을 피하기 위해 즉시실행함수로 작성합니다.

     

    (function () {
      const houseElem = document.querySelector('.house');
    
      function scrollHandler() {}
    
      window.addEventListener('scroll', scrollHandler);
    })()

     

    앗, 그런데 잠깐!

    지금 상태에서는 스크롤을 할 수가 없어요. .world가 position:fixed; 상태라 body에 높이값이 없거든요.

    저희가 셀프로 임의의 높이값을 넣어줍니다.

     

    body {
      margin: 0;
      padding: 0;
      min-height: 100%;
      height: 5000px; //스크롤 가능케 처리
      background: #49b293;
      -webkit-overflow-scrolling: touch;
    }

     

    자, 현재 .house가 transform: translateZ(-500vw); 상태입니다.

    이제 이 벽들이 다가와야할 텐데요, 그러려면 Z값이 -500에서 점점 양수가 되게끔하면 될 거에요.

     

    이제 우리에게 필요한 값은 무엇일까요?

     

    예를 들어, 지금 전체 스크롤 높이가 대충... 3000이라고 합시다.

    우리가 스크롤을 쭉 내려서 스크롤값이 2000이 됐습니다.

    그럼 2000/3000=0.66만큼 스크롤한 게 됩니다.

    이 값은 너무 작으니 1000 정도 곱하면, 660이 나옵니다.

    즉, 최소 100부터 최대 1000까지의 값이 나오게 됩니다.

     

    어, 그럼 이 값을 Z값으로 쓰면 되지 않을까요?

    스크롤한값/전체스크롤*1000이란 수식이요!

     

     

    좋아요! 그럼 스크롤한 값을 찾아내보죠!

    우선 scrollHandler() 함수 안에다 콘솔로그를 작성합니다.

     

    console.log(this.pageYOffset);

     

    pageYOffset 값을 찍어보고 스크롤해볼게요.

     

    음.. 보니까 스크롤이 제일 위에 있으면 0, 아래로 내릴 수록 값이 늘어나네요.

    그런데 이 pageYOffset 값은 문서 전체의 높이인 5000이 되지 못합니다.

    스크롤바의 상단 부분이 닿는 지점 = pageYOffset이라고 생각하면 됩니다.

     

    그럼 '스크롤한값/전체스크롤*1000' 중에서 스크롤한값은 곧 this.pageYOffset이 됩니다.

    전체스크롤 <- 이 값은 어떻게 구할까요? body의 높이는 아니죠. pageYOffset이 5000만큼 스크롤되지 못하니까요.

    음... 그러면 결국, pageYOffset의 최대값을 구하면 되지 않을까요?

     

    현재 body의 높이는 5000입니다.

    하지만 pageYOffset의 최대값은 이보다 작고, 그 값도 윈도 높이에 따라 달라집니다.

    지금 윈도 높이가 500이라고 하면, pageYOffset의 최대값은 얼마가 될까요?

    콘솔에 찍어봤더니... 바로 4500이 됩니다. 5000에서 500을 뺀 값이죠!

    윈도높이가 950이면? 5000-950=4050이 됩니다.

     

    '스크롤한값/전체스크롤*1000' 중에서 전체스크롤은 (body높이 - window높이) 가 되겠네요!! (뜨든)

    전체스크롤 <- 이 값을 maxScrollValue란 변수 안에 저장하겠습니다.

     

    const maxScrollValue = document.body.offsetHeight - this.window.innerHeight;

     

    (this.pageYOffset / maxScrollValue) * 1000을 하면 되겠네요!

    그런 다음 style.transform을 이용해 이 값만큼 Z축을 이동시킵니다.

     

    function scrollHandler() {
      let maxScrollValue = document.body.offsetHeight - this.window.innerHeight;
      const zMove = (this.pageYOffset / maxScrollValue) * 1000;
      houseElem.style.transform = 'translateZ(' + zMove + 'vw)';
    }

     

    그런 다음 스크롤 해보면...

    오!!! 뭔가 움직여요!!!

    움직이는데...!! 이상하네요. ⊙△⊙

    스크롤하자마자 시점이 뿅하고 움직이거든요;;

     

    사실 당연합니다.

    원래 .house의 Z축은 얼마였죠? -500vw입니다.

    그런데 저희가 만든 zMove의 값은 최소 0부터 최대 1000이 됩니다.

    그래서 스크롤하자마자 Z축이 0으로 이동하면서 어색해지는 거죠.

     

    방법은? -500부터 시작하도록 500을 빼주면 되죠!

     

    const zMove = (this.pageYOffset / maxScrollValue) * 1000 - 500;

     

    그럼 -500~500의 zMove 값에 따라 화면이 움직입니다.

    그런데 최대값이 500이 되니까 마지막 화면이 너무 가깝게 붙네요.

    이럴 때는 1000보다 작은 값을 곱하면 될 거 같습니다. 한 950 정도 줘보면, -500~450의 수치를 갖게 됩니다.

     

    const zMove = (this.pageYOffset / maxScrollValue) * 950 - 500;

     

    결국 코드는 요로콤 됩니다.

     

    function scrollHandler() {
      let maxScrollValue;
      const zMove = (this.pageYOffset / maxScrollValue) * 950 - 500;
      houseElem.style.transform = 'translateZ(' + zMove + 'vw)';
    }

     

     

    아, 한 가지 더 추가할 게 있어요.

    바로 reszie 시의 처리입니다.

    window.resize가 되면 zMove값이 바뀌어버릴 테니까요.

     

    maxScrollValue는 밖으로 빼주고, resize에 대한 이벤트 리스너도 작성합니다.

     

    let maxScrollValue;
    
    function resizeHandler() {
      maxScrollValue = document.body.offsetHeight - this.window.innerHeight;
    }
    
    window.addEventListener('resize', resizeHandler);

     

    그럼 최초 로드 시 maxScrollValue값이 없을 텐데요,

    방법은 간단합니다. 최초 로드 시에도 resizeHanlder()를 호출해주세요 :>

     

    let maxScrollValue;
    
    function scrollHandler() {
      const scrollPer = (this.pageYOffset / maxScrollValue);
      const zMove = scrollPer * 950 - 500;
      houseElem.style.transform = 'translateZ(' + zMove + 'vw)';
    }
    
    function resizeHandler() {
      maxScrollValue = document.body.offsetHeight - this.window.innerHeight;
    }
    
    window.addEventListener('scroll', scrollHandler);
    window.addEventListener('resize', resizeHandler);
    resizeHandler();

     

     


     

     

    4. 진행바 움직이기

     

    이제 상단에 진행바를 만들어볼게요!

    스크롤 정도에 따라 이 바의 길이가 늘어났다 줄어들었다 하게끔 만들어봅시다.

     

    우선 마크업!!

     

    <div class="progress">
      <div class="progress__bar"></div>
    </div>

     

    참 쉽죠?

    이어서 CSS!!

     

    .progress {
      z-index: 100;
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 5px;
      background: #555;
    
      &__bar {
        width: 0%;
        height: 100%;
        background: #00afff;
      }
    }

     

    다음은 스크립트 차례입니다.

    현재 window가 scroll 되었을 때 이벤트리스너가 하나 걸려있죠.

    scrollHandler() <- 요 안에다가 작성해주면 되겠습니다.

     

    자! 이제 우리가 할 일은 JS로 저 &__bar의 width값을 조정하는 것입니다.

    50%만큼 스크롤하면 width:50%이 되면 되죠.

    그럼 저 50%만큼 스크롤했는지는 어떻게 아냐구요?

     

    우리가 아까 썼던 코드를 떠올려보세요.

    (스크롤한값/전체스크롤값)*100이 되겠죠?

    그리고 그건 (this.pageYOffset / maxScrollValue) * 100이고요!

     

    앗, 이 값은 아까 구했던 거네요.

    아묻따 변수에 넣어줍니다.

     

    const scrollPer = (this.pageYOffset / maxScrollValue);
    barElem.style.width = scrollPer * 100 + "%";

     

    그리고 기존 코드 중에서 겹치는 부분은 변수로 대체해줍니다.

    코드는 이렇게 정리되겠네요.

     

    let maxScrollValue;
    
    function scrollHandler() {
      const scrollPer = (this.pageYOffset / maxScrollValue);
      const zMove = scrollPer * 950 - 500;
      houseElem.style.transform = 'translateZ(' + zMove + 'vw)';
      barElem.style.width = scrollPer * 100 + "%";
    }

     

     


     

     

     

    5. 마우스 움직임에 따라 시점 변경하기

     

     

    다음은 마우스 위치에 따라 화면의 시점을 변경해봅시다.

     

    첫 번째로 mousemoveHandler를 만들어주세요.

    인자로 이벤트 객체를 넘겨받고, e.clientX와 e.clientY를 콘솔에 찍어봅시다.

     

    function mousemoveHandler(e) {
      console.log(e.clientX, e.clientY);
    }
    
    window.addEventListener('mousemove', mousemoveHandler);

     

    콘솔에 찍히는 값을 확인해보세요.

    왼쪽 상단은 '0, 0'이고,  오른쪽 하단은 'window 너비, window 높이'가 됩니다.

     

    이걸 어떻게 활용하냐구요? .stage를 회전할 때 필요한 값입니다.

    음... 감이 잘 안 오니까 .stage를 직접 transform:rotate() 시켜보겠습니다.

     

    .stage {transform: rotateX(20deg);}

     

    rotateX(20deg)

     

     

    오!! 뭔가 아래에서 위를 쳐다보는 듯한 느낌이 됐습니다.

    이번에는 음수값을 줘볼까요?

     

     

    rotateX(-20deg)

     

    위에서 아래를 쳐다보는 듯한 느낌이 됐습니다.

    rotateY도 적용해보겠습니다.

     

     

    rotateY(20deg)

     

    rotateY(-20deg)

     

    그런데 우리는 이렇게까지 극적인 효과를 줄 필요는 없습니다.

    -10~10 정도의 값만 주면 될 것 같아요. 그보다 작아도 되겠네요.

     

    그럼 e.clientX, e.clientY값을 가지고 어떻게 그 목표값을 도출해낼 수 있을까요?

     

     

    여기에 너비 100 짜리 window가 있습니다.

    마우스를 왼쪽 끝으로 가져다대면 e.clientX는 0이겠죠?

    정가운데 있으면 너비의 절반인 50이 되고, 오른쪽 끝에 있으면 너비 전체인 100이 될 것입니다.

     

     

    그 아래에는 우리에게 필요한 목표값을 적어봤습니다.

    -10~10 정도라 했는데 이건 너무 값이 크니 -1~1로 줄여서 생각해봅시다.

     

    왜 왼쪽이 음수값이냐- 하면, 아까 임의로 rotateX(-20deg)를 줬을 때를 생각해보세요.

    마치 왼쪽에서 바라보고 있는 듯한 느낌이 들었죠?

    양수인 rotateX(20deg)를 줬을 때는 오른쪽에서 바라보는 느낌이 들었고요.

    우리는 마우스가 위치한 지점에서 바라보고 있는 듯한 느낌을 줘야하기 때문에 -1, 0, 1의 값이 필요합니다.

    가운데가 0인 이유는? 마우스가 가운데 있을 때는 화면이 가만히 있어야 하니까요ㅎ_ㅎ

     

     

    어떤 수식을 써야할지 막막한데...@.@

    우선은 비율을 계산해봅시다.

     

    먼저, 마우스가 정가운데 있을 때 상황입니다.

    e.clientX / window.innerWidth 를 하면, 50 / 100 = 0.5 가 나옵니다.

    여기에다 100을 곱하면 50%라는 비율이 나오겠죠?

    그런데 100 대신 2를 곱해봅시다. 그럼 정수인 1이란 값이 나옵니다.

     

    이번엔 가장 왼쪽에 있을 때입니다.

    (e.clientX / window.innerWidth * 2) = (0 / 500 * 2) = 0 이네요.

     

    가장 오른쪽이라면?

    e.clientX / window.innerWidth * 2) = (500 / 500 * 2) = 2 입니다.

     

    결국 0, 1, 2라는 값이 나오네요.

    어라? 저희가 찾던 -1, 0, 1과 거의 근접해있지 않나요?

    저 값들에서 딱 1만 빼주면 되잖아요?!

     

    그래서 수식은

    (e.clientX / window.innerWidth * 2) - 1이 되겠습니다 :>

     

    한번 코드에 넣어 실험해봅시다!

     

    function mousemoveHandler(e) {
      const x = (e.clientX / window.innerWidth * 2) - 1;
      stageElem.style.transform = 'rotateY(' + x * 10 + 'deg)';
    }
    
    window.addEventListener('mousemove', mousemoveHandler);

     

    크으, 잘 돌아가네요~

    이어서 X축도 작성해보겠습니다.

     

    우선 감을 잡기 위해 임의로 rotateY를 시켜볼게요.

     

    rotateX(20deg) & rotateX(-20deg)

     

    그럼 우리가 구해야할 값이 명확해지네요.

    위에서부터 순서대로 1, 0, -1 이 됩니다.

     

     

    아까의 수식을 응용해서 (e.clientY / window.innerHeight)*2

    마우스가 맨 위라면 (0/100)*2 = 0,

    마우스가 가운데라면 (50/100)*2 = 1,

    마우스가 맨 아래라면 (100/100)* = 2,

    라는 값이 나오네요

     

    [0, 1, 2]를 [1,0,-1]로 만드려면?

    1에서 그 값을 빼주면 됩니다.

    1 - 0 = 1

    1 - 1 = 0

    1 - 2 = -1

    이 나오게 되죠!

     

    그래서 수식은 1 - (e.clientY / window.innerHeight * 2)가 됩니다.

     

    function mousemoveHandler(e) {
      const y = 1 - (e.clientX / window.innerHeight * 2);
      stageElem.style.transform = 'rotateX(' + y * 10 + 'deg)';
    }
    
    window.addEventListener('mousemove', mousemoveHandler);

     

    이제 코드를 좀 더 다듬어 보겠습니다.

    x축과 y축이 동시에 움직이게 해보죠!

     

    const mousePos = { x: 0, y: 0 };
    
    function mousemoveHandler(e) {
      mousePos.x = -1 + (e.clientX / window.innerWidth * 2);
      mousePos.y = 1 - (e.clientY / window.innerHeight * 2);
      stageElem.style.transform = 'rotateY(' + (mousePos.x * 5) + 'deg) rotateX(' + (mousePos.y * 5) + 'deg)';
    }

     

    마우스를 움직이면 각도가 쓱쓱 바뀌는 걸 볼 수 있습니다 :D

     

     


     

    6. 캐릭터 구현하기

     

     

    다음은 클릭할 때마다 캐릭터가 뿅뿅 튀어나오게 할 차례입니다.

    물론 이건 JS로 처리할 거지만, 우선 확인을 위해 html 상에 마크업을 해줍니다.

     

    캐릭터는 크게 '머리 + 몸 + 오른팔 + 왼팔 + 오른다리 + 왼다리'의 6개로 이루어져 있습니다.

    그리고 그 부위(?) 안에는 앞면과 뒷면이 존재하죠.

    구조를 나타내면 이렇게 됩니다.

     

    character   > head        > front + back
                > torso       > front + back
                > arm-right   > front + back
                > arm-left	  > front + back
                > leg-right   > front + back
                > leg-left    > front + back

     

    위 구조를 기반으로 .head를 마크업하면 아래와 같습니다.

     

    <div class="char__con char__head">
      <div class="char__face char__head-face face-front"></div>
      <div class="char__face char__head-face face-back"></div>
    </div>

     

    그럼 나머지 부위ㅋㅋㅋㅋ들도 이런 식으로 작성하면 되겠습니다.

     

    <div class="char">
      <div class="char__con char__head">
        <div class="char__face char__head-face face-front"></div>
        <div class="char__face char__head-face face-back"></div>
      </div>
      <div class="char__con char__torso">
        <div class="char__face char__torso-face face-front"></div>
        <div class="char__face char__torso-face face-back"></div>
      </div>
      <div class="char__con char__arm char__armRight">
        <div class="char__face char__arm-face face-front"></div>
        <div class="char__face char__arm-face face-back"></div>
      </div>
      <div class="char__con char__arm char__armLeft">
        <div class="char__face char__arm-face face-front"></div>
        <div class="char__face char__arm-face face-back"></div>
      </div>
      <div class="char__con char__leg char__legRight">
        <div class="char__face char__leg-face face-front"></div>
        <div class="char__face char__leg-face face-back"></div>
      </div>
      <div class="char__con char__leg char__legLeft">
        <div class="char__face char__leg-face face-front"></div>
        <div class="char__face char__leg-face face-back"></div>
      </div>
    </div>

     

    CSS는 어떻게 작성하면 될까요?

    우선 전체를 감싸고 있는 .char을 스타일링 해보죠!

     

    .char {
      position: absolute;
      left: 12%;
      bottom: 5%;
      width: 10vw;
      height: 15.58vw;
      transform-style: preserve-3d;
    }

     

    화면상에서 자유롭게 움직여야하니 absolute 속성을 주었고,

    초기 위치는 left:12%; bottom:5%;입니다.

     

    한편 크기값은 width:10vw; height:15.58vw;인데요. 이건 곧 '1 : 1.558' 비율임을 뜻합니다.

    예를 들어 캐릭터 이미지 전체의 크기가 1000px * 1558px 이라면 이게 1:1.558이 됩니다.

    이렇게 크기값을 vw로 준 이유는 창 크기에 따라 유동적으로 캐릭터 크기가 바뀌게 하기 위함입니다.

     

    또, 상위 엘리먼트에 적용된 3d 효과가 자신을 잘 통과할 수 있도록 preserve-3d 속성도 줍니다.

     

    .char[data-direction='forward'] {}
    .char[data-direction='backward'] {}
    .char[data-direction='left'] {}
    .char[data-direction='right'] {}

     

    위 속성들은 캐릭터 방향에 따라 캐릭터를 회전시키는 데 사용할 예정입니다.

    data- 속성을 활용할 거니까, JS랑 짝짜꿍해서 처리하면 되겠죠?!

     

    .char__con {
      position: absolute;
      transform-style: preserve-3d;
      transition: 1s;
    }

     

    그리고 각 부위를 나타내는 .char__con도 absolute로 띄어줍니다.

    훗날(?)을 위해 transition 속성도 살짜쿵 넣어주고요.

     

    .char__face {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-repeat: no-repeat;
      background-size: cover;
      backface-visibility: hidden;
    
      &.face-back {
        transform: rotateY(180deg);
      }
    }

     

    .char__face는 각 부위 안에 2개씩 존재하는 면(face)입니다.

    앞뒤로 배치하려면 마찬가지로 absolute 시켜야겠죠?

    크기는 부모를 따라가도록 하고, 백그라운드 이미지 사이즈도 지정합니다.

    (어차피 여기선 크기를 지정해놔서 cover든 contain이든 무관해요!)

     

    backfave-visibility: hidden; 속성도 꼭 넣어줍시다. 안 그럼 뒤집혀졌을 때 뒷면 때문에 이상하게 보일 거에요.

    뒤집혔을 때의 모습은 .face-back이라는 클래스로 제어하기로 합니다.

     

    .char__head { //머리 부분
      top: 0;
      left: calc(42 / 856 * 100%);
    }

     

    이제 머리 부분을 작성해보겠습니다.

    머리의 left 위치값을 calc() 함수로 작성했는데요, 이는 비율에 따라 유동적으로 바뀌기 때문입니다.

     

    (비율은 무시합시당)

     

    위 이미지처럼, 전체 너비가 856px일 때 왼쪽에서부터 42px만큼 떨어진 상태인 거죠.

    그래서 42/856을 한 다음 100%를 곱해서 퍼센트값을 가져왔습니다.

     

    .char__head {
      top: 0;
      left: calc(42 / 856 * 100%);
      width: calc(770 / 856 * 100%);
      height: calc(648 / 1334 * 100%);
    }

     

    width, height도 마찬가지로 그 비율대로 가져왔습니다 :>

    이제 나머지 속성들도 추가해줍니다.

     

    .char__head {
      z-index: 60;
      top: 0;
      left: calc(42 / 856 * 100%);
      width: calc(770 / 856 * 100%);
      height: calc(648 / 1334 * 100%);
      transform-origin: center bottom;
      animation: ani-head 0.6s infinite alternate cubic-bezier(0.46, 0.18, 0.66, 0.93);
    }

     

    이 캐릭터는 이따가 머리를 까딱까딱할 거라서 transform-origin을 가운데 아래로 지정해주었습니다ㅎㅎ

    그리고 그 까딱까딱 모션은 ani-head란 이름으로 추후 작성하려고 합니다.

     

    .char__head {
      //머리 부분
      z-index: 60;
      top: 0;
      left: calc(42 / 856 * 100%);
      width: calc(770 / 856 * 100%);
      height: calc(648 / 1334 * 100%);
      transform-origin: center bottom;
      animation: ani-head 0.6s infinite alternate cubic-bezier(0.46, 0.18, 0.66, 0.93);
    
      &-face {
        //머리의 각 면
    
        &.face-front {
          @include bgi("ilbuni_head_front");
        }
    
        &.face-back {
          @include bgi("ilbuni_head_back");
        }
      }
    }

     

    그리고 앞, 뒤에 이미지도 쓱 넣어줍니다.

     

     

    ㅋㅋㅋㅋㅋㅋ귀엽게 잘나오네요!

    이어서 몸통이랑 두 팔다리도 추가해줍니다.

     

    .char__torso {
      //몸통 부분
      z-index: 50;
      left: calc(208 / 856 * 100%);
      top: calc(647 / 1334 * 100%);
      width: calc(428 / 856 * 100%);
      height: calc(385 / 1334 * 100%);
      transform-origin: center center;
    
      &-face {
        //몸통의 각 양면
    
        &.face-front {
          @include bgi("ilbuni_body_front");
        }
    
        &.face-back {
          @include bgi("ilbuni_body_back");
        }
      }
    }
    
    .char__armRight {
      top: calc(648 / 1334 * 100%);
      left: 0;
      width: calc(244 / 856 * 100%);
      height: calc(307 / 1334 * 100%);
      transform-origin: right top;
    
      .face-front {
        @include bgi("ilbuni_arm_0");
      }
    
      .face-back {
        @include bgi("ilbuni_arm_1");
      }
    }
    
    .char__armLeft {
      top: calc(648 / 1334 * 100%);
      left: calc(600 / 856 * 100%);
      width: calc(244 / 856 * 100%);
      height: calc(307 / 1334 * 100%);
      transform-origin: left top;
    
      .face-front {
        @include bgi("ilbuni_arm_1");
      }
    
      .face-back {
        @include bgi("ilbuni_arm_0");
      }
    }
    
    .char__legRight {
      top: calc(1031 / 1334 * 100%);
      left: calc(200 / 856 * 100%);
      width: calc(230 / 856 * 100%);
      height: calc(300 / 1334 * 100%);
      transform-origin: center top;
    
      .face-front {
        @include bgi("ilbuni_leg_0");
      }
    
      .face-back {
        @include bgi("ilbuni_leg_1");
      }
    }
    
    .char__legLeft {
      top: calc(1031 / 1334 * 100%);
      left: calc(414 / 856 * 100%);
      width: calc(230 / 856 * 100%);
      height: calc(300 / 1334 * 100%);
      transform-origin: center top;
    
      .face-front {
        @include bgi("ilbuni_leg_1");
      }
    
      .face-back {
        @include bgi("ilbuni_leg_0");
      }
    }

     

    .char[data-direction='forward'] {
      transform: rotateY(180deg);
    }
    
    .char[data-direction='backward'] {
      transform: rotateY(0deg);
    }
    
    .char[data-direction='left'] {
      transform: rotateY(-90deg);
    }
    
    .char[data-direction='right'] {
      transform: rotateY(90deg);
    }

     

    아까 작성하다만 data- 부분도 적어줍니다.

    캐릭터가 현재 뒤(우리쪽)을 보고 있는 상태이니 backward 상태겠죠?

    앞(벽쪽)을 보고 있는 상태라면 Y축으로 180도만큼 뒤집어주면 될 거고요.

     

    CSS 작성이 끝나면 확인을 위해 마크업 상에 data-를 추가해보겠습니다.

     

    <div class="char" data-direction="right">
     ...
    </div>

     

     

    잘 나오네요! 👐

     

    이제 캐릭터에게 애니메이션 효과를 주면 되겠습니다.

    1) 머리 까딱까딱 모션

    2) 달리는 모션

    이렇게 두 가지가 필요합니다.

    .char.running {
      .char__armRight {
        animation: ani-running-arm 0.2s alternate infinite linear;
      }
    
      .char__armLeft {
        animation: ani-running-arm 0.2s alternate-reverse infinite linear;
      }
    
      .char__legRight {
        animation: ani-running-leg 0.2s alternate infinite linear;
      }
    
      .char__legLeft {
        animation: ani-running-leg 0.2s alternate-reverse infinite linear;
      }
    }

     

    따라서 머리에게는 ani-head 애니메이션을,

    달리는 동안의 팔다리에게는 ani-running 애니메이션을 줍니다.

    왔다갔다하며 계속 반복되어야하니 alternate와 inifinite 속성을 잊지마세요!

    또, 왼쪽 팔다리에게는 alternate-reverse 속성을 줍니다.

    우리가 걸을 땐 팔다리가 같은 방향을 향하지 않고 서로 다른 방향을 향해 교차하니까요.

     

    @keyframes ani-head {
      100% {
        transform: rotateX(-10deg);
      }
    }
    
    @keyframes ani-running-leg {
      0% {
        transform: rotateX(-30deg);
      }
    
      100% {
        transform: rotateX(30deg);
      }
    }
    
    @keyframes ani-running-arm {
      0% {
        transform: rotateX(30deg);
      }
    
      100% {
        transform: rotateX(-30deg);
      }
    }

    허우적허우적

     

    귀엽네요

    😊


     

    7. 자바스크립트로 캐릭터 생성하기

     

    지금까지는 캐릭터를 쌩 HTML로 작성했는데,

    이걸 스크립트를 통해 뿅뿅 만들어지게끔 처리할게요.

     

    우선 기존 마크업은 지워줍니다.

    그리고 character.js 파일을 만듭니다.

     

    function Character() {
      //여기서 캐릭터 생성
    }

     

    그리고 html에도 연결해줘야죠.

     

    <script src="js/character.js"></script>
    <script src="js/script.js"></script>

     

    이제 script.js 파일에서 Character 생성자 함수를 사용할 수 있습니다.

    바로 이렇게 new 키워드를 쓰면 됩니다.

    생성자니까 대문자로 시작하는 것도 살짝 체크해줍니다.

     

    new Character();

     

    자, 그럼 요 Character 함수 내에 우리가 아까 만든 html을 넣으면 될 텐데요.

    그냥 변수에 작성하는 게 아니라 this를 사용합니다.

     

    function Character() {
      this.mainElem = document.createElement("div");
    }

     

    생성자를 통해 만들어진 인스턴트 객체의 속성으로 쓸 거니까 this를 사용하는 거죠!

    빈 div를 만들고 클래스네임도 부여합니다.

     

    function Character() {
      this.mainElem = document.createElement("div");
      this.mainElem.classList.add("char");
      this.mainElem.innerHTML = "";
    }

     

    마지막으로 innerHTML을 통해 내용을 채워넣습니다.

     

    고전적인 방식으로 가면 + 연산자로 하나하나 연결해줄 수 있는데,

    귀찮으니까 `` 안에 쓱 넣어줍니다.

     

    function Character() {
      this.mainElem = document.createElement("div");
      this.mainElem.classList.add("char");
      this.mainElem.innerHTML = `
      <div class="char running" data-direction="back">
          <div class="char__con char__head">
            <div class="char__face char__head-face face-front"></div>
            <div class="char__face char__head-face face-back"></div>
          </div>
          <div class="char__con char__torso">
            <div class="char__face char__torso-face face-front"></div>
            <div class="char__face char__torso-face face-back"></div>
          </div>
          <div class="char__con char__arm char__armRight">
            <div class="char__face char__arm-face face-front"></div>
            <div class="char__face char__arm-face face-back"></div>
          </div>
          <div class="char__con char__arm char__armLeft">
            <div class="char__face char__arm-face face-front"></div>
            <div class="char__face char__arm-face face-back"></div>
          </div>
          <div class="char__con char__leg char__legRight">
            <div class="char__face char__leg-face face-front"></div>
            <div class="char__face char__leg-face face-back"></div>
          </div>
          <div class="char__con char__leg char__legLeft">
            <div class="char__face char__leg-face face-front"></div>
            <div class="char__face char__leg-face face-back"></div>
          </div>
        </div>
    `;
    }

     

    자, 이 캐릭터를 이제 html 에 넣어줘야하는데요, 들어가야하는 위치는 stage 아래입니다.

    그럼 stage.appendChild 처럼 쓰면 되겠네요!

    이때 this <- 붙여주는 거 까먹지 맙시다(to me).

     

    document.querySelector(".stage").appendChild(this.mainElem);

     


     

    8. 마우스 클릭으로 캐릭터 소환하기

     

    지금은 페이지가 로드되자마자 캐릭터가 보일 텐데, 마우스 클릭으로만 나타나게 하겠습니다.

    클릭된 위치를 파악해서 그 지점에 소환하는 거죠.

     

    stageElem에게 이벤트리스너를 걸어줍니다.

     

    stageElem.addEventListener("click", function (e) {
      console.dir(e.clientX);
    });

     

    그럼 클릭된 지점의 X축을 알 수 있죠.

    캐릭터의 기존 위치값은 left: 12% 였는데, 여기에 유동적인 퍼센트값을 넣어주면 되겠습니다.

    어떻게요? e.clientX/window.innerWidth * 100 하면 되죠!

     

    그리고 이 값을 Character 생성자 함수의 매개변수로 넣어 건네줄 생각입니다. 무슨 도시락 넣어주는 거 같네요ㅋㅋㅋㅋ

    근데 그냥 달랑 넣어보내는 게 아니라...

     

    stageElem.addEventListener("click", function (e) {
      new Character({
        xPos: (e.clientX / window.innerWidth) * 100
      });
    });

     

    객체로 보낼 거에요! 

    왜냐면 xPos 값 말고도 여러가지 값을 보낼 거거든요.

    (도시락이라고 한다면 밥만 싸주는 게 아니라 반찬도 싸주는 거죠ㅎㅎ)

     

    이제 char.js로 돌아가 저 값을 받아줍니다.

     

    function Character(info) {
      ....
      this.mainElem.style.left = info.xPos + "%";
      ...
    }

     

    그럼 우리가 원하는 대로 클릭한 위치에 캐릭터가 뿅뿅 소환됩니다.

     

     

     

    후, 길군요!

    이 이후의 내용은 다음 포스트에서 만나요오오-

    728x90

    댓글