재활용 활동

사이트의 다른 섹션에서 생성한 이전 활동을 사용할 수 있습니다. 이는 동일한 활동을 사용하려는 동일한 구조의 반복 레이아웃이나 구성 요소를 처리할 때 유용합니다.

Webflow 활동에는 활동 재사용을 지원하는 2가지 주요 제어 기능이 있습니다.

1. 트리거 구성—이 시점에서 트리거가 특정 요소(선택한 요소)에만 관련되는지 아니면 동일한 분류를 가진 모든 요소와 관련되는지 선택할 수 있습니다.
2. 액션 타겟 — 이 경우 애니메이션의 작업이 특정 요소, 요소 그룹 또는 상호 작용 트리거 자체에 영향을 미치는지 확인할 수 있습니다.

중요한: 현재로서는 페이지 활동을 재활용하는 것이 불가능합니다. 각 페이지에 페이지 트리거를 할당해야 합니다. 그럼에도 불구하고 요소 분류를 대상으로 애니메이션을 할당하여 각 페이지에서 재활용할 수 있습니다. 이렇게 하려면 첫 번째 페이지에 페이지 트리거를 설정하고 애니메이션을 위조하세요. 선택한 요소가 아닌 분류를 대상으로 삼아야 합니다. 그런 다음 각 페이지로 이동하여 페이지 트리거를 도입하고 이전에 구성한 애니메이션을 지정합니다.

이 튜토리얼에서는 재사용 가능한 2가지 애니메이션을 안내합니다. 

1. 버튼 화살표 교대 활동을 공식화하는 방법
2. 보기 활동 내에서 스크롤을 만드는 방법

버튼 화살표 교대 활동을 개발하는 방법

이 경우 동일한 분류를 가진 모든 버튼에서 동일한 "화살표 밖으로 이동" 활동을 시작하는 방법을 이해하게 됩니다. 또한 애니메이션이 사이트 방문자가 현재 가리키고 있는 버튼 화살표에만 영향을 미치는지 확인하는 방법도 알아봅니다.

사용자 정의 버튼을 생성하는 방법

시작하려면 먼저 텍스트와 화살표(즉, 나중에 애니메이션을 적용할 대상)가 포함된 사용자 정의 버튼을 만듭니다. 버튼에 사용할 화살표 이미지를 자산 패널에 업로드해야 합니다. 사용자 정의 버튼 모양을 지정하려면:

1. 향하다 패널 삽입 > 기초적인
2. 드롭 링크 블록 Webflow 캔버스에
3. 로 이동 스타일 패널 > 스타일 선택기 링크 블록에 분류를 지정합니다(예: “버튼 상자).
4. 이동 패널 삽입 > 타이포그래피
5. 을 추가하다 텍스트 블록 링크 블록 내에서
6. 로 진행 스타일 패널 > 스타일 선택기 텍스트 블록에 분류를 할당합니다(예: "버튼 텍스트").
7. 액세스 자산 패널
8. 화살표 이미지를 링크 블록으로 드래그하세요.
9. 로 이동 스타일 패널 > 스타일 선택기 화살표 이미지에 분류를 할당합니다(예: '버튼 화살표').
10. 링크 블록(예: "버튼 상자")을 선택합니다.
11. 향하다 스타일 패널 > 공들여 나열한 것 그리고 설정 표시하다 에게 플렉스박스

이제 버튼을 디자인했습니다! 여백과 안쪽 여백, 테두리, 호버 상태 또는 기타 스타일을 포함할 수 있습니다. 후속 테스트를 위해 버튼을 복제하여 활동이 모든 버튼에 적용되는지 확인할 수도 있습니다.

전문가의 조언: 사용자 정의 버튼의 구성 요소(예: 링크 블록, 텍스트 블록 및 화살표 이미지)에 분류를 할당하면 동일한 분류를 가진 다른 요소에 대한 활동을 재사용할 수 있습니다. 예를 들어 사용자 정의 버튼을 재활용하고 동일한 활동을 사용하려는 경우에 유용합니다.

