Heim >Web-Frontend >js-Tutorial >Realisieren Sie coole Animationseffekte basierend auf jquery und svg_jquery

Realisieren Sie coole Animationseffekte basierend auf jquery und svg_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOriginal
2016-05-16 16:28:021768Durchsuche

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:

 

        http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink
            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;
         

 
        http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink
            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">
   
   
   
   
   
   
   
   
   
   
   
   
   
 
       
   

   
   
    <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;
        }
Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn