[해피CGI][cgimall] 스크롤 및 마우스 커서에 따라 움직이는 PARALLAX 배경이미지

 

 

해당 이미지를 마우스 오버한 상태에서 커서의 위치에 따라 배경이미지가 움직이는 효과를 가진 배경이미지 디자인 소스입니다.

event: 'mouse_move',
animation_type: 'rotate',

위 두가지 소스로 인해 마우스 커서 이벤트 및 에니메이팅 효과를 적용할 수 있습니다.

$('.parallax-demo-4').parallaxBackground({
  event: 'mouse_move',
  animation_type: 'rotate',
  animate_duration: 1,
  zoom: 70,
r otate_perspective: 1000
});
 

본 예제에서 총 5가지 효과를 확인할 수 있습니다.


1) 스크롤 시 이미지 움직이는 효과

 

 

2) 스크롤시 이미지 rotate 에니메이팅 효과

 

 

3) 마우스 오버시 이미지 움직이는 효과

 

 

4) 마우스 오버시 이미지 rotate 에니메이팅 효과

 

 

5) 배경 동영상 영역을 마우스 오버시 rotate 에니메이팅 효과

 

 

위 효과로 부드럽고 고급스러운 느낌을 줄수 있는 홈페이지 효과를 기대할 수 있겠습니다.