오늘 소개해드리는 내용은 지난번 잉크 번짐 효과 전체화면 레이어 팝업 소스에 이은 두번째 통통튀는 레이어 팝업 메뉴 네비게이션 (Bouncy Navigation) 소스에 대한 내용입니다.
지난번 포스팅 내용이 궁금하시면 아래 링크에서 확인해보시면 되요^^
먼저 데모 보기로 어떤 형태의 레이어 팝업 메뉴가 나오는지 먼저 보실까요?
역시나 시각을 자극하는 메뉴들이 레이어 팝업으로 통통 올라오면서 눈을 즐겁게 해주는데요.
JS파일, 이미지 파일, CSS소스를 올려주고 html으로 적용시키면 됩니다.
차근차근 해볼게요.
첫번째로 JS파일을 업로드 합니다.
main.js두번째로 아래와 같은 이미지 파일을 업로드 합니다.
마지막으로 아래의 CSS 소스를 적용시키면 되는데요.
CSS에는 두번째에서 올렸던 이미지 파일의 경로를 잡아줘야 합니다.
이 CSS에는 티스토리 상대경로로 잡혀있답니다.
이제 준비가 다 되었구요.
위 데모보기의 html을 입력해볼게요.
링크는 팝업 메뉴 6에서 보이는 것처럼 잡아주면 해당 링크로 이동하겠죠^^
위 예시대로만 따라하면 어렵지 않게 해당 효과를 적용시킬수 있을거에요.
참 레이어 팝업이기 때문에 z-index 값 설정에 따라 안보일 수 있으므로 제대로 적용시켰는데 안보이는 것 같다 싶으면 CSS의 z-index 부분을 잘 살펴보시기 바랍니다.
도움이 되셨나요?
다음번에도 멋진 효과가 적용된 소스를 소개해드릴게요^^
그럼 이상으로 통통튀는 레이어 팝업 메뉴 네비게이션 (Bouncy Navigation) 소스에 대한 소개를 마칩니다.
'Smart' 카테고리의 다른 글
| 문학 작품에서 현실적 자아 본질적 자아 차이 (0) | 2018.01.29 |
|---|---|
| 360도 회전 제품 소개 뷰어 html/css 소스 (2) | 2018.01.26 |
| 잉크 번짐 효과 전체화면 레이어 팝업 소스 (0) | 2018.01.25 |
| 연결어미 "~느니"는 대등적 연결어미? 종속적 연결어미? (0) | 2018.01.24 |
| 국어 문법 '은/는'은 무조건 보조사인가? (1) | 2018.01.23 |
