📂엔터프라이즈블록체인

• 사이트명: 엔터프라이즈블록체인
• 사용언어: HTML5, CSS3, js
• 라이브러리: jquery , gsap ,lenis
• 유형: PC 적응형
• 💻 https://hyesukhan.github.io/231011_enterprise/

✅ Check Point

✔ sc-bg-sticky 모션
✔ body로 bg 바꾸기
✔ card 교체 애니메이션

1.sc-bg-sticky 모션

html

<section class="sc-bg-sticky">
            <div class="wrapper">
                <div class="bg bg1"><img src="./assets/images/bg1.jpg" alt></div>
                <div class="bg bg2"><img src="./assets/images/bg2.jpg" alt></div>
                <div class="bg bg3"><img src="./assets/images/bg3.jpg" alt></div>
                <div class="gradiant"></div>
                <div class="headline-area">
                    <h2 class="headline top">기록하고</h2>
                    <h2 class="headline middle">증명하고</h2>
                    <h2 class="headline bottom">성장하기</h2>
                </div>
                <p class="desc">
                    엔터프라이즈블록체인은 블록페인 네트워크 <br> DATA ID를 활용해 그 문제를 해결하고 새로운 방식을 <br> 제안하고자 합니다.
                </p>
            </div>
</section>

script

const bgTl = gsap.timeline({
  scrollTrigger:{
    trigger:".sc-bg-sticky",
    start:"0% 0%",
    end:"100% 100%",
    scrub:1,
  }
})
bgTl.to('.sc-bg-sticky .headline-area',{opacity:1},'a')
bgTl.to('.sc-bg-sticky .gradiant',{opacity:1},'a')
bgTl.to('.sc-bg-sticky .headline-area .top',{xPercent:100},'b')
bgTl.to('.sc-bg-sticky .headline-area .bottom',{xPercent:-100},'b')
bgTl.to('.sc-bg-sticky .gradiant',{opacity:0},'b')
bgTl.to('.sc-bg-sticky .headline-area',{opacity:0},)
bgTl.to('.sc-bg-sticky .bg1',{height:0},)
bgTl.to('.sc-bg-sticky .bg2',{height:0},)
bgTl.to('.sc-bg-sticky .gradiant',{opacity:1},'c')
bgTl.to('.sc-bg-sticky .desc',{opacity:1},'c')

wrapper에 sticky를 주고 나머지 요소들을 absolute로 원하는 위치에 놓은 후 z인덱스로 나올 순서대로 쌓아둔다. gasp으로 순서대로 투명도와 위치, 또 높이를 조절하여 애니메이션을 완성하였다.🧐

2.body로 bg 바꾸기

script

ScrollTrigger.create({
  trigger:`.bg-dark`,
  start:"0% 50%",
  end:"100% 0%",
  toggleClass:{targets:"body",className:"dark"}
})
ScrollTrigger.create({
  trigger:`.bg-dark2`,
  start:"0% 50%",
  end:"100% 50%",
  toggleClass:{targets:"body",className:"dark"}
})

ScrollTrigger를 이용하여 .bg-dark , .bg-dark2 클래스에 닿으면 body에 class dark를 주고 그에따라 header 아이콘들의 색상도 변경하였다.

card 교체 애니메이션

script

ScrollTrigger.create({
  trigger:'.sc-safe .area1-wrapper .area1-inner',
  start:"0% 100%",
  end:"100% 100%",
  toggleClass:{targets:".sc-safe .area1-wrapper .card-item",className:"on"},
})
ScrollTrigger.create({
  trigger:'.sc-safe .area2-wrapper',
  start:"0% 0%",
  end:"100% 100%",
  toggleClass:{targets:".sc-safe .area2-wrapper .card-item",className:"on"},
})
ScrollTrigger.create({
  trigger:'.sc-safe .area3',
  start:"0% 0%",
  end:"100% 100%",
  toggleClass:{targets:".sc-safe .area3 .card-item",className:"on"},
})
const cardTl1 = gsap.timeline({
  scrollTrigger: {
    trigger: '.sc-safe .area1-wrapper',
    start: "0% 0%",
    end: "100% 100%",
    scrub: 0,
    invalidateOnRefresh:true,
  },
})
cardTl1.to('.sc-safe .area1 .horizental',{
  x:function(){
    return document.querySelector('.area1 .headline-area').clientWidth*-1 +100;
  }
})
cardTl1.to('.sc-safe .horizental .card-list .card-item:nth-child(2)',{xPercent:-100},'a')
cardTl1.to('.sc-safe .horizental .card-list .card-item:nth-child(3)',{xPercent:-200},'a')
cardTl1.to('.sc-safe .horizental .card-list .card-item:nth-child(4)',{xPercent:-300},'a')

const cardTl2 = gsap.timeline({
  scrollTrigger: {
    trigger: '.sc-safe .area1-wrapper',
    start: "30% 0%",
    end: "100% 100%",
    scrub: 1,
  },
})
cardTl2.to('.sc-safe .horizental .card-list .card-item.last .img-container .rock',{opacity:0})
cardTl2.to('.sc-safe .horizental .card-list .card-item.last .img-container .unrock',{opacity:1})
cardTl2.to('.sc-safe .horizental .card-list .card-item.last .img-container .unrock',{opacity:0})

const cardTl3 = gsap.timeline({
  scrollTrigger: {
    trigger: '.sc-safe .area2-wrapper',
    start: "0% 0%",
    end: "100% 100%",
    scrub: 1,
  },
})
cardTl3.to('.sc-safe .area2-wrapper .card-item .text',{opacity:1});

const cardTl4 = gsap.timeline({
  scrollTrigger: {
    trigger: '.sc-safe .area3',
    start: "0% 0%",
    end: "100% 100%",
    scrub: 1,
  },
})
cardTl4.to('.sc-safe .area3 .card-list .card-item:nth-child(2)',{xPercent:-100},'a')
cardTl4.to('.sc-safe .area3 .card-list .card-item:nth-child(3)',{xPercent:-200},'a')
cardTl4.to('.sc-safe .area3 .card-list .card-item:nth-child(4)',{xPercent:-300},'a')
cardTl4.to('.sc-safe .area3 .headline-area',{opacity:1})
cardTl4.to('.sc-safe .area3 .card-list .card-item .gradiant',{opacity:1})