잉크 번짐 효과 전체화면 레이어 팝업 소스

간혹가다가 플래쉬도 아닌데 멋진 효과가 적용되면서 전체화면 팝업이 뜨는 경우를 보셨을 텐데요.

오늘 소개해드리는 내용은 바로 전체화면 레이어 팝업 소스에 대한 내용입니다. 

그 중에서도 잉크 번짐 효과가 적용되면서 레이어 팝업이 뜨는 소스인데요. 

아래 데모보기를 눌러보시면 잉크가 번져나가면서 화면 전환이 이뤄지고 전체화면 레이어 팝업이 생성되는 걸 보실수 있을거에요.

데모 보기

잉크 번짐 효과 전체 화면 레이어 팝업

Close

데모보기를 눌러서 나온 전체화면 레이어 팝업입니다. 

위 데모보기를 예를 들어서 어떻게 적용시키는지 설명드려 볼게요.

이와같은 효과는 세가지를 적용시키면 되는데요.

첫번째는 아래의 JS파일을 업로드 합니다. 

jquery-2.1.4.js

main.js

modernizr.js

두번째는 이미지 파일을 업로드 합니다. 

img.zip

마지막으로 세번째에서는 CSS 파일을 적용하면 됩니다.

아래와 같은 CSS 소스를 넣어주면 되는데요.

ink_style.css

CSS 소스를 보시면 중간중간 두번째에 올려놨던 이미지 파일들의 경로를 잡아줬는데요. 저 같은 경우는 티스토리 html/css 편집에 있는 파일업로드에 이미지와 JS파일들을 업로드하고 경로를 잡아줬답니다. 

이제 준비는 끝났습니다. 

적용시킬 페이지에 작성만 하면 되는데요.

아래와 같은 html 을 입력해주면 잉크 번짐 효과 데모보기 예시로 소개해드렸던 내용으로 나타나게 됩니다. 

	

		
잉크 번짐 효과 전체 화면 레이어 팝업
		
		




	
 

	Close
 

 
	

 
 	
 

어렵지 않죠?

최대한 쉽게 설명드린다고 한건데 ㅜ.ㅜ

참 레이어 팝업이기 때문에 z-index 값 설정에 따라 안보일 수 있으므로 제대로 적용시켰는데 안보이는 것 같다 싶으면 CSS의 z-index 부분을 잘 살펴보시기 바랍니다.

그리고 html 입력시 마지막 부분에 script 입력 부분은 전체경로를 다 입력하는 절대경로로 잡아줘야 되는 것 같은데 상대경로가 적용안되는 부분은 저도 정확히는 모르겠네요.

도움이 되셨나요? 

다음번에도 멋진 효과가 적용된 전체화면 레이어 팝업 소스를 소개해드릴게요^^

그럼 이상으로 잉크 번짐 효과 전체화면 레이어 팝업 소스에 대한 소개를 마칠게요