2021-08-18 (128일차) form (폼)형식, GSAP - stagger, fullpage 텍스트 애니메이션

자바스크립트와 제이쿼리 100강~101강  (form)

GSAP과 스크롤트리거 25강

FULLPAGE 15강

웹디자인 기능사 8강~10강 (서브메뉴) (따로 정리)

 

 

---

<form> 내부의 각 입력요소

  

 

- <input type="유형" placeholder="초기에 입력되어있을 내용" value="기본값">

  : 여러가지의 유형이 있다. ex) https://www.w3schools.com/tags/tag_input.asp

  : type에 number을 부여할 시, input창을 클릭하면 숫자키패드가 나온다.

  * readonly 옵션을 넣으면, 읽기전용 창으로 바뀐다.

 

- <textarea>

  : input과 다르게 2줄 이상 쓸 수 있다.

  : 너비, 높이 조절이 가능하다 ex) <textarea style="resize : both;"></textarea>

 

- <select></select>

  : 기본적으로 아래로 옵션이 내려온다. (내려올 공간이 없으면 저절로 위로 올라온다.)

  selected : 초기에 선택되어 있게 해주는 옵션

  disabled : 선택이 안 되어 있게 해주는 옵션

 

- <input type="checkbox">

  :  checkbox는 개별선택이 불가능하다.

 

- <input type="radio">

  :  radio는 개별선택이 가능하다. (대신 name으로 같은 그룹으로 지어줘야 한다.)

 

- <input type="date">

  : 시간을 입력할 수 있는 입력창

 

- <input type="range">

  : 범위를 마우스로 끌어서 입력할 수 있는 입력창

 

---

GSAP - stagger

 

 

 

- stagger

  : 시간 간격을 두어 애니메이션을 실행하도록 도와준다.

  ex) gsap.to(".box", {duration: 1, rotation:360, y:100, stagger : 0.5}); 

       ㄴ 같은 방식 : gsap.to(".box", {duration: 1, rotation:360, y:100, stagger: {each : 0.5}});

하나씩 내려오는 box

- amount

  : 애니메이션 전체 소요시간을 지정해준다.

  (전체에게 일괄명령 내려 시간 간격차를 두어 내려오라는 stagger과는 조금 다르다.)  

 

- from

  : stagger의 시작점을 지정하는 명령이다.

  : 값은 edge, start, end, center가 있다.

 

  ex) gsap.to(".box", {duration: 1, rotation:360, y:100, stagger: { amount : 1,  from : "center" }});

 가운데서 애니메이션 시작, 애니메이션 소요시간 1초

- timeline()

  : 예를들어, 내려갔다 올라오는 애니메이션을 구현할 때, delay를 줘서 늦춰서 구현했었지만

    timeline을 사용한다면 애니메이션을 안 겹치게 차례로 작동하게 해준다.

내려왔다가 올라가는 애니메이션

---

fullpage

 

- fullpage 텍스트 애니메이션