사용자 정의 버튼 활동을 개발하는 방법

이제 버튼 화살표 이동 활동을 설정할 수 있으므로 사이트 방문자가 버튼 위에 마우스를 올리면 화살표가 오른쪽으로 이동합니다. 활동을 구성하려면 다음을 수행합니다. 

1. 사용자 정의 버튼 활동 트리거 만들기
2. 마우스 오버 시 버튼의 화살표를 이동하는 애니메이션 설정
3. 마우스를 가져갈 때 화살표의 위치를 재설정하는 애니메이션을 설정합니다.
4. 동일한 분류를 가진 모든 요소에 트리거를 적용합니다.
5. 맞춤 버튼 평가

사용자 정의 버튼 활동 트리거 만들기

트리거는 사이트 방문자가 버튼과 상호 작용할 때 애니메이션을 시작하는 것입니다. 이 시나리오에서는 마우스 호버 트리거를 설정하므로 사이트 방문자가 버튼 위로 마우스를 가져가면 애니메이션(예: 화살표 움직임)이 발생합니다.

1. 링크 블록을 선택합니다(예: "버튼 상자")
2. 액세스 활동 패널
3. '를 탭하세요....을 더한” 아이콘 옆에 요소 트리거
4. '마우스 호버'를 선택하세요.

마우스 오버 시 버튼의 화살표를 이동하는 애니메이션 설정

이 단계에서는 사이트 방문자가 버튼 위로 마우스를 가져갈 때 화살표가 약간 오른쪽으로 움직이도록 버튼 화살표에 마우스 오버 애니메이션을 배열합니다.

1. 링크 상자(예: "버튼 상자")를 선택합니다.
2. 옆에 있는 '애니메이션 선택'을 탭하세요. 행동 에서 호버링 시 부분
3. 아래에서 '애니메이션 시작'을 선택합니다. 맞춤 애니메이션
4. '를 탭하세요....을 더한옆에 있는 ” 아이콘 시간 제한 애니메이션
5. 애니메이션 이름을 지정합니다(예: "화살표 이동").
6. 버튼의 화살표(예: "버튼 화살표")를 선택합니다.
7. '를 탭하세요....을 더한" 옆에 행위
8. 선택하다 이동하다 아래에 변환
9. 아래에서 x축의 픽셀 값(예: 6px)을 설정합니다. 이동하다
10. 원하는 경우 이징 및 기간을 조정하세요.
11. 옆에 있는 "이 분류에 해당하는 어린이만"을 선택합니다. 수업
12. 수도꼭지 구하다

중요한: "이 분류가 있는 하위 항목만"은 트리거 요소(예: "버튼 상자" 링크 블록) 및 해당 분류가 적용된 해당 하위 요소(예: "버튼 화살표" 화살표)를 참조하여 적용됩니다. 애니메이션이 "어린이에게만" 영향을 미치도록 제한하지 않으면 사이트 방문자가 사용자 정의 버튼 중 하나 위로 마우스를 가져갈 때 사이트의 모든 화살표 인스턴스가 이동합니다.

링크 블록의 분류(예: "버튼 상자")를 기반으로 트리거를 설정하고 화살표 분류(예: "버튼 화살표)가 있는 하위 항목에만 영향을 미치도록 애니메이션을 설정한 경우 활동은 링크의 모든 인스턴스에 영향을 미칩니다. 사이트의 사용자 정의 버튼 — 사용자 정의 버튼이 "버튼 상자" 분류와 "버튼 화살표" 분류를 모두 포함하는 경우.

호버아웃 시 화살표 위치를 재설정하는 애니메이션 설정

이제 hover를 구성해보겠습니다. 버튼의 hover-out 전환 중에 사이트 방문자가 커서를 버튼에서 멀어지면 원래 위치로 되돌릴 수 있도록 화살표에 애니메이션을 구현합니다.

1. 링크 블록을 선택합니다(예: "버튼 상자")
2. 다음으로 이동하세요. 상호 작용 패널
3. 트리거 요소를 다음과 같이 선택합니다. 마우스 호버
4. 옆에 있는 "애니메이션 선택"을 클릭하세요. 행동 에서 호버아웃 시 부분
5. 아래에서 '애니메이션 시작'을 선택하세요. 맞춤 애니메이션
6. " 아이콘을 선택하세요.세 개의 공개 점” 기존 애니메이션에 가깝습니다(예: “화살표가 밖으로 이동”).
7. 선택하다 복제하다
8. “를 선택하세요.장부복제된 애니메이션 근처의 ' 아이콘
9. 바꾸다 애니메이션 이름(예: "화살표 뒤로 이동")
10. 타임라인에서 화살표의 이동 애니메이션을 선택합니다.
11. x축을 0px로 조정하세요. 이동하다
12. 딸깍 하는 소리 구하다

동일한 클래스를 공유하는 모든 요소로 트리거를 확장합니다.

기본적으로 트리거는 선택한 요소(예: 링크 블록)에만 적용됩니다. 그러나 범용 효과의 경우 동일한 클래스(예: "버튼 상자")의 모든 요소를 포함하도록 트리거를 수정하여 다음과 같은 상호 작용을 허용합니다. 해당 클래스의 모든 인스턴스에서 균일하게 발생합니다. 이 접근 방식을 사용하면 웹 사이트 전체에 사용자 정의 버튼을 복제할 수 있으므로 이러한 복제물에 대한 균일한 상호 작용도 보장됩니다.

동일한 클래스를 가진 모든 요소로 트리거를 확장하려면 다음을 수행하십시오.

1. 링크 블록(예: "버튼 상자")을 선택합니다.
2. 액세스 상호 작용 패널
3. 다음을 선택하세요. 마우스 호버 요소 트리거
4. 선택하다 수업 ~에 트리거 설정

이제 상호작용은 해당 클래스를 공유하는 모든 요소(예: "버튼 상자")를 포함합니다. 캔버스에 사용자 정의 버튼을 복제하면 동일한 클래스를 상속하는 복제 버튼은 원래 사용자 정의 버튼과 동일한 화살표 이동 상호 작용을 나타냅니다.

사용자 정의된 버튼 테스트

사용자 정의된 버튼과 중복된 버튼 위에 마우스를 올려 사이트의 기능을 확인하고 상호 작용이 해당 클래스를 상속하는 모든 버튼에 원활하게 적용되는지 확인하세요.

스크롤 활성화 상호 작용 만들기

재사용 가능한 스크롤 효과를 설정하는 동안 트리거 요소 자체를 대상으로 지정하는 것이 좋습니다. 여기서는 웹 사이트 제목이 오른쪽으로 슬라이드되고 보기로 스크롤할 때 불투명도가 높아지는 상호 작용을 만드는 방법을 보여 드리겠습니다.

이 상호 작용을 개발하려면 다음을 수행합니다.

1. 보기 트리거로 스크롤 설정
2. 보기 애니메이션으로 스크롤 만들기
3. 작업 대상 지정

보기 트리거로 스크롤 설정

상호작용을 시작하려면 먼저 애니메이션용 상위 요소(예: div 블록)에 '보기로 스크롤' 트리거를 설정합니다.

1. div 블록을 선택합니다. 예를 들어 div 블록에 "콘텐츠 래퍼" 클래스를 할당합니다.
2. 다음으로 이동하세요. 상호 작용 패널
3. “를 클릭하세요....을 더한” 아이콘 옆에 요소 트리거
4. '스크롤하여 보기'를 선택하세요.

동일한 클래스가 있는 요소 간에 이 상호 작용을 재사용하려면 클래스 수준에서 트리거를 적용하세요. 선택하다 수업 아래에 트리거 설정 해당 클래스가 있는 요소(예: "콘텐츠 래퍼")가 스크롤되어 표시될 때마다 애니메이션이 활성화되도록 합니다.

보기 애니메이션으로 스크롤 만들기

보기로 스크롤 애니메이션은 2단계로 구성됩니다.

• 초기 상태 — 요소를 왼쪽으로 50px 배치하고 불투명도를 0%로 설정합니다.
• 스크롤하여 보기 상태 — 요소를 100% 불투명도로 전환하고 x축 원점으로 되돌립니다.

먼저 div 블록의 초기 상태를 정의하고 스크롤하여 보기 전에 왼쪽으로 50px, 불투명도 0%에 배치합니다.

1. div 블록을 선택합니다(예: "콘텐츠 래퍼")
2. 액세스 상호 작용 패널
3. 선택하세요 보기로 스크롤 요소 트리거
4. 옆에 있는 "애니메이션 선택"을 클릭하세요. 행동 에서 스크롤해서 볼 때 부분
5. 아래에서 '애니메이션 시작'을 선택합니다. 맞춤 애니메이션
6. “를 선택하세요....을 더한근처에 있는 ” 아이콘 시간 제한 애니메이션
7. 애니메이션에 이름을 지정합니다(예: "콘텐츠 래퍼 애니메이션")
8. “를 클릭하세요....을 더한근처에 있는 ” 아이콘 행위
9. 선택하다 이동하다 아래에 변환
10. 아래에서 x축 값(예: -50px)을 지정합니다. 이동하다
11. 아래의 "초기 상태로 설정" checkbox를 선택합니다. 타이밍
12. “를 클릭하세요....을 더한근처에 있는 ” 아이콘 행위
13. 선택하다 불투명 아래에 스타일
14. 설정 불투명 값으로(예: 0%)
15. 아래의 "초기 상태로 설정" checkbox를 선택합니다. 타이밍

다음으로, 제목이 스크롤되면 작업을 정의합니다.

1. “를 클릭하세요....을 더한근처에 있는 ” 아이콘 행위
2. 선택하다 이동하다 아래에 변환
3. 아래에서 x축 값(예: 0px)을 지정합니다. 이동하다
4. 아래의 "초기 상태로 설정" checkbox를 선택 취소합니다. 타이밍
5. “를 클릭하세요....을 더한타임라인에서 방금 지정한 작업 옆에 있는 '아이콘(예: '콘텐츠 래퍼' 0px) 이동하다 action) — 이렇게 하면 x축에서 제목이 0px로 돌아가는 것과 동시에 작업이 발생합니다.
6. 선택하다 불투명 이내에 스타일
7. 다음에 대한 백분율 값을 지정합니다. 불투명 (예: 100%)
8. 누르다 구하다

이제 애니메이션이 이를 트리거하는 요소(예: "콘텐츠 래퍼" div 블록)에만 영향을 미치는지 확인해야 합니다.

행동 목표 설정

작업이 상호작용 트리거에 영향을 미치도록 작업 대상을 구성하려면 다음을 수행하세요.

1. div 블록을 선택합니다(예: '콘텐츠 래퍼')
2. 로 이동 상호 작용 패널
3. 선택하세요 보기로 스크롤 요소 트리거
4. 누르세요 "장부'를 이전에 설정한 애니메이션 옆에 표시합니다(예: '콘텐츠 래퍼 애니메이션)
5. 애니메이션 타임라인에서 모든 작업을 선택합니다(길게 누르기). 명령 (Mac의 경우) 또는 제어 (Windows의 경우) 모든 타임라인 작업을 클릭합니다.)
6. '상호작용 트리거'를 선택하세요. 영향을 미치다 쓰러지 다
7. 때리다 구하다

이렇게 하면 작업은 애니메이션을 만들 때 처음 선택한 특정 요소가 아닌 상호 작용 트리거에만 영향을 미칩니다. 이 접근 방식을 사용하면 액션의 이전 대상 요소를 새 상호 작용의 트리거 요소로 대체하여 애니메이션을 재사용할 수 있습니다.