페이지 스크롤에 따라 배경색을 자연스럽게 바꾸기

티스토리 디자인 꾸미기

 

티스토리 블로그를 커스터마이징하는 아주 멋진 꿀팁을 공유하려고 해요.

바로 스크롤에 따라 배경 색깔을 자연스럽게 바꾸는 방법이에요.

블로그 디자인을 업그레이드하고 싶은 분들께 딱 맞는 팁이랍니다.

코딩 지식이 없어도 쉽게 따라 할 수 있어요.

그냥 제가 드리는 코드를 복사해서 붙여넣기만 하면 끝!

방문자가 스크롤할 때마다 블로그 배경색이 자연스럽게 변하는 걸 볼 수 있을 거예요.

이렇게 하면 블로그가 훨씬 트렌디하고 세련되게 보인답니다.

예를 들어, 페이지의 시작 부분에서 밝은 노란색이었다가 스크롤을 내리면 은은한 보라색으로 변하게 할 수 있어요.

정말 간단하죠? 디자인 감각이 한층 업그레이드된 느낌을 줄 수 있답니다.

요즘 유행하는 미니멀리즘 디자인에도 딱 맞는 팁이에요.

블로그를 꾸미는 재미를 느껴보세요!

아래의 순서대로 그대로 따라 하시면 됩니다. 아주 쉽게 설명 드릴게요.

혹시 어려운 부분이 있거나 궁금한 점이 있다면 언제든지 댓글로 남겨주세요. ^^

여러분의 블로그가 더 특별하고 매력적인 공간이 되기를 바라요. 오늘도 즐거운 블로그 운영하세요! 😊

 

---

티스토리에 적용 하기

1. 관리 페이지로 이동
2. 왼쪽 하단 꾸미기 > 스킨편집 클릭
3. 오른쪽 상단 html 편집 큭릭 
4. HTML탭 제일 하단 으로 스크롤 해서 </body></html> 사이에 아래의 코드를 복사/붙여 넣기 하세요.

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/ScrollTrigger.min.js"></script>
<script>
gsap.set("body", { backgroundColor: "#d4f8ff" }); //페이지 처음 배경색 설정
gsap.registerPlugin(ScrollTrigger);
gsap.to("body", {
    backgroundColor: "#ffffff",  //페이지 끝단 배경색 설정
    scrollTrigger: {
        trigger: $("#wrap"),
        start: "0% top",
        end: "bottom bottom",
        scrub: true,
        // markers:true,
    }
});

 

 

원하는 컬러 선택하기

1. 위 내용을 붙여넣기 하였지만 내가 원하는 컬러를 적용해야 완전히 적용이 되었다 할수 있겠죠? 
2. 위에 붙여 넣은 코드를 보면 녹색 글씨로 backgroundColor: "#d4f8ff" 라고 '#'과 6자리의 글자가 있습니다. 
3. 이부분을 바꿔주면 되는데요.
4. 원하는 컬러도 지금 바로 고를수 있게 해드릴게요
5. 아래의 컬러 선택기로 원하는 컬러를 선택후 복사합니다.

아래의 검정 버튼을 클릭하세요

이 텍스트는 선택한 색상이 적용됩니다.

이 텍스트는 선택한 색상이 적용됩니다.

이 텍스트는 선택한 색상이 적용됩니다.

선택한 색상: 없음

1. 시작 컬러와 끝 컬러가 있어야 되기에 두개의 컬러를 선택해야 해요
2. 붙여넣은 코드에서 //페이지 끝단 배경색 설정  앞 부분에 처음 시작 컬러 값 #d4f8ff 을 바꿔주시고
3. //페이지 끝단 배경색 설정 앞 부분에 페이지 끝 컬러값  #ffffff 이부분을 바꿔 주시면 됩니다.
4. 그리고 페이지 오른쪽 위에 적용 버튼을 누르고 
5. 나타나는 팝업에 확인을 눌러주시고 페이지를 새로 고침해보시면 적용되었을것입니다.
6. 끝!