2021-09-01 (142일차) 일정한 시간간격으로 글씨가 교체되는 효과

유용한 소스코드 21강~22강 (switch effect) (글씨가 교체되는 효과) + (탭박스)

 

 

<함수>

- .each

   같은 클래스를 각각 실행시켜준다.

 

- node

  가르키는 클래스가 여러 개일 때 순서대로 가르켜주는 변수

 

<일정한 시간간격으로 글씨가 교체되는 효과>

1단계 원리 (라이브러리 생성) 

- html, css 역할

  li는 평소에 absolute (유령화) + opacity : 0

  ㄴ> 전부 겹쳐지지만

  li에 active가 들어가면 li가 relative로 변경 + opacity : 1

- script 역할

  현재 활성화된 녀석을 함수로 지정한 후, active클래스 제거하기

  현재 활성화된 녀석의 다음 태그를 함수로 지정한 후, active클래스 추가하기

  setInterval 함수 안에 넣어 일정한 시간간격으로 작동하게 하기

  length를 추가하여 현재 활성화된 녀석의 다음 태그가 없다면 처음으로 돌아가게 하기

+html 리스트 두개로 만들어서 같이 작동하게 만들기

See the Pen by jhs (@jangka44) on CodePen.

 

2단계 원리 (라이브러리 완성) 

- html, css 역할

  하단 리스트div에 data-item-seconds="1000"를 넣어주기

- script 역할

  const itemSeconds = $el.attr('data-item-seconds') ? parseInt($el.attr('data-item-seconds')) : 2000; 추가해주기

  data-item-seconds 속성값이 있으면, 이 함수는 그 속성값을 문자가 아닌 숫자로 변환해준다.

  data-item-seconds 속성값이 없다면, 그냥 숫자 2000이 기본값이게 된다.

See the Pen by jhs (@jangka44) on CodePen.

3단계 원리 (라이브러리 활용) 

이제 다 만들어진 스크립트 라이브러리만 가져온 후, 사용하면 된다!

- html, css 역할

  시간을 변경하고 싶다면 속성에 data-items-second 속성에 원하는 값을 넣으면 된다.

  css는 원하는 대로 꾸미면 된다. (active를 넣는 등등...)

- script 역할

  건들 필요 없슈

See the Pen by minicoding (@minicoding) on CodePen.