animation에서 놀기 - Scroll Arrow2 -

14636 단어 CSSanimation
CSS animation day32가 되었습니다.
최근 따뜻해졌어요.

오늘은 마이크로 인터랙션으로 사용할 수있는 scroll arrow part2를 제공합니다.

1. 완성판





See the Pen Mouse Scroll Arow by hiroya iizuka ( @ 히로야 요시즈카 )
on CodePen .


2. 참고문헌



Mouse-Animation-Scroll-CSS

Animated Mouse Scroll Using Only HTML & CSS



3. 분해해 본다



❶.

마크업하자.




index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <div class="container">
      <div class="mouse"></div>
    </div>
  </body>
</html>




styles.scss

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

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

.mouse {
  width: 70px;
  height: 120px;
  border: 1px solid #cfc;
  border-radius: 30px;
}





그럼 마우스 안에 작은 원을 만드세요.

HTML을 더럽히고 싶지 않으므로 before 클래스를 사용합니다.




styles.scss

.mouse:before {
  content: "";
  width: 20px;
  height: 20px;
  background: #cfc;
  display: flex;
  margin: 20px auto;
  border-radius: 50px;
}





❷.



아래와 같이 animation을 만듭니다.



  1. opacity 변화
  2. 원의 위치를, 아래에 없이 라스
  3. 지난번 만든 화살 과 합체시킨다.


순서 해 봅시다.




styles.scss

.mouse:before {
  content: "";
  width: 20px;
  height: 20px;
  background: #cfc;
  display: flex;
  margin: 20px auto;
  border-radius: 50px;
  animation: mouse 1.3s infinite;
}

@keyframes mouse {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}





좋은 느낌입니다.



다음으로 이동합시다.




styles.scss


@keyframes mouse {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(60px);
  }
}





좋은 느낌입니다.



❸.

이전에 만든 화살표의 애니메이션과 합체하여 두 애니메이션의 위화감이 없도록 미세 조정합니다.




index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/styles.css" />
  </head>
  <body>
    <div class="container">
      <div class="mouse"></div>
      <div class="arrow"></div>
      <div class="arrow"></div>
      <div class="arrow"></div>
    </div>
  </body>
</html>




styles.scss


.arrow {
  width: 30px;
  height: 30px;
  border-bottom: 1px solid #cfc;
  border-right: 1px solid #cfc;
  transform: rotate(45deg);
  animation: move 1.3s infinite;
  margin: -3px;
}

@keyframes move {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.7;
  }
  100% {
    opacity: 0;
    transform: translateY(40px) rotate(45deg);
  }
}





완료!



❹.

microinteraction 라고 하는 것을 생각하면(자) , 이 표현이 빠듯한 심플의 범위내일까라고 생각합니다.



TechAcademy의 기사 에 따르면, microinteraction 은, 디자이너의 에고를 하고, 단일의 움직임으로 표현할 필요가 있습니다.



이번에는 단일 하향 움직임이 포함되어 있으므로 예를 들어 여기에 가로 움직임을 추가하면 마이크로 상호 작용이 사라집니다. User가 적절한 액션을 취할 수 있다는 본래의 목적을 잃어버립니다.



이런 식으로 디자이너의 자아를 버리는 것은 어렵지만 중요합니다. What 이나 How 가 아니라 Why → How → What 의 순서로 생각하는 것이 중요합니다. 즉, 왜 애니메이션을 만드는가? 라고 생각하지 않으면 안되고, 앞으로도 항상 조심해 가고 싶은 곳입니다.



그럼 다시 내일~


animation 으로 놀기 - Skew image -
animation 으로 뛰어넘기 - Parallax 3-

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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