• 티스토리 홈
  • 프로필사진
    KIMJAVAN
  • 방명록
  • 공지사항
  • 태그
  • 블로그 관리
  • 글 작성
KIMJAVAN
  • 프로필사진
    KIMJAVAN
    • 개발 (160)
      • 마크업 언어 (19)
        • HTML (7)
        • CSS (12)
      • 자바스크립트 (85)
        • JavaScript (34)
        • JS Library (6)
        • React (13)
        • threeJS (6)
        • TypeScript (2)
        • Next js (5)
        • Node JS (18)
        • webGL (1)
      • AI (4)
        • chat-gpt (4)
      • flutter (17)
        • dart (11)
        • flutter (6)
      • Sql (3)
      • PHP (4)
      • Python (2)
      • Git (4)
      • vscode (1)
      • 개발 도움 사이트 (7)
      • 작업기록 (1)
      • 오류 모음 (3)
      • 메모장 (7)
  • 방문자 수
    • 전체:
    • 오늘:
    • 어제:
  • 최근 댓글
      등록된 댓글이 없습니다.
    • 최근 공지
        등록된 공지가 없습니다.
      # Home
      # 공지사항
      #
      # 태그
      # 검색결과
      # 방명록
      • [GSAP] gsap 예시
        2024년 01월 24일
        • KIMJAVAN
        • 작성자
        • 2024.01.24.:21
        728x90
                {
                    gsap.to(".test", {
                    scrollTrigger: {
                        trigger: ".div-wrap", 
                        markers: true,
                        start: "500px center",
                        end: "bottom center", 
                        scrub: true,
                    },
                    x: `-4000px`,
                    });
                }
                {
                    gsap.to(".test", { //내가 효과를 주고 싶은 요소
                    scrollTrigger: { //스크롤로 효과를 제어
                        trigger: ".div-wrap", //스크롤 효과를 줄 기준
                        markers: true, //기준 maker 보이게하는거
                        start: "500px center", // 시작점 : 언제시작(trigger)? 기준(뷰포트)
                        end: "bottom center", // 끝점 : 언제끝(trigger)? 기준(뷰포트)
                        scrub: true, // 위아래로 올라가는거 할거임?
                    },
                    x: `-4000px`, //x축으로 -4000px이동할거임
                    });
                }
        저작자표시 비영리 변경금지

        '자바스크립트 > JS Library' 카테고리의 다른 글

        [GSAP] scrub true / 0.5 차이  (1) 2024.06.07
        [Swiper Slide] Uncaught SyntaxError: Identifier 'swiper' has already been declared (오류해결)  (0) 2023.10.25
        [Swiper Slide] 스와이퍼 슬라이드 slides per view + loop 오류  (0) 2023.10.16
        [gsap] gsap 사용하는 법 / cdn으로 사용하기  (0) 2023.08.22
        [gsap] 애니메이션이 초기화 될 때  (0) 2023.08.07
        다음글
        다음 글이 없습니다.
        이전글
        이전 글이 없습니다.
        댓글
      조회된 결과가 없습니다.
      스킨 업데이트 안내
      현재 이용하고 계신 스킨의 버전보다 더 높은 최신 버전이 감지 되었습니다. 최신버전 스킨 파일을 다운로드 받을 수 있는 페이지로 이동하시겠습니까?
      ("아니오" 를 선택할 시 30일 동안 최신 버전이 감지되어도 모달 창이 표시되지 않습니다.)
      목차
      표시할 목차가 없습니다.
        • 안녕하세요
        • 감사해요
        • 잘있어요

        티스토리툴바