반응형 웹사이트 클론코딩

오혜림·2022년 8월 19일

CSS GSAP J-QUERY html js scss

반응형 웹사이트 Clone coding

1. 체크포인트

1. 반응형 미디어쿼리

1-1) 미디어쿼리 적용법

2. gsap 플러그인

2-1) gsap 사용법
2-2) gsap 적용

3. 그외 레이아웃 및 자바스크립트

3-1) btn-menu
3-2) 국가 변경
3-3) 자동 롤링

1-1. 미디어쿼리 적용법

css 미디어 쿼리 기본 문법
@media (조건) {
  스타일
}
조건 -> max-width,min-width 조건을 주어 해당 영역에 스타일을 적용하는 것.
모바일 first -> min-width 주로 사용
pc first -> max-width 주로 사용

scss 미디어쿼리 적용법
_mixins.scss폴더에 mediapoint를 변수로 할당하고, 미디어쿼리 기본 문법을 작성해준 뒤, 다른 scss폴더에서 적은 스타일이 적용되도록 @content를 같이 적어준다.
$laptop:1265px;
$tablet:768px;
$moblie:767px;
@mixin mobile {
    @media (max-width:$moblie){
        @content;
    }
}
@mixin tablet {
    @media (min-width:$tablet) and (max-width:$laptop){
        @content;
    }
}
그리고 스타일을 적용할 scss폴더에 @include로 저장해둔 mixin을 호출하여 반응형시 나타낼 스타일을 적용해주면 된다.

2-1. gsap 사용법

사용 전 셋팅
GSAP CDN 복사해서 태그 안에 붙여넣고 jQuery CDN 있어야 작동한다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/ScrollTrigger.min.js"></script>

gsap의 기본메서드

gsap.to -> 타겟의 끝점으로 애니메이션 실행

gsap.from -> 타겟의 시작점에서 애니메이션 실행

gsap.fromTo -> ~부터 ~로 애니메이션 실행
  gsap.to(".content",
{rotation: 27, x: 500, duration: 2});
=> .content라는 객체를 rotate 27deg, x축으로 500px,실행시간은 2초동안 애니메이션 진행

gsap.timeline
gsap를 한꺼번에 묶어 순차적으로 실행하는 메서드
이때 addLabel메서드도 함께 추가하여 사용하면 gsap를 그룹으로 묶을 수 있다.
const loadAni = gsap.timeline({})
  loadAni.addLabel('a')
  loadAni.to('.load',{height:0,delay:0.7},'a')
  .to('.load .load-logo',{yPercent:-100,delay:0.3},'a')
scrollTrigger
scrollTrigger:{
	trigger:"기준이될태그",
	start:"top top", //[기준태그의시작지점, 윈도우기준 시작지점]   top->0% bottom->100% 20%,30% 다됨
	end:"bottom top"
	markers:true, //표시자 
	scrub:1 // 뭉대는 효과 
}
사용방법1
ScrollTrigger.create 강제 스크롤이벤트 생성후에 모션 입혀주기
askBg = gsap.from('.sc-ask .bg',10,{
    scale:1.2,
  })
ScrollTrigger.create({
    trigger:".sc-ask",
    start:"top 90%",
    end:"bottom top",
    markers:true,
    animation:askBg
  })
사용방법2
toggleClass: "active" → 트리거기준한테 클레스준다
toggleClass: {targets: ".reserve-form", className: "active"} 타겟까지 정해서
ScrollTrigger.create({
    trigger:".sc-ask",
    start:"top 90%",
    end:"bottom top",
    markers:true,
    toggleClass: "active"
    // toggleClass: {targets: ".reserve-form", className: "active"}
  })
사용방법3
  gsap.from('.video-area',{
    scrollTrigger:{
      trigger:'.sc-brand-story',
      start:"0% 60%",//트리거기준 0%위치, 윈도우기준0%
      end:"70% 80%",
      toggleActions:"play pause resume reset"
  },
  x:-1000
})

(1)onEnter(2)onLeave(3)onEnterBack(4)onLeaveBack

내트리거(start)에 윈도우(start) 트리거가 도달했을때
내트리거(end)에 윈도우(end) 트리거가 도달했을때
윈도우(end) 가 다시도달
윈도우(start) 가 다시도달

gsap 애니메이션 사용법 참고

toggleActions:"(1)play (2)pause (3)resume (4)reset"

사용키워드

"play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none"

scrollTrigger.metchMedia 미디어쿼리 적용

  ScrollTrigger.matchMedia({
  // large
  "(min-width: 1025px)": function() {
  },
  // medium
  "(min-width: 768px) and (max-width: 1024px)": function() { 
  },
  // small
  "(max-width: 767px)": function() {
  },
  // all
  "all": function() {
  }
});

2-2. gsap 적용

