animation에서 놀기 - Submit Button 2 -

18712 단어 CSSanimation
CSS animation day40이 되었습니다.

지난번 의 연속인 Submit Button 을 완성합시다.

1. 완성판





See the Pen Plane Button by hiroya iizuka ( @ 히로야 요시즈카 )
on CodePen .


2. 참고문헌



Flyaway Send Button

ANIMISTA



3. 분해해 본다



❶.

매크로 인터랙션의 4개의 step인 3: フィードバック 에서 해 봅시다.



버튼을 클릭하면, 비행기가 이륙하는 애니메이션을 붙이고 싶습니다만, 어떻게 하면 좋을까요?



1: 비행기가 날아간다

2: 텍스트가 바뀐다. (인간 맛이 느껴지는 텍스트라면 better)

3: 버튼이 움직인다



등을 생각할 수 있습니다.

우선은, 「클릭하면」을, Javascript 없이 표현합시다.

이전 기사 를 참고해, :checked 로 구현합니다.

　　　




index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/styles.css" />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.7.2/css/all.css"
      integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
      crossorigin="anonymous"
    />
  </head>
  <body>
    <div class="container">
      <input type="checkbox" id="start" />
      <label for="start">
        <div class="button">
          Send
          <i class="fab fa-telegram-plane plane"></i>
        </div>
      </label>
    </div>
  </body>
</html>




styles.scss

body {
  background: #000;
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
}

.button {
  position: relative;
  width: 200px;
  height: 100px;
  padding-right: 20px;
  text-align: center;
  line-height: 100px;
  color: #8fc866;
  font-size: 28px;
  border-radius: 30px;
  border: 2px solid #8fc866;
  background-size: 400%;

  &:hover {
    border-width: 4px;
    .plane {
      animation: vibrate 0.3s infinite 0.3s both;
    }
  }
}

#start {
  display: none;
}

#start:checked ~ label .plane {
  animation: fly 0.4s ease both;
}

@keyframes fly {
  100% {
    transform: translate(200px, -100px);
    opacity: 0;
  }
}

.plane {
  font-size: 35px;
  color: #ffc;
  position: absolute;
  top: 37px;
  left: 155px;
}

@keyframes vibrate {
  0% {
    transform: translate(0) rotate(10deg);
  }
  20% {
    transform: translate(-1px, 1px) rotate(10deg);
  }
  40% {
    transform: translate(0px, 0px) rotate(10deg);
  }
  60% {
    transform: translate(-1px, 1px);
  }
  80% {
    transform: translate(0px, 0px) rotate(10deg);
  }
  100% {
    transform: translate(0, 1px) rotate(10deg);
  }
}





좋은 느낌이네요!




❷.

개선점으로서, Send 버튼이, 「지금, 보냈어!」라고 하는 것을, 유저에게 가르치는 피드백이 부족합니다.



Send를 Sent !!로 변경합시다! (!! 그리고, 인간미를 냅니다.)

이것은 before 클래스를 사용하면 실현할 수 있을 것 같습니다.




styles.scss


.button {
  position: relative;
  width: 200px;
  height: 100px;
  padding-right: 20px;
  text-align: center;
  line-height: 100px;
  color: #8fc866;
  font-size: 28px;
  border-radius: 30px;
  border: 2px solid #8fc866;
  background-size: 400%;

  &:hover {
    border-width: 4px;
    .plane {
      animation: vibrate 0.3s infinite 0.3s both;
    }
  }

  &:before{
    content: 'Sent';
    font-size: 0px;
  }
}


#start:checked ~ label .button {
  font-size: 0;
}

#start:checked ~ label .button:before {
  font-size: 28px;
  padding-left: 28px;
}





원본 텍스트를 클릭하면 fontSize가 0px가 되며

:before 클래스의 fontSize 0px 의 텍스트가, 클릭되면 28px 가 되도록(듯이) 설정했습니다.




❸.

그럼 클릭하여 버튼이 움직이도록 합시다.



어떻게 움직이면 좋을까요?



비행기가 날아갈 때 폭풍이 일어난다고 가정하면 버튼이 뒤로 날아갑니다. 이 이미지를 애니메이션으로 만드세요.




styles.scss

#start:checked ~ label .button {
  font-size: 0;
  animation: moveButton 0.6s ease;
}

@keyframes moveButton {
  50% {
    margin-right: 60px;
  }
}





좋은 느낌입니다!　

단, 아직 피드백이 부족합니다.



버튼의 배경색과 문자의 색을 클릭하여 변경하도록 합시다.




styles.scss

#start:checked ~ label .button {
  font-size: 0;
  animation: moveButton 0.6s ease;
  background: #8fc866;
}

#start:checked ~ label .button:before {
  font-size: 28px;
  color: #fff;
  padding-left: 28px;
}





좋은 느낌입니다!

이제 사용자가 보냈습니다! 라는 피드백이 잘 전해집니다.



마이크로 인터랙션의 4개의 step를 의식적으로 만들면,

매우 멋진 애니메이션을 만들 수 있습니다.

그럼 또 내일~


animation 으로 뛰어넘기 - Parallax 3-
animation 으로 놀기 - Glowing Loading -

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage