[13Days/ ①] 웹플로우로 애니메이션을 만들어 봅시다

웹플로우 애니메이션에 대한 정보

먼저 Webflow의 애니메이션에 대해 설명하겠습니다.추가 설명이 필요 없는 경우 다음 섹션으로 건너뛰어도 됩니다.

제작 화면 맨 오른쪽에 있는 번개 모양의 표시에서 Webflow 애니메이션을 설정할 수 있습니다.애니메이션 트리거에는 “요소 트리거”와 “페이지 트리거”라는 두 가지 주요 유형이 있습니다.

엘리먼트 트리거란 무엇인가요?

요소 트리거는 요소를 트리거하고 움직임을 추가하는 항목입니다.문장을 클릭하면 텍스트 색상이 변경되는 애니메이션, 이미지를 스크롤할 때 배경 이미지와 같은 설정을 지정할 수 있습니다.Apple Store와 같은 디자인도 이러한 기능을 사용하여 만들어집니다.

어떤 애니메이션을 추가할 수 있는지 하나씩 설명해 드릴까 했는데, 리터럴이기 때문에 설명은 생략하겠습니다.“영어로 뭐가 쓰여 있는지 모르겠다”는 사람들이 있다면 “Google 번역”을 사용하세요.

페이지 트리거란?

페이지 트리거는 전체 페이지가 작업을 수행하도록 트리거합니다.페이지를 열거나 페이지를 스크롤하는 경우를 예로 들 수 있습니다.

요소 트리거 스크롤과 요소를 스크롤하는지 아니면 페이지를 스크롤하는지 간의 차이입니다.실제로 어떤 액션을 수행할 수 있는지 확인해보면 더 빨리 이해할 수 있을 것입니다.

애니메이션 추가 방법

이번에 가장 먼저 사용할 것은 페이지 로드이므로여기서부터는 페이지 로드를 기준으로 설명하겠습니다.

페이지 로드를 열면 “작업 발생 시기”를 선택할 수 있습니다.또한 풀다운 메뉴에서 “수행할 작업”을 선택하고 애니메이션 설정을 시작합니다.페이지 로드에서만 애니메이션을 선택할 수 있지만 다른 트리거를 선택하면 다양한 동작이 표시됩니다.

이번에는 페이지가 로드되는 동안 애니메이션을 만들고 있지 않기 때문에페이지 로드가 완료되면 애니메이션이 시작되는지 확인하세요.

애니메이션을 선택하면 다음에 추가할 애니메이션의 종류를 선택할 수 있으므로 “+” 버튼을 사용하여 애니메이션을 만들어 보겠습니다.

먼저 이름을 지어주세요.“히어로 이미지 그리드”로 이해하기 쉽게 만들었습니다.“+”를 다시 클릭하고 애니메이션을 선택합니다.일본어 다음으로 번역된 시점을 한 눈에 알 수 있습니다.
※일본어 번역은 항상 해도 괜찮다고 생각하지만, 웹 언어에 익숙해지기 위해 지금부터는 표기법을 영어로 돌려서 만들어 보겠습니다.

타임 애니메이션

시간 애니메이션은 페이지를 연 후 자동으로 이동하는 애니메이션입니다.“페이지를 연 후 ○초 후 이동”으로 설정할 수 있으며, 사이트를 방문하는 사용자에게 초기 영향을 줄 수 있습니다.

이번에는 Hero Image에 애니메이션을 추가해 보겠습니다.

이미지를 분할하여 표시

이미지 업로드

샘플을 사용하시는 분들은 “Hero background.jpg”를 메인 이미지로 사용하고 계신 것 같습니다.지금 이미지 1개를 넣고 있는데,애니메이션 추가의 편의를 위해 그리드를 사용하여 6개의 개별 이미지를 삽입해 보겠습니다.

각 개별 이미지는 샘플 폴더 이름 “Hero images assets”에 포함되어 있으므로 6개의 이미지가 Webflow 자산에 업로드됩니다.
※이번에는 샘플로 이 부분도 제작하고 있습니다.

샘플을 사용하지 않았다면 이미지 6개를 준비하고 시작하세요.나만의 포트폴리오를 만들고 싶다면 포트폴리오에 넣고 싶은 것을 넣어보는 것도 좋을 것 같아요.

‍※노트
자체 이미지를 사용하는 경우 이미지의 크기가 모두 같아야 합니다.웹 사이트에서 프레임을 지정할 수 있지만 모든 이미지를 동일한 크기로 처리하여 용량을 줄일 수 있습니다.

그리드를 넣고 6으로 나눕니다.

6개의 필드를 생성하고 준비한 6개의 이미지를 삽입합니다.

• 컨테이너 아래에 Div 블록 넣기
  ・높이 500픽셀
• 그리드를 넣고 3열 2행으로 설정합니다.

• 이미지 삽입
• 그리드 간격을 40px로 조정
• 연락처 양식에도 사용되는 얇은 상자 그림자를 설정하십시오.

6개의 이미지에 클래스를 추가하는 것을 잊지 마세요.6개 이미지는 모두 같은 클래스입니다.

실제로 움직임을 추가해 봅시다

그리드 회전

방금 만든 그리드를 선택하고 애니메이션을 만들어 보겠습니다.먼저 그리드를 회전시키세요.

• 히어로 이미지 그리드 선택
• 페이지 트리거에서 “페이지 로드 (페이지 로드)" 를 선택합니다.
• 페이지 로드가 완료되면 애니메이션이 시작되도록 설정
• 애니메이션의 이름 “히어로 이미지 그리드”
• 이미지를 참조하여 회전을 설정합니다.
  

① 은 거꾸로 가는 아이템인데, 이대로는 그대로 설정해도 그다지 깊이가 느껴지지 않아요. 그 위에애니메이션 설정에서 벗어나면 Div 블록에 3D 설정을 적용합니다.

• Hero 이미지 그리드의 부모 요소의 DIV 블록을 선택합니다.
• “히어로 카메라” 클래스 추가
• 2D 및 3D 트랜스폼으로부터의 거리 1000픽셀 설정
  ※거리가 멀수록 깊이가 더 깊게 느껴져야 합니다.

미리보기를 사용하여 깊이를 확인할 수 있습니다.어떻게 든 차이점을 알 수 있을까요?
① 설정 전 ② 설정 후

그런 다음 Hero 카메라를 선택한 상태에서 튀어나온 부분이 보이지 않도록 오버플로우를 설정하고 그리드 회전이 끝납니다.

페이지 로드와 함께 나타나는 애니메이션

요소의 투명도를 조작하여 요소를 표시하고 사라지게 할 수 있습니다.애니메이션의 투명도를 엉망으로 만드는 것은 불투명도입니다.

“그리드 꺼짐 → 표시”로 설정하고 싶기 때문에초기 값인 0% 에서 100% 까지 점진적으로 증가하도록 설정합니다.먼저 애니메이션 설정 아래에 있는 척 박스를 사용하여 초기 값을 설정해 보겠습니다.

초기 값을 설정한 후 다른 불투명도를 만들고 100% 로 설정합니다.또한 타이밍 섹션에서 지속 시간 숫자를 변경하여 “표시할 시간 (초)" 을 설정할 수 있습니다.둘째, 설정에서 3초로 설정해 보겠습니다.

이제 OFF 상태에서도 천천히 볼 수 있도록 설정할 수 있었습니다.

VW를 사용하여 크기 조정

그리드가 회전하고 가장자리가 약간 숨겨지므로 히어로 카메라의 높이를 조정해 보겠습니다.

• 히어로 카메라 선택
  높이를 35vw로 설정

여기서 사용하는 것은 PX 단위가 아니라 VW입니다.VW와 VH는 화면 크기에 따라 크기가 자동으로 바뀌는 단위입니다.반응형 디자인을 모르더라도 디스플레이가 무너지지 않습니다.

VW는 화면에서 가로로 크기가 조정됩니다. VH 문자는 화면 높이에서 확장 및 축소됩니다.

VW로 그리드 간격도 지정해 보겠습니다.

• 히어로 이미지 그리드 선택
  이미지 간격을 3VW로 변경

디스플레이가 모든 크기에서 접히지 않는지 확인한 다음 계속 진행하세요.

＞＞＞＞＞＞ 계속 ②

‍