// 1. gsap load화면, 제목,버튼,svg // gsap 스크롤트리거 img,text영역    
  const loadAni = gsap.timeline({})
  loadAni.addLabel('a')
  loadAni.to('.load',{height:0,delay:0.7},'a')
  .to('.load .load-logo',{yPercent:-100,delay:0.3},'a')
  .addLabel('b')
  .from('.sc-home .thumb-area figure',{scale:1.2},'b-=0.4')
  .from('.sc-home .text',{yPercent:100,stagger:0.1},'b-=0.4')
  .to('.sc-home .link-btn',{duration:0.7,opacity:1},'b-=0.4')
  .from('.sc-home .home-logo-area .char',{opacity:0,stagger:0.2,duration:0.9,yPercent:103},'b-=0.4')

  const introAni = gsap.timeline({
      scrollTrigger:{
          trigger:".sc-home",
          start:"top top",
          end:"bottom top",
          //markers:true,
          scrub:1
      }
  })
  introAni.addLabel('c')
  introAni.to('.group-flex1',{yPercent:20},'c')
  .to('.sc-home .thumb-area',{yPercent:-10},'c')

  // 2. 모든 이미지 페럴렉스 통합판 - each문 활용
    ScrollTrigger.matchMedia({
        // large
        "(min-width: 768px)": function() {
            $('[data-parallex]').each(function(i,el){
                parent = $(this).parent()//thumb-box 변수
                gsap.to(el,{
                    scrollTrigger:{
                        trigger:parent,
                        start:"top bottom", 
                        end:"bottom top",
                        //markers:true,
                        scrub:5,
                        duration:3
                    },
                    yPercent:10
                })
            })
        }
      });

// 9. btn-menu 클릭시 gnb-area등장
  $('.btn-menu').click(function(){
      if ($(this).hasClass('active')) {
          $(this).removeClass('active')
          $('.gnb-area').removeClass('active')
          $('.link-order').animate({opacity:1})
      } else {
          $(this).addClass('active')
          $('.gnb-area').addClass('active')
          $('.link-order').animate({opacity:0})
      }
  })

3-2. 국가 변경

  $('#lang').on('change',function(){
      const currLang = $(this).val();

      window.location.href = currLang;
      $('#lang option:eq(0)').prop("selected",true);
  })

select의 val값이 달라지는 change메서드를 활용.
선택된 val를 변수로 지정하고, 새창으로 뿌려준다.
그리고 prop변수를 사용하여 selected 상태로 바꿔주기

3-3. 자동 롤링

자동 롤링 함수 선언 및 호출
자동 롤링 초기 셋팅 선언 및 호출
클릭시 자동 롤링,bar 멈추고 클릭한 요소의 bar 롤링진행

자동 롤링 함수 선언 및 호출

worksRolling = function(){
        works_Rolling = setInterval(function(){ //자동롤링 함수 선언
            bar = $('.works-item').eq(num).find('.guage')// 게이지바 선언
            $('.works-item').eq(num).addClass('active').siblings().removeClass('active')// addclass
            guageBar = gsap.to(bar,5,{
                width:"100%",
                ease:"none",
                onComplete:function(){
                    gsap.set('.guage',{width:"0%"})
                } // 애니메이션 실행 후 진행되는 메서드
            })// 게이지바 애니메이션 설정
            num === 3 ? num = 0 : num++// 조건문 num이 3이되면 0대입, 아니면 증감
        },5000)
    }
    worksRolling(); // 이때 자동롤링은 5초뒤에 실행되므로 초기 세팅 함수 선언

자동 롤링 초기 셋팅 선언 및 호출

    let num = 0;
    worksRollingInit = function(){
        $('.works-item').eq(num).addClass('active') // 첫번째에 active 추가
        gsap.to('.first-bar',5,{
            width:"100%",
            ease:"none",
            onComplete:function(){
                gsap.set('.guage',{width:'0%'})
            }
        })
        num = 1; // 다음 li의 index
    } 
    worksRollingInit();

클릭시 자동 롤링,bar 멈추고 클릭한 요소의 bar 롤링진행

    // 4. sc-works li클릭 이벤트 - 클릭시 자동 롤링,bar 멈추고 클릭한 요소의 bar 롤링진행
    $('.sc-works .info-box').click(function(e){
        e.preventDefault();
        idx = $(this).parents('.works-item').index();// works-item index값 선언
        $('.sc-works .thumb-box').removeClass('active')
        $(this).siblings('.thumb-box').addClass('active')// active 시 scale 작동
        clearInterval(works_Rolling);
        guageBar.kill();
        gsap.set('.guage',{width:"0%"})
        num = idx
        bar = $('.works-item').eq(num).find('.guage')// 게이지바 선언
        guageBar = gsap.to(bar,5,{
            width:"100%",
            ease:"none",
            onComplete:function(){
                gsap.set('.guage',{width:"0%"})
            } // 애니메이션 실행 후 진행되는 메서드
        })// 게이지바 애니메이션 설정
        $('.works-item').eq(num).addClass('active').siblings().removeClass('active')
        num++;
        worksRolling();
    })