01. 슬라이드 이펙트

슬라이드 이펙트 기본적인 효과입니다 : 트랜지션 효과

  • 데이터 저장하기 : 변수
  • 요소 객체 : 메서드 : querySelector(), querySelectorAll()
  • 함수 : 메서드 : setinterval() : 각 호출 사이에 고정된 시간 지연으로 함수를 반복적으로 호출하거나 코드 스니펫을 실행합니다.
  • CSS : opacity : 요소의 불투명도를 설정합니다.(0~1 사이의 숫자만 입력 가능)
  • 라이브러리 : GSAP : gsap.to()
  • 라이브러리 : jQuery : $()
확인하기

02. 슬라이드 이펙트

슬라이드 이펙트 기본적인 효과입니다 : 좌로 움직이기

  • 데이터 저장하기 : 변수
  • 요소 객체 : 메서드 : querySelector(), querySelectorAll()
  • 함수 : 메서드 : setinterval() : 각 호출 사이에 고정된 시간 지연으로 함수를 반복적으로 호출하거나 코드 스니펫을 실행합니다.
  • CSS : opacity : 요소의 불투명도를 설정합니다.(0~1 사이의 숫자만 입력 가능)
  • 라이브러리 : GSAP : gsap.to()
  • 라이브러리 : jQuery : $()
확인하기

03. 슬라이드 이펙트

슬라이드 이펙트 기본적인 효과입니다 : 좌로 움직이기

  • 데이터 저장하기 : 변수
  • 요소 객체 : 메서드 : querySelector(), querySelectorAll()
  • 요소 객체 : 속성 : offsetWidth
  • 메서드 : setinterval() : 각 호출 사이에 고정된 시간 지연으로 함수를 반복적으로 호출하거나 코드 스니펫을 실행합니다.
  • CSS : opacity : 요소의 불투명도를 설정합니다.(0~1 사이의 숫자만 입력 가능)
  • 라이브러리 : GSAP : gsap.to()
  • 라이브러리 : jQuery : $()
확인하기

04. 슬라이드 이펙트

슬라이드 이펙트 기본적인 효과입니다 : 좌로 움직이기(연속적으로)

  • 데이터 저장하기 : 변수
  • 데이터 실행하기 : 함수
  • 데이터 제어하기 : if문
  • 요소 객체 : 메서드 : querySelector(), querySelectorAll()
  • 요소 객체 : 속성 : offsetHeight
  • 메서드 : firstElementChild : 요소의 첫번째 자식을 반환하거나 Element자식 null요소가 없는 경우 반환합니다.
  • 메서드 : appendChild : 한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙입니다.
  • 메서드 : cloneNode : 이 메서드를 호출한 Node의 복제된 Node를 반환합니다.
  • 메서드 : setInterval() : 각 호출 사이에 고정된 시간 지연으로 함수를 반복적으로 호출하거나 코드 스니펫을 실행합니다.
  • 메서드 : setTimeout() : 일정 시간이 지난 후 정해진 코드를 실행하게 합니다. 한번만 실행됩니다.
  • CSS : opacity : 요소의 불투명도를 설정합니다.(0~1 사이의 숫자만 입력 가능)
  • 라이브러리 : GSAP : gsap.to()
  • 라이브러리 : jQuery : $()
확인하기

05. 슬라이드 이펙트

슬라이드 이펙트 기본적인 효과입니다 : 이미지 슬라이드(버튼, 닷메뉴)

  • 데이터 저장하기 : 변수
  • 데이터 실행하기 : 함수
  • 데이터 제어하기 : if문
  • 요소 객체 : 메서드 : querySelector(), querySelectorAll()
  • 요소 객체 : 속성 : offsetWidth
  • 메서드 : firstElementChild : 요소의 첫번째 자식을 반환하거나 Element자식 null요소가 없는 경우 반환합니다.
  • 메서드 : appendChild : 한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙입니다.
  • 메서드 : cloneNode : 이 메서드를 호출한 Node의 복제된 Node를 반환합니다.
  • 메서드 : setInterval() : 각 호출 사이에 고정된 시간 지연으로 함수를 반복적으로 호출하거나 코드 스니펫을 실행합니다.
  • 메서드 : setTimeout() : 일정 시간이 지난 후 정해진 코드를 실행하게 합니다. 한번만 실행됩니다.
  • 라이브러리 : GSAP : gsap.to()
  • 라이브러리 : jQuery : $()
확인하기

06. 슬라이드 이펙트

슬라이드 이펙트 : 이미지 슬라이드(버튼, 닷메뉴)

  • 데이터 저장하기 : 변수
  • 데이터 실행하기 : 함수, forEach()
  • 데이터 제어학 : if문
  • 요소 객체 : 메서드 : querySelector(), querySelectorAll(), innerHTML
  • 이벤트 객체 : 메서드 : addEventListener("click")
확인하기

07. 슬라이드 이펙트

슬라이드 이펙트 : 이미지 슬라이드(버튼, 썸네일)

  • 데이터 저장하기 : 변수, 배열
  • 데이터 불러오기 : map()
  • 데이터 실행하기 : 함수, forEach()
  • 데이터 제어하기 : if문
  • 배열 객체 : join()
  • 요소 객체 : 메서드 : querySelector(), querySelectorAll(), innerHTML
  • 이벤트 객체 : 메서드 : addEventListener("click")
확인하기