Réalisez des effets d'animation sympas basés sur jquery et svg_jquery

Aujourd'hui, je vais partager avec vous une superbe animation Web basée sur jquery et svg. L'effet d'animation est très cool. Il y a également des boutons d'animation de relecture, de ralentissement et d'inversion ci-dessous. L'effet est très beau. Jetons un coup d'œil aux rendus :

Code d'implémentation.

code html :

Copier le code Le code est le suivant :

 

       
            version="1.1" id="ihtLogo" x="0" y="0" viewbox="0 0 308.8 152.1" xml:space="preserve"
            activer-background="nouveau 0 0 308,8 152,1">
     
   
   
   
     
               
 
       
            version="1.1" id="ihtText" x="0" y="0" viewbox="0 0 148.2 23" activer-background="nouveau 0 0 148.2 23"
            xml:space="preserve">
   
   
   
   
   
   
   
   
   
   
   
   
 
       

           
• replay

           
• slow motion

           
• reverse

       

   

   
   
    <script><br>         var tomate = $('#tomato'), bracketRight = $('.bracketRight'), bracketLeft = $('.bracketLeft'), tomateLeft = $('.tomatoLeft'), tomateRight = $('.tomatoRight') , TomatoLeaves = $('.tomatoLeaves'), lettres = $('#ihtText path'), $btnPlay = $('#btnPlay'), $btnSlowMo = $('#btnSlowMo'), $btnReverse = $(' #btnReverse'), tl;<br>         tl = nouveau TimelineMax();<br>         tl.set([tomateLeft], { xPercent : 23,6 });<br>         tl.set([tomateLeaves], { xPercent : 41 });<br>         tl.set([tomate], {<br>             xPourcentage : 2,<br>             rotation : 13,<br>             transformOrigin : 'centre centre'<br>         });<br>         tl.set(tomate, { yPercent : -200 });<br>         tl.set(bracketRight, { xPercent : 200 });<br>         tl.set(bracketLeft, { xPercent : -200 });<br>         tl.to([<br>     supportDroite,<br>     supportGauche<br> ], 0,3, {<br>     xPourcentage : 0,<br>     facilité : Power4.easeOut<br> }, 0,5).à(tomate, 0,5, {<br>     yPourcentage : 0,<br>     facilité : Bounce.easeOut<br> }).to(tomate, 0,2, {<br>     rotation : 0,<br>     xPourcentage : -4<br> }).à([<br>     tomateGauche,<br>     tomateFeuilles<br> ], 0,2, { xPercent : 0 }, 'split').to(tomate, 0,2, {<br>     rotation : 0,<br>     xPourcentage : 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代码：

复制代码 代码如下 :

 #intro
        {
            hauteur : 100vh;
            largeur : 50%;
            marge : 0 auto ;
            débordement : caché ;
        >
        #intro #ihtLogo
        {
            position : absolue ;
            haut : 50% ;
            gauche : 50%;
            hauteur : 100%;
            largeur : 50%;
            transformer : traduire(-50%, -70%);
        >
        #intro #ihtText
        {
            largeur : 100 % ;
            position : absolue ;
            haut : 50% ;
            largeur : 40%;
            gauche : 50%;
            transformer : traduire (-50 %, 80 %) ;
        >
        .boutons
        {
            position : absolue ;
            en bas : 20 px ;
            gauche : 20px ;
            style de liste : aucun ;
            marge : 0;
            remplissage : 0 ;
            à droite : 20 px ;
        >
        .bouton
        {
            flotter : gauche ;
            marge droite : 10px ;
            rembourrage : 10px 15px ;
            bordure : 1px #ebebeb solid ;
            décoration de texte : aucune ;
            couleur : #222222;
        >