반응형 퍼블리싱5 [scrollify] 스크롤리파이의 모든 것 / 섹션별로 헤더 색상 전환하기 등 원페이지 스크롤 형태의 사이트를 만들때 사용하는 라이브러리 '스크롤리파이'. 틀이 있는 라이브러리도 어떤식으로 커스텀해서 사용하느냐에 따라 사이트 퀄리티가 달라진다. 이번 프로젝트를 진행하면서 처음 써본 스크롤리파이 라이브러리는, 생각보다는 정보 찾기가 쉽지 않았다.. 뚝딱뚝딱 (검색을 잘 못하는 날 탓해야 할 수도 OTL) 나와 같이 뚝딱거리고 있을 디블리셔들을 위해 누군가에게는 나의 메모가 유용하게 쓰이기를 바라며, 프로젝트 종료를 앞둔 시점에서 최종적으로 내가 찾아낸 스크롤리파이에 대한 정보들을 끄적여본다. [목차] 01. 스크롤리파이 적용하기. (기본형태) 02. 스크롤리파이 반응형으로 제한하기. 03. 원페이지스크롤을 구현하지 않을 일반 페이지 섞기. 04. 섹션별 헤더 색상 변경하기. 05... 2023. 11. 8. AOS animation과 slick slider 사용시 스크롤 오류 해결 퍼블리싱시에 스크롤 애니메이션으로 자주쓰는 aos 애니메이션. 같은 페이지에 slick slider를 입히려고 보니, 스크롤 위치를 제대로 인식하지 못하는 문제가 발생하였다. 해결법은 정말 간단했다. slick slider의 함수로드 가장 아래에 코드 한줄만 추가하면 모든 문제가 해결된다. 추가 코드 AOS.refresh(); 적용 예시 참고 : https://stackoverflow.com/questions/51768579/how-to-make-aos-not-working-with-slick-slider 2023. 7. 27. 스크롤에 반응하는 애니메이션 AOS 적용하기 | Animate On Scroll Library 안녕하세요. 디블리셔 미덜입니다. 오늘은, AOS 애니메이션 라이브러리 사용 방법을 퍼블리싱에 적용하는 방법을 공유드리겠습니다. AOS는 복잡하게 다운받을 필요없이, 링크 2개만 헤더영역에 추가하면 되는 아주 간단한 라이브러리라 실무에 참 많이 애용하고 있습니다. 처음 사이트에 들어갔을때, 뭘 어떻게 적용하는건가 우왕좌왕하실 분들이 계실텐데요. 초보자들도 쉽게 적용하실 수 있으니, 걱정 마세요! 1. head 영역에 아래 소스를 넣어, css와 script를 연결해줍니다. 2.body안에 aos 스크립트를 삽입해줍니다. 3. 애니메이션이 필요한 태그안에 라이브러리의 속성값들을 넣어주면 끝- 애니메이션 필요한 영역 📌 AOS 라이브러리는 블록태그에만 적용 가능합니다. (인라인태그 적용 불가) 원하는 애니메.. 2023. 3. 20. 스크롤 반응하는 변하는 헤더 | Header change on scroll 안녕하세요. 디블리셔 미덜입니다. 디자인을 할때에, 보통은 기본 헤더와 스크롤 내렸을때 나타나는 헤더 2가지 종류의 디자인을 하게 됩니다. 스크롤시 background가 변하거나, botom border가 나타나거나 하는 방식으로 말이죠. 오늘은, 이렇게 스크롤에 반응하여 변하는 header 소스를 공유하려고합니다. 첫번째로는, 스크롤을 감지했을 때 헤더가 변하게 하는 스크립트와 두번째로는, 위의 스크립트를 응용하여 특정 위치에 도달했을 때, 헤더가 변하게하는 스크립트입니다. 01 스크롤 감지 시 헤더 변하기 See the Pen Header change on scroll by 노미선 (@tpmtdbes) on CodePen. 02 특정 위치에서 헤더 변하기 See the Pen Header change.. 2023. 2. 16. 한페이지에 여러개의 다중 모달 띄우는 간단한 제이쿼리 안녕하세요. 디블리셔 미덜입니다. 퍼블리싱을 하다 보면 한 개의 화면에 여러 개의 다중 모달(팝업)을 띄워야 하는 경우가 빈번하게 발생합니다. 1번 모달, 2번 모달, 3번 모달... 각각의 모달에 스크립트 소스를 작성하다 보면 소스들이 더러워지기 마련이죠? 그래서 오늘은, 한 가지 스크립트로 다중모달을 타켓팅하여 띄우는 간단한 소스를 공유하려고 합니다. See the Pen 간단한 스크립트로 한페이지에 여러개의 다중 모달 띄우기 [] by 노미선 (@tpmtdbes) on CodePen. 소스복붙을 했는데도 제대로 적용이 안 된다 하시는 분들은 아래의 첨부 파일을 다운로드하셔서 적용해 보시기 바랍니다. 2023. 2. 15. 이전 1 다음 반응형
