2024.12.19 [html, css, javascript]

📝  노트로 돌아가기

 

 

이전글 2024.12.18 [html, css]

다음글 2024.12.23 [html, css]

---

GSAP __ fullpage scroll event

https://gsap.com/

 

 

 

See the Pen 실무 팁 - 특정 구간에서 스크롤시, 횡으로 이동하는 효과 2부 by se.eun (@se-eun) on CodePen.

 

 

 

 

---

원하는 페이지로 이동하는 버튼 만들기

See the Pen Untitled by se.eun (@se-eun) on CodePen.

 

 

id 태그를 달아 이름을 붙여준후, a태그의 href=" "값에 id 값을 넣어주면  그 id의 위치로 이동하게 된다.

부드러운 화면 이동을 위해 

html{  scroll-behavior: smooth;  }

코드를 달아준다.

** 부드럽게 적용이 되지않을경우 body에도 달아볼것!
 

 

 

---

background-attachment:fixed

See the Pen Untitled by se.eun (@se-eun) on CodePen.

 

background-attachment:fixed 를 사용하면, 스크롤시에 페이지와같이 이미지가 스크롤 되지않고

화면에 고정되어 보여진다

 

 

참고하면 좋은 관련 포스트

https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment

background-attachment - CSS: Cascading Style Sheets | MDN

 

 

 

---

라이브러리 없이 풀페이지 효과 만들기

See the Pen Untitled by se.eun (@se-eun) on CodePen.

 

 

scroll-snap-align: start; 로 기준점을 만들어준 후 

scroll-snap-type: y mandatory;으로 효과 설정

 

 

---

차례대로 나타나는 글자 만들기

See the Pen Untitled by se.eun (@se-eun) on CodePen.

 

 

See the Pen Untitled by se.eun (@se-eun) on CodePen.