Realisieren Sie coole Animationseffekte basierend auf jquery und svg_jquery

Heute werde ich eine atemberaubende Webanimation basierend auf JQuery und SVG mit Ihnen teilen. Der Animationseffekt ist sehr cool. Unten gibt es außerdem Schaltflächen für Wiedergabe, Zeitlupe und Rückwärtsanimation. Der Effekt ist sehr schön. Werfen wir einen Blick auf die Renderings:

Implementierungscode.

HTML-Code:

Code kopieren Der Code lautet wie folgt:

 

       
            version="1.1" id="ihtLogo" x="0" y="0" viewbox="0 0 308.8 152.1" xml:space="preserve"
            enable-background="new 0 0 308.8 152.1">
   
        .tomatoLeft, .tomatoRight
        {
            füllen: #D74022;
        }
        .bracketLeft, .bracketRight
        {
            füllen: #4D4D4F;
        }
        .s2
        {
            füllen: keine;
            Strichzeilenkappe: rund;
            Hub-Gehrungsgrenze: 10;
            Strichstärke: 10;
            Schlaganfall: #FFF;
        }
        .tomatoLeaves
        {
            Füllung: #95D600;
        }
     
   
   
   
     
      & lt; Pfad d = "M122.3 127c12.1 12.1 29 19.4 47,6 18.8 33.7-1.1 61.1-28.5 62.2-62.2 0.6-18.6-6.7-35.5-18.8-47.6L122.3 127z" Class = "Tomatoright"/& Gt;
         
 
       
            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="preserve">
   
   
   
   
   
   
   
   
   
   
   
   
   
 
       

           
• replay

           
• slow motion

           
• reverse

       

   

   
   
    <script><br>         var tomato = $('#tomato'), BracketRight = $('.bracketRight'), BracketLeft = $('.bracketLeft'), tomatoLeft = $('.tomatoLeft'), tomatoRight = $('.tomatoRight') , tomatoLeaves = $('.tomatoLeaves'), Buchstaben = $('#ihtText path'), $btnPlay = $('#btnPlay'), $btnSlowMo = $('#btnSlowMo'), $btnReverse = $(' #btnReverse'), tl;<br>         tl = new TimelineMax();<br>         tl.set([tomatoLeft], { xPercent: 23.6 });<br>         tl.set([tomatoLeaves], { xPercent: 41 });<br>         tl.set([Tomate], {<br>             xPercent: 2,<br>             Rotation: 13,<br>             transformOrigin: 'center center'<br>         });<br>         tl.set(tomato, { yPercent: -200 });<br>         tl.set(bracketRight, { xPercent: 200 });<br>         tl.set(bracketLeft, { xPercent: -200 });<br>         tl.to([<br>     KlammerRechts,<br>     KlammerLinks<br> ], 0,3, {<br>     xPercent: 0,<br>     Leichtigkeit: Power4.easeOut<br> }, 0,5).to(Tomate, 0,5, {<br>     yProzent: 0,<br>     Leichtigkeit: Bounce.easeOut<br> }).to(Tomate, 0,2, {<br>     Rotation: 0,<br>     xProzent: -4<br> }).to([<br>     tomatoLeft,<br>     Tomatenblätter<br> ], 0.2, { xPercent: 0 }, 'split').to(tomato, 0.2, {<br>     Rotation: 0,<br>     xPercent: 0<br> }, 'split').to(tomatoRight, 0.2, { xPercent: 2 }, 'split').staggerFrom(letters, 0.01, { autoAlpha: 0 }, 0.03).add('end');<br>         $btnPlay.click(function () {<br>             tl.timeScale(1).seek(0);<br>         });<br>         $btnSlowMo.click(function () {<br>             tl.timeScale(0.2).seek(0.5);<br>         });<br>         $btnReverse.click(function () {<br>             tl.timeScale(1).seek('end').reverse();<br>         });<br>         //@ sourceURL=pen.js<br>     </script>

css代码：

复制代码 代码如下:

 #Einführung
        {
            Höhe: 100vh;
            Breite: 50 %;
            Rand: 0 automatisch;
            Überlauf: versteckt;
        }
        #intro #ihtLogo
        {
            Position: absolut;
            oben: 50 %;
            übrig: 50 %;
            Höhe: 100 %;
            Breite: 50 %;
            transform: Translate(-50%, -70%);
        }
        #intro #ihtText
        {
            Breite: 100 %;
            Position: absolut;
            oben: 50 %;
            Breite: 40 %;
            übrig: 50 %;
            transform: Translate(-50%, 80%);
        }
        .buttons
        {
            Position: absolut;
            unten: 20px;
            links: 20px;
            Listenstil: keiner;
            Rand: 0;
            Polsterung: 0;
            rechts: 20px;
        }
        .button
        {
            float: links;
            Rand rechts: 10px;
            Polsterung: 10px 15px;
            Rand: 1px #ebebeb solid;
            Textdekoration: keine;
            Farbe: #222222;
        }