Hoverizr – jQuery 플러그인의 심층 보기

게시 됨: 2015-10-19

웹 디자이너는 때때로 회색조 이미지를 마우스 오버 시 색상으로 희미하게 만들어야 할 수 있습니다. 따라서 일반적인 솔루션은 Photoshop에서 회색조 효과를 얻기 위해 각 이미지의 채도를 낮추는 것입니다. 그런 다음 몇 가지 추가 div와 이미지 태그를 마크업에 추가한 다음 jQuery 마술을 추가하여 이미지를 페이드 인 및 페이드 아웃해야 합니다. 또는 높이가 2배인 더 큰 하나의 이미지로 두 개의 이미지를 병합하고 CSS 및 Javascript 파일에서 배경 위치 지정을 사용할 수 있습니다.

두 솔루션 각각의 장단점을 살펴보겠습니다.

장점:

이미지 스프라이트(하나의 파일에 있는 두 이미지 모두)를 사용하는 경우 각 이미지에 대해 HTTP 요청이 하나 줄어듭니다.

단점:

각 이미지를 개별적으로 조작해야 합니다. 즉, 클라이언트가 해당 효과로 이미지를 동적으로 업데이트할 수 없고 시간이 많이 걸리는 프로세스입니다.
두 개의 이미지를 사용하는 경우 많은 HTTP 요청이 있습니다. 어느 쪽이든, 이미지가 크면 사이트가 상당히 느려집니다.
호버 및 페이드 효과를 위한 jQuery 코드를 작성해야 합니다.

매번 그렇게 해야 하기 때문에 시맨틱 마크업을 잃지 않고 각 이미지를 처리할 필요 없이 각 이미지에 대해 동적으로 이 작업을 수행하는 방법을 찾았습니다.

캔버스 요소를 입력합니다. HTML5의 도입으로 캔버스 요소는 커뮤니티에서 점점 더 유명해졌습니다. 여러분 대부분은 이미 캔버스가 하는 일에 대해 들어보았을 것이므로 여기서는 다루지 않겠습니다. 내가 캔버스에서 필요로 하는 것은 이미지 조작 기능이었습니다. 캔버스 내부의 이미지를 가져와 각 픽셀의 값을 조작할 수 있습니다.

그것은 내가 Hoverizr 플러그인을 개발하는 데 필요한 것이었습니다. 대상 이미지에 효과(회색조, 흐림 또는 색상 반전)를 동적으로 추가하고 마우스 호버에 대한 페이드 아웃/인 효과를 포함하는 jQuery 플러그인입니다. 그리고 웹 디자인 트렌드에 따라 완벽하게 반응합니다.

이것은 맨 위에 있는 조작된 버전의 멋진 페이드 아웃으로 달성할 수 있는 것입니다.

여기에서 Hoverizr의 다른 효과에 대한 데모와 함께 라이브 예제를 볼 수 있습니다.

이제 뛰어 들어 봅시다.

호버라이저

Hoverizr는 세 부분으로 구분됩니다.

필요한 요소를 초기화하고 생성합니다.
캔버스 요소를 만들고 효과를 추가합니다.
대상 이미지 요소에 호버 페이드 인/아웃 효과를 추가합니다.

Hoverizr는 다음과 같은 간단한 마크업을 사용합니다...

 <img 클래스="클래스 이름" src="이미지 파일" />

… 그리고 다음과 같은 것을 출력합니다…

 <div class="hoverizr-container">
	<img 클래스="클래스 이름" src="이미지 파일" />
	<canvas class=".canv"></canvas>
</div>

1부. 필수 요소 초기화 및 생성

이 마크업을 달성하고 캔버스, 이미지 및 div 컨테이너에 필수 스타일을 추가하기 위해 .each() 함수 내에서 아래 jQuery를 사용하여 모든 대상 이미지에 영향을 미쳤습니다.

 $(this).wrap('<div class="hoverizr-container" />');
$(this).parent('.hoverizr-container').css({'position':'relative'});
$(this).parent('.hoverizr-container').append('<canvas class="canv"></canvas>');
$(this).next('.canv').css({'position':'absolute','top':'0','left':'0','z-index':10});

$(this) 는 초기화에서 코드로 대상이 되는 각 이미지를 나타냅니다. 대상 이미지 요소를 래핑하는 div를 만들고 해당 위치를 상대 위치로 설정하여 이미지와 캔버스가 서로 위에 놓이도록 합니다. 그런 다음 이미지 요소 아래에 캔버스 요소를 만들고 마지막으로 이미지 위에 정확히 캔버스를 배치하기 위해 몇 가지 스타일을 추가했습니다.

물론 플러그인의 코드에서 일부 부분은 다릅니다.

2부. 캔버스 요소 생성 및 효과 추가

두 번째 부분에서는 캔버스를 초기화하고 이미지 조작을 수행합니다. 이 튜토리얼의 목적을 위해 그레이스케일 효과만 설명하겠습니다.

먼저 캔버스 초기화에 사용할 두 변수의 너비와 높이를 얻습니다. 다시 $(this) 는 플러그인이 대상으로 하는 각 이미지를 나타냅니다.

 var 너비 = $(this).width();
var 높이 = $(this).height();

캔버스를 만들 수 있습니다.

 $(this).next('.canv').attr({"너비": 너비, "높이": 높이});
var 캔버스 = $(this).next('.canv').get(0);
var 컨텍스트 = 캔버스.getContext("2d");
var 이미지 = $(this).get(0);
context.drawImage(이미지, 0, 0);

그래서 우리는 캔버스의 너비와 높이를 설정하고 변수에 요소를 가져오고 컨텍스트를 가져오고 마지막으로 컨텍스트 내부에 이미지를 추가합니다.

이제 이미지 조작 마법을 위해!

 노력하다 {
      노력하다 { 
	var imgd = context.getImageData(0, 0, 너비, 높이)  
      } 잡기 (e) { 
netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
	var imgd = context.getImageData(0, 0, 너비, 높이) 
      } 						 
} 잡기 (e) {
throw new Error("이미지 데이터에 액세스할 수 없습니다: " + e)
} 
						
var pix = imgd.data;

이 전체 시도 및 캐치 부분은 추가 보안 조치(물론 중요하지 않음)가 있는 일부 브라우저에 대한 권한을 활성화하는 것입니다. 이미지 데이터를 저장하기 위한 새로운 imgd 변수가 있습니다. 그런 다음 pix 변수 내부에 배열로 저장합니다.

이제 회색조 효과:

 for (var i = 0, n = pix.length, i < n, i += 4) {
	var 회색조 = pix[i] * .3 + pix[i+1] * .59 + pix[i+2] * .11; 
	pix[i] = 회색조; // 빨간색
	pix[i+1] = 회색조; // 초록
	pix[i+2] = 회색조; // 푸른
	// i+3은 알파(네 번째 요소)
}
context.putImageData(imgd, 0, 0);

여기에 반복되는 패턴이 있습니다. pix 배열의 각 4개 값은 픽셀의 빨강, 녹색, 파랑 및 알파 값을 나타냅니다. 분명히 우리는 알파를 변경하고 싶지 않으므로 그대로 둡니다. 세 가지 색상 채널의 평균 값을 얻는 대신 HTML5 Canvas Image Effects: Black & White 튜토리얼에서 얻은 멋진 공식을 사용하고 있습니다. 마지막으로 새 이미지 데이터를 캔버스에 다시 넣습니다.

3부. 대상 이미지 요소에 호버 페이드 인/아웃 효과 추가

이것은 마지막이자 아마도 가장 쉬운 부분입니다. 캔버스를 페이드 아웃하여 마우스를 가져가면 아래에 있는 원본 이미지가 표시됩니다.

 this.parent('.hoverizr-container').hover(function() {
	$(this).children('.canv').stop(true,true).fadeOut("빠른");
	},함수() {
	$(this).children('.canv').stop(true,true).fadeIn("느리게");
});

다시 이것은 대상 이미지 요소를 나타냅니다. 호버 기능은 거의 자명합니다. 우리가 하는 일은 캔버스를 대상으로 하고 대기 중인 애니메이션을 중지한 다음 제거하는 것입니다. 속도는 "빠름"으로 설정되지만 "느림" 또는 밀리초 단위의 숫자 값으로 설정할 수 있습니다. 호버가 완료되면 두 번째 기능이 수행되어 캔버스를 다시 페이드 인합니다.

알려진 문제

다른 도메인의 이미지를 사용하려고 하면 브라우저의 보안 조치가 나타날 수 있습니다. 안타깝게도 현재로서는 할 수 있는 일이 없습니다. 이미지는 페이지와 동일한 도메인에서 호스팅되어야 합니다.

Hoverizr 대 이 튜토리얼

Hoverizr는 흐림 효과 및 색상 반전 효과와 함께 이 효과를 달성하는 데 필요한 모든 것을 이미 갖춘 플러그인입니다. 너비 및 높이 설정, 페이드 인 및 아웃 설정 속도 및 기타 많은 사용자 지정 옵션이 포함되어 있습니다. 이 튜토리얼의 목적은 Hoverizr의 더 멋진 부분이 어떻게 작동하는지 보여주는 것입니다. 코드는 플러그인의 일부이기 때문에 그대로 작동하지 않습니다.

Hoverizr 사용에 관심이 있거나 개선하거나 제안 사항이 있으면 Hoverizr jQuery 플러그인에서 자유롭게 확인하십시오.