0
Raphael JS 라이브러리를 사용하여 Raphael 캔버스에 그려지는 벡터로 일부 애니메이션을 만든 html 페이지가 있습니다. 그래서 여기 약간의 혼란에 직면 해있는 시나리오가 있습니다.페이지 배경 페이드 및 애니메이션 재생
처음에는 HTML 페이지에 클릭 이벤트 핸들러가있는 원이 있어야합니다. 원을 클릭하면 나머지 페이지가 사라지고 원과 함께 일부 애니메이션이 재생됩니다. 지금은 애니메이션을 재생할 수 있지만 나머지 부분을 페이드하여 원과 애니메이션 만 페이지에서 강조 표시되도록하려면 어떻게해야합니까? (원 클릭 이벤트 사용 JQuery와 $에
즉, 애니메이션은 새로운 'div'위에 다른 캔버스를 만들어야한다는 의미입니까? 예를 들어 애니메이션에서이 원을 이동하려하지만 'div'위에 새 캔버스를 만들면 이전 원이 희미한 배경 아래에 표시됩니다. – user1240679
그런 다음 세 개의 레이어를 만듭니다. 나머지 페이지는 z-index : 1이라고 말합니다. 오버레이 Div Z- 인덱스 : 2 번 클릭하면 서클이 흐려집니다. 그리고 맨 위에있는 캔버스, 즉 Z- 색인 : 3. 페이드 인 (Fade In)과 페이드 아웃 (Fade Out)을하면 캔버스도 나타나서 사라지기 때문에 캔버스를 오버레이 DIV에 넣으면 안됩니다. OverlayDiv에는 너비와 높이가 100 % 인 css 속성도 있어야합니다. display : none, color : white. 처음에는 숨기고 원을 클릭하면 .fadeIn() jquery를 사용하여 속성을 변경합니다. 표시 : none to display : block – asish
@ashish : 캔버스에 다른 것들도 그려집니다. 한 번에 하나씩 강조해야하므로 볼 수있는 캔버스를 만들 수 없습니다. – user1240679