jquery 및 svg_jquery를 기반으로 멋진 애니메이션 효과 구현

오늘은 jquery와 svg를 기반으로 한 멋진 웹 애니메이션을 여러분과 공유하겠습니다. 애니메이션 효과가 아주 멋지네요. 아래에는 재생, 느린 애니메이션 및 역방향 애니메이션 버튼도 있습니다. 효과는 매우 아름답습니다. 렌더링을 살펴보겠습니다.

구현 코드.

html 코드:

코드 복사 코드는 다음과 같습니다.

 

       
            version="1.1" id="ihtLogo" x="0" y="0" viewbox="0 0 308.8 152.1" xml:space="보존"
            활성화-배경="새 0 0 308.8 152.1">
    <스타일>
        .tomato왼쪽, .tomato오른쪽
        {
            채우기: #D74022;
        }
        .bracketLeft, .bracketRight
        {
            채우기: #4D4D4F;
        }
        .s2
        {
            채우기: 없음;
            스트로크 라인캡: 라운드;
            스트로크 마이터 제한: 10;
            획 너비: 10;
            스트로크: #FFF;
        }
        .토마토잎
        {
            채우기: #95D600;
        }
     
   
    <다각형 포인트="70.5 152.1 0 81.5 70.5 11 83.2 23.8 25.5 81.5 83.2 139.3 " class="bracketLeft"/>
   
     
               
 
       
            version="1.1" id="ihtText" x="0" y="0" viewbox="0 0 148.2 23" 활성화-배경="새 0 0 148.2 23"
            xml:space="보존">
   
   
   
   
   
   
   
   
   
   
   
   
   
 
       

           
• replay

           
• slow motion

           
• reverse

       

   

   
   
   
        var 토마토 = $('#tomato'),bracketRight = $('.bracketRight'),bracketLeft = $('.bracketLeft'),tomatoLeft = $('.tomatoLeft'),tomatoRight = $('.tomatoRight') , 토마토잎 = $('.tomatoLeaves'), 문자 = $('#ihtText 경로'), $btnPlay = $('#btnPlay'), $btnSlowMo = $('#btnSlowMo'), $btnReverse = $(' #btnReverse'), tl;
        tl = 새로운 TimelineMax();
        tl.set([tomatoLeft], { xPercent: 23.6 });
        tl.set([tomatoLeaves], { xPercent: 41 });
        tl.set([토마토], {
            x퍼센트: 2,
            회전: 13,
            변환원점: '중심 중심'
        });
        tl.set(토마토, { yPercent: -200 });
        tl.set(bracketRight, { xPercent: 200 });
        tl.set(bracketLeft, { xPercent: -200 });
        tl.to([
    대괄호맞습니다
    대괄호왼쪽
], 0.3, {
    x퍼센트: 0,
    용이성: Power4.easeOut
}, 0.5).to(토마토, 0.5, {
    y퍼센트: 0,
    용이성: Bounce.easeOut
}).to(토마토, 0.2, {
    회전: 0,
    x퍼센트: -4
}).to([
    토마토왼쪽,
    토마토잎
], 0.2, { xPercent: 0 }, 'split').to(토마토, 0.2, {
    회전: 0,
    x퍼센트: 0
}, 'split').to(tomatoRight, 0.2, { xPercent: 2 }, 'split').staggerFrom(letters, 0.01, { autoAlpha: 0 }, 0.03).add('end');
        $btnPlay.click(함수 () {
            tl.timeScale(1).seek(0);
        });
        $btnSlowMo.click(함수 () {
            tl.timeScale(0.2).seek(0.5);
        });
        $btnReverse.click(함수 () {
            tl.timeScale(1).seek('end').reverse();
        });
        //@ sourceURL=pen.js
   

css代码：

复主代码 代码如下:

 #소개
        {
            높이: 100vh;
            너비: 50%;
            여백: 0 자동;
            오버플로: 숨김;
        }
        #소개 #iht로고
        {
            위치: 절대;
            최고: 50%;
            왼쪽: 50%;
            높이: 100%;
            너비: 50%;
            변환: 번역(-50%, -70%);
        }
        #소개 #ihtText
        {
            너비: 100%;
            위치: 절대;
            최고: 50%;
            너비: 40%;
            왼쪽: 50%;
            변환: 번역(-50%, 80%);
        }
        .버튼
        {
            위치: 절대;
            하단: 20px;
            왼쪽: 20px;
            목록 스타일: 없음;
            여백: 0;
            패딩: 0;
            오른쪽: 20px;
        }
        .버튼
        {
            부동: 왼쪽;
            여백 오른쪽: 10px;
            패딩: 10px 15px;
            테두리: 1px #ebebeb solid;
            텍스트 장식: 없음;
            색상: #222222;
        }