본문 바로가기

패럴럭스 이펙트5

[Parallax Effect] 패럴럭스 이펙트 05 - 이질감 효과 패럴럭스 이펙트 05 이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 패럴럭스(parallax, 패럴랙스) 이펙트를 만들어보도록 하겠습니다. 먼저 parallax란, '시차(視差)'라는 의미를 가진 천문학 용어이며, 이번 포스팅에서 내비게이션 바에서 특정 섹션으로 가는 버튼을 누르면 해당 섹션으로 시차를 두고 스무스하게 이동시켜 주는 효과를 만들어보고자 합니다. 이번 패럴럭스 이펙트 05 포스팅에서는 스크롤 할 때 이질적인 느낌을 줘보도록 하겠습니다. HTML 소스 header, parallax__dot(dot 내비게이션), main(parallax__cont(명언 모음)), aside(parallax__info(스크롤탑값)), footer(모달 박스)로 구성된다. JAVASCRIPT PAR.. 2022. 9. 20.

[Parallax Effect] 패럴럭스 이펙트 04 - 부드럽게 나타내기 패럴럭스 이펙트 04 이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 패럴럭스(parallax, 패럴랙스) 이펙트를 만들어보도록 하겠습니다. 먼저 parallax란, '시차(視差)'라는 의미를 가진 천문학 용어이며, 이번 포스팅에서 내비게이션 바에서 특정 섹션으로 가는 버튼을 누르면 해당 섹션으로 시차를 두고 스무스하게 이동시켜 주는 효과를 만들어보고자 합니다. 이번 패럴럭스 이펙트 04 포스팅에서는 지난 패럴럭스 이펙트 1, 2, 3보다 더욱 자연스럽고 스무스하게 사진과 명언이 등장하도록 애니메이션을 줘 보도록 하겠습니다. HTML 소스 header, parallax__dot(dot 내비게이션), main(parallax__cont(명언 모음)), aside(parallax__info(스크.. 2022. 9. 18.

[Parallax Effect] 패럴럭스 이펙트 03 - 메뉴바 숨겼다 나타나게 하기 & TOP 버튼 패럴럭스 이펙트 03 이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 패럴럭스(parallax, 패럴랙스) 이펙트를 만들어보도록 하겠습니다. 먼저 parallax란, '시차(視差)'라는 의미를 가진 천문학 용어이며, 이번 포스팅에서 내비게이션 바에서 특정 섹션으로 가는 버튼을 누르면 해당 섹션으로 시차를 두고 스무스하게 이동시켜 주는 효과를 만들어보고자 합니다. 지난 패럴럭스 01 포스팅에서 만든 틀을 그대로 유지한 채 메뉴 바를 숨겼다 나타나게 하는 기능을 추가하겠습니다. 또한 페이지 최하단으로 내려가면 TOP 버튼이 나타나고, TOP 버튼을 누르면 페이지 최상단으로 올라가게 하는 이펙트도 추가해보도록 합시다. HTML 소스 header, parallax__dot(dot 내비게이션), ma.. 2022. 9. 9.

[Parallax Effect] 패럴럭스 이펙트 02 - 사이드바 패럴럭스 이펙트 02 이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 패럴럭스(parallax, 패럴랙스) 이펙트를 만들어보도록 하겠습니다. 먼저 parallax란, '시차(視差)'라는 의미를 가진 천문학 용어이며, 이번 포스팅에서 내비게이션 바에서 특정 섹션으로 가는 버튼을 누르면 해당 섹션으로 시차를 두고 스무스하게 이동시켜 주는 효과를 만들어보고자 합니다. 지난 패럴럭스 01 포스팅에서 내비게이션 형태만 사이드바 형식의 dot으로 바꿔보았습니다. HTML 소스 header, parallax__dot(dot 내비게이션), main(parallax__cont(명언 모음)), aside(parallax__info(스크롤탑값)), footer(모달 박스)로 구성된다. JAVASCRIPT PAR.. 2022. 9. 8.

[Parallax Effect] 패럴럭스 이펙트 01 패럴럭스 이펙트 01 이번 시간에는 그 동안 배웠던 JavaScript를 이용하여 패럴럭스(parallax, 패럴랙스) 이펙트를 만들어보도록 하겠습니다. 먼저 parallax란, '시차(視差)'라는 의미를 가진 천문학 용어이며, 이번 포스팅에서 내비게이션 바에서 특정 섹션으로 가는 버튼을 누르면 해당 섹션으로 시차를 두고 스무스하게 이동시켜 주는 효과를 만들어보고자 합니다. HTML 소스 header, parallax__nav(내비게이션), main(parallax__cont(명언 모음)), aside(parallax__info(스크롤탑값)), footer(모달 박스)로 구성된다. JAVASCRIPT PARALLAX EFFECT 01 패럴럭스 이펙트 01 02 03 04 05 06 07 메뉴1 메뉴2 메.. 2022. 9. 6.

이전 1 다음

Reference Book

JavaScript

JavaScript

HTML

HTML

CSS

CSS

광고 준비중입니다.

티스토리툴바