jqueryとsvg_jqueryに基づいたクールなアニメーション効果を実現

今日は、jquery と svg をベースにした素晴らしい Web アニメーションを共有します。アニメーション効果がとてもクールです。その下には、リプレイ、スロー、リバース アニメーション ボタンもあります。エフェクトはとても美しいです。レンダリングを見てみましょう:

実装コード。

HTML コード:

コードをコピー コードは次のとおりです:

 

       
            version="1.1" id="ihtLogo" x="0" y="0" viewbox="0 0 308.8 152.1" xml:space="preserve"
            Enable-background="新しい 0 0 308.8 152.1">
    <スタイル>
        .トマト左、.トマト右
        {
            塗りつぶし: #D74022;
        }
        .bracketLeft、.bracketRight
        {
            塗りつぶし: #4D4D4F;
        }
        .s2
        {
            塗りつぶし: なし;
            ストローク ラインキャップ: 丸;
            ストロークマイターリミット: 10;
            ストローク幅: 10;
            ストローク: #FFF;
        }
        .トマト葉
        {
            塗りつぶし: #95D600;
        }
     
    <ポリゴン ポイント="238.3 152.1 225.6 139.3 283.4 81.5 225.6 23.8 238.3 11 308.8 81.5 " class="bracketRight"/>
    <ポリゴン ポイント="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"enable-background="new 0 0 148.2 23"
            xml:space="保存">
   
   
   
   
   
   
   
   

   
   
   
   
 
       

           
• replay

           
• slow motion

           
• reverse

       

   

   
   
    <スクリプト>
        var トマト = $('#トマト')、ブラケット右 = $('.ブラケット右')、ブラケット左 = $('.ブラケット左')、トマト左 = $('.トマト左')、トマト右 = $('.トマト右') 、トマト葉 = $('.トマト葉')、文字 = $('#ihtText パス')、$btnPlay = $('#btnPlay')、$btnSlowMo = $('#btnSlowMo')、$btnReverse = $(' #btnリバース')、tl;
        tl = 新しい TimelineMax();
        tl.set([トマト左], { xPercent: 23.6 });
        tl.set([トマトの葉], { xPercent: 41 });
        tl.set([トマト], {
            xパーセント: 2,
            回転: 13、
            transformOrigin: 'center center'
        });
        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(function () {
            tl.timeScale(1).seek(0);
        });
        $btnSlowMo.click(function () {
            tl.timeScale(0.2).seek(0.5);
        });
        $btnReverse.click(function () {
            tl.timeScale(1).seek('end').reverse();
        });
        //@sourceURL=pen.js
   

css代码：

复制代码代码如下:

 #イントロ
        {
            高さ: 100vh;
            幅: 50%;
            マージン: 0 自動;
            オーバーフロー: 非表示;
        }
        #イントロ #ihtロゴ
        {
            位置: 絶対;
            トップ: 50%;
            左: 50%;
            高さ: 100%;
            幅: 50%;
            変換: 変換(-50%, -70%);
        }
        #intro #ihtText
        {
            幅: 100%;
            位置: 絶対;
            トップ: 50%;
            幅: 40%;
            左: 50%;
            変換: 変換(-50%, 80%);
        }
        .ボタン
        {
            位置: 絶対;
            下: 20px;
            左: 20px;
            リストスタイル: なし;
            マージン: 0;
            パディング: 0;
            右: 20px;
        }
        .ボタン
        {
            float: 左;
            margin-right: 10px;
            パディング: 10px 15px;
            ボーダー: 1px #ebebeb ソリッド;
            テキスト装飾: なし;
            色: #222222;
        }