FLOW 클론코딩

💻 FLOW 클론코딩

• 사이트: FLOW
• 사용언어: HTML, CSS, Jquery, gsap
• 분류: 반응형 PC, 클론코딩

📌 KEY POINT

• 흐르는 배너
• 폼태그 조건처리
• 스크롤 트리거(아래에서 위로 올라오는 애니메이션)

1. 흐르는 무한롤링 배너

@keyframes를 통해 css만으로도 무한으로 롤링이 되는 흐르는 배너를 만들 수 있다. 똑같은 ul을 2개 만들어야 하는 것이 포인트다.

// css
@keyframes marque2 {
  0%{
    transform: translateX(0%);
  }
  100%{
    transform: translateX(100%);
  }
}

.marque-box.reverse{justify-content: flex-end;} 
// 꼭 flex-end를 해줘야지 끊기지 않는 무한롤링 배너를 만들 수 있다.

.marque-box.reverse .marque-list{
animation: marque2 45s infinite linear;
}

2. 폼태그 조건처리

// 일반 input
$('#infoForm').submit(function () { 
 input1 = $('.input-company');
    if(input1.val()==''){
      alert('회사명을 입력하세요');
      input1.focus()
      return false;
   }
}

// select
$('#infoForm').submit(function () { 
	select1 = $('.select-people');
    	if(select1.val()==''){
      		alert('사용 인원을 선택하세요')
      		select1.focus()
      		return false;
    	}
	}    

※ 폼태그를 적을 때는 꼭 fieldset과 legend 넣어주기!!
※ select를 폼태그 처리 할 때는 option을 꼭 적어주어야 한다!

3. 스크롤 트리거

data를 통해 하나의 애니메이션을 만들어 놓고 계속하여 사용할 수 있게 하였다.

gsap.utils.toArray('[data-fade=true]').forEach(element => {
    gsap.from(element,{
      scrollTrigger:{
        trigger:element,
        start:"0% 100%",
        end:"100% 0%",
        toggleActions:"play pause resume reset"
      },
      opacity:0,
      yPercent:20
    })
  });

• toggleActions: 스크롤 트리거의 이벤트 행동을 정의하는 것으로서 스크롤이 초기화 되었다가 다시 이벤트가 발생하는 시점에 스크롤이 도달하면 애니메이션 효과가 반복되게 해준다.
  • toggleAction: "onEnter onLeave onEnterBack onLeaveBack"
  • play | restart | reverse | pause | resume (트리거 이벤트를 이어함) | reset (초기화) | complete (이벤트종료후)
  • onEnter : scroll-start ~ scroll-end 사이
  • onLeave : scroll-end부분을 넘어갈 때
  • onEnterBack : scroll-start ~ scroll-end 사이로 다시 들어갈 때
  • onLeaveBack : scroll-end부분을 다시 넘어갈 때