📂Snack with benefits

• 사이트명: SNACKWITHBENEFITS more than a snack
• 사용언어: HTML5, CSS3, js
• 라이브러리: Swiper, jquery , gsap, Lottie ,lenis
• 유형: PC 적응형
• 💻 https://hyesukhan.github.io/231003_snackwithbenefits/

✅ Check Point

✔ 인트로 모션
✔ lenis
✔ lottie
✔ 무한롤링배너 html&css
✔ 가로 스크롤
✔ 메뉴 애니메이션

1. 인트로 모션

html

  <div class="group-snack">
                <div class="snack1">
                    <span class="item">
                        <img data-snack="1" class="on" src="./assets/images/sc-title/cauliflower-1.webp" alt>
                        <img data-snack="2" src="./assets/images/sc-title/Amazing.webp" alt>
                        <img data-snack="3" src="./assets/images/sc-title/Funghi_01.webp" alt>
                    </span>
                </div>
                <div class="snack2">
                    <span class="item">
                        <img data-snack="1" class="on" src="./assets/images/sc-title/cauliflower-2.webp" alt>
                        <img data-snack="2" src="./assets/images/sc-title/Amazing.webp" alt>
                        <img data-snack="3" src="./assets/images/sc-title/Funghi_02.webp" alt>
                    </span>
                </div>
                <div class="snack3">
                    <span class="item">
                        <img data-snack="1" class="on" src="./assets/images/sc-title/cauliflower-3.webp" alt>
                        <img data-snack="2" src="./assets/images/sc-title/Amazing.webp" alt>
                        <img data-snack="3" src="./assets/images/sc-title/Funghi_01.webp" alt>
                    </span>
                </div>
                <div class="snack4">
                    <span class="item">
                        <img data-snack="1" class="on" src="./assets/images/sc-title/cauliflower-4.webp" alt>
                        <img data-snack="2" src="./assets/images/sc-title/Amazing.webp" alt>
                        <img data-snack="3" src="./assets/images/sc-title/Funghi_02.webp" alt>
                    </span>
                </div>

script

introTl.to('.snack1 .item',3,{
    top: '100%',
    yPercent:100,
    repeat:-1,
    rotate:10,
    ease:"none"
},'a')
introTl.to('.snack2 .item',5,{
    top: '100%',
    yPercent:100,
    repeat:-1,
    rotate:30,
    ease:"none"
},'a')
introTl.to('.snack3 .item',4,{
    top: '100%',
    yPercent:100,
    repeat:-1,
    rotate:20,
    ease:"none"
},'a')
introTl.to('.snack4 .item',8,{
    top: '100%',
    yPercent:100,
    repeat:-1,
    rotate:40,
    ease:"none"
},'a')

$('.sc-title .btn-tab-area button').click(function(){
    idx = $(this).data('idx');
    $(`[data-snack="${idx}"]`).addClass('on').siblings().removeClass('on');
    $(this).addClass('on').siblings().removeClass('on');
    if(idx == 1){
        $('.sc-title .headline-area .btn-go .bg-svg svg path').css("fill","#c4d600");
        $('.sc-title .headline-area .text').css("color","#c4d600");
    }else if(idx == 2){
        $('.sc-title .headline-area .btn-go .bg-svg svg path').css("fill","#f7f33a");
        $('.sc-title .headline-area .text').css("color","#f7f33a");
    }else{
        $('.sc-title .headline-area .btn-go .bg-svg svg path').css("fill","#ff585d");
        $('.sc-title .headline-area .text').css("color","#ff585d");
    }
})

css로 snack을 감싸는 영역을 만들어 준 후 각각의 snack들을 영역 상단바깥으로 위치시켜준다. 그리고 gsap으로 top값과 translate:transformY(100%)을 변경하고 각각 다른 각도만큼 돌면서 다른 속도로 내려오는 무한 반복 애니메이션을 만들어주었다.

2.lenis

