어도비 뮤즈 adobe muse 스크롤5 불투명도 스크롤 효과 적용

어도비 뮤즈 adobe muse 스크롤5 불투명도 스크롤 효과 적용

스크롤 효과 패널을 사용하여 불투명도 스크롤 효과 적용
<adobe muse :  Applying opacity scroll effects using the Scroll Effects panel> 

 

이 섹션에서는 방문자의 스크롤 조작을 기준으로 하여 요소 표시를

변경하는 가시성에 변환을 적용하는 방법에 대해 알아보겠습니다.

이 방법은 방문자가 페이지 아래의 새 섹션으로 스크롤할 때 항목이 페이드 인 및

페이드 아웃되도록 하여 컨텐트를 표시하고 숨길 때 유용합니다.

 

[스크롤 효과] 패널의 [불투명도] 탭을 사용하여 페이지 요소의 투명도에

영향을 주는 스크롤 효과를 적용하려면 다음 단계를 수행하십시오.

1.

디자인 보기에서 페이지를 편집하는 동안 [페이지 속성]의 [최소 높이] 필드에 대부분의

모니터의 평균 높이보다 높은 픽셀 값(예: 2000픽셀)이 있는지 확인합니다.

또는, 페이지 컨텐트를 페이지에 추가하여 스크롤할 수 있을 만큼 긴지 확인할 수 있습니다.

 

2.

디자인 보기에서 페이지에 사각형 또는 텍스트 프레임을 그립니다.

 

3.

[채우기] 메뉴의 [채우기] 탭(또는 [채우기] 패널)을 사용하여 바둑판식 또는

비 바둑판식으로 배열된 배경 이미지를 선택한 페이지 요소에 추가하거나

단색 또는 그라데이션 채우기 색상을 설정합니다.

또는, 페이지에 Adobe Edge Animate OAM 파일을 배치하거나 슬라이드 쇼 위젯을 추가합니다.

 

4.

요소를 선택한 상태에서 [스크롤 효과] 패널의 [불투명도]

탭(왼쪽에서 두 번째 탭)을 클릭한 다음 [불투명도] 확인란을 선택합니다(그림 9 참조).

 

그림 9. 선택한 요소에 대해 불투명도 스크롤 효과를 사용하려면 [불투명도] 확인란을 선택합니다.  

 

[불투명도] 옵션을 사용하면 다른 종류의 핸들이 요소에 표시됩니다.

[동작] 탭에서 키 위치를 설정할 때 사용한 T 핸들처럼 핸들을 클릭하고 드래그하여

요소 위에 표시되도록 하거나, 아래로 드래그하여 위쪽 가장자리에 맞추거나

(또는 요소의 임의 부분의 위) 요소 아래로 드래그할 수 있습니다.

불투명도 핸들에는 독립적으로 드래그하여 키 위치, 페이드 위치 1 및 페이드 위치 2 값을

설정할 수 있는 세 부분이 있습니다.

 

5.

핸들의 가운데 사각형 부분을 클릭하고 드래그하여 키 위치를 설정합니다.

아래 예에서 키 위치가 150픽셀로 설정되어 있습니다(그림 10 참조).

 

그림 10. 가운데 사각형 핸들을 세로로 드래그하여 키 위치를 설정합니다.  

 

 
6.

핸들의 위쪽 원형 부분을 클릭하고 드래그하여 원하는 위치에 배치합니다.

아래 예에서 페이드 위치 1이 100픽셀로 설정되어 있습니다(그림 11 참조).

 

 

그림 11. 회전 핸들 위쪽, 왼쪽을 클릭하고 드래그하여 요소의 투명도에

영향을 주는 첫 번째 위치를 설정합니다. 

 
7.

핸들의 아래쪽 원형 부분을 클릭하고 드래그하여 원하는 위치에 배치합니다.

아래 예에서 페이드 위치 2가 200픽셀로 설정되어 있습니다(그림 12 참조).

 

그림 12. 회전 핸들 위쪽, 오른쪽을 클릭하고 드래그하여 요소의 투명도에

영향을 주는 두 번째 위치를 설정합니다. 

 

참고:

키 위치를 페이드 위치 핸들을 따라 드래그하여 같은 값으로 설정할 수 있습니다.

핸들을 드래그하지 않고 [스크롤 효과] 패널의 해당 필드에 각각 숫자 값을 입력할 수도 있습니다.

 
 

이 예에서 요소는 완전히 투명한 요소에서 시작하여 점점 불투명해지며,

페이지가 키 위치에 도달하면 완전히 불투명해집니다

(그림 13에서 키 위치에 해당하는 [불투명도] 값은 현재 100%로 설정되어 있음).

페이지가 키 위치를 지나서 스크롤하면 요소가 다시 점점 투명해지며,

페이지가 200픽셀을 지나서 스크롤하면 보기가 페이드 아웃됩니다(그림 13 참조).

 

그림 13. [스크롤 효과] 패널의 [불투명도] 탭에서 불투명도 비율을 설정합니다(0%는 완전히 투명함). 

 

8.

[미리 보기]를 누르거나 브라우저의 [파일] > [페이지 미리 보기]를 선택하여

스크롤 효과를 테스트합니다. 페이지 아래로 스크롤하고 다시 위로 스크롤하여 페이지 스크롤에

따른 요소의 불투명도 변화를 확인합니다.

 

9.

테스트를 마치면 Muse로 돌아가거나 [디자인] 단추를 클릭하여 페이지를 계속 편집합니다.

 

 

 

 

 

 

어도비 뮤즈 adobe muse 스크롤5 불투명도 스크롤 효과 적용

 

 <adobe muse :  Applying opacity scroll effects using the Scroll Effects panel> 

 

  이 내용은 ADOBE 홈페이지  어도비 뮤즈<adobe muse> 도움말을 가지고 왔습니다.