부드러운 스크롤 이동을 위해 사용한 라이브러리이다. 라이브러리를 추가하고 스크립트 상단에 하단의 코드를 적어주기만 하면 된다! 타임옆에 숫자를 조절하면서 부드러운 느낌을 어느정도로 줄 지 선택 할 수 있다.

const lenis = new Lenis()

lenis.on('scroll', ScrollTrigger.update)

gsap.ticker.add((time)=>{
  lenis.raf(time * 1000)
})

gsap.ticker.lagSmoothing(0)

3.lottie

가운데 양배추는 로티애니메이션으로 에어비앤비에서 개발한 라이브러리이다. After Effects(에프터 이펙트)으로 추출한 애니메이션 데이터(json)를 Bodymovin(오픈소스)를 이용하여 웹, 앱(Android, iOS React-native)에 적용할 수 있는 백터기반의 애니메이션이다.

장점은
✅ 백터기반이면서도 불구하고 용량이 작고 해상도 저하가 없다
✅ 사용자의 인터렉션에 따라 제어 가능(play,stop)
단점은
✅ 제작 과정이 복잡하여 숙련도 필요

var animation1 = bodymovin.loadAnimation({
    container: $('#lottie_1')[0], 
    path: 'https://uploads-ssl.webflow.com/636a19fb40cadc7608cc47df/637cda2f010c8001e7e7561b_splash-intro-loader.json', 
    renderer: 'svg', 
    autoplay: false,
    loop:false
});

이런식으로 로티애니메이션을 사용했다.

4.무한롤링배너 html&css

html

            <div class="marquee-wrapper">
                <div class="marquee-area">
                    <div class="wrap">
                        <h2 class="headline">our story•</h2>
                        <h2 class="headline">our story•</h2>
                        <h2 class="headline">our story•</h2>
                    </div>
                    <div class="wrap">
                        <h2 class="headline">our story•</h2>
                        <h2 class="headline">our story•</h2>
                        <h2 class="headline">our story•</h2>
                    </div>
                </div>
            </div>

css

.sc-story .marquee-area{
    margin-top: 25vh;
    margin-bottom: auto;
    display: flex;
    align-items: center;
}
.sc-story .marquee-area .wrap{
    display: flex;
    flex-shrink: 0;
    animation: rollingleft1 40s linear infinite;
}
.sc-story .marquee-area .headline{ 
    flex-shrink: 0;
    -webkit-text-stroke: 1rem #FF585D;
    color: transparent;
    font-size: 17vw;
    text-transform: uppercase;
    font-family: 'Tt trailers', sans-serif;
    font-weight: 700;
    opacity: 0.3;
}

@keyframes rollingleft1 {
    0% { transform: translateX(0); }
	100% { transform: translateX(-100%); }
}

두개의 영역이 롤링되면서 끊임없이 이어지는 것처럼 보이게한다. wrap의 크기는 화면보다 길어야 자연스럽게 롤링이 된다.

5. 가로 스크롤

horiAni = gsap.to('.sect-horizontal .sticky .wrap',{
    scrollTrigger:{
        trigger:".sect-horizontal",
        start:"0% 0%",
        end:"100% 100%",
        scrub:0,
        invalidateOnRefresh:true,
    },
    xPercent:-100,
    x:function(){
        return window.innerWidth;
    },
    ease:'none'
})

section안에 가로로 긴 sticky영역을 만들고, 이를 스크롤할때 -100%에 window.innerWidth 더한 값까지 x축으로 이동시켜서 가로 스크롤을 구현하였다.

6. 메뉴 애니메이션

html

$('.header .gnb .btn-menu').click(function(){
    $('.header .menu-wrap').addClass('on');
    $('.header').toggleClass('hide');
    $(this).toggleClass('on');
    $('body').toggleClass('scroll');

})

메뉴에 클래스를 넣고 css로 tranistion을 주는 효과였지만 애니메이션들의 타이밍을 계산하는 것이 쉽지만은 않았다.🤣