Realize cool animation effects based on jquery and svg_jquery

Today I will share with you a stunning web animation based on jquery and svg. The animation effect is very cool. There are also replay, slow, and reverse animation buttons below. The effect is very beautiful. Let’s take a look at the renderings:

Implementation code.

html code:

Copy code The code is as follows:

 

       
            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">
     
   
   
   
     
     
     
   
 
       
            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'), letters = $('#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([tomato], {<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>     bracketRight,<br>     bracketLeft<br> ], 0.3, {<br>     xPercent: 0,<br>     ease: Power4.easeOut<br> }, 0.5).to(tomato, 0.5, {<br>     yPercent: 0,<br>     ease: Bounce.easeOut<br> }).to(tomato, 0.2, {<br>     rotation: 0,<br>     xPercent: -4<br> }).to([<br>     tomatoLeft,<br>     tomatoLeaves<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代码：

复制代码 代码如下:

 #intro
        {
            height: 100vh;
            width: 50%;
            margin: 0 auto;
            overflow: hidden;
        }
        #intro #ihtLogo
        {
            position: absolute;
            top: 50%;
            left: 50%;
            height: 100%;
            width: 50%;
            transform: translate(-50%, -70%);
        }
        #intro #ihtText
        {
            width: 100%;
            position: absolute;
            top: 50%;
            width: 40%;
            left: 50%;
            transform: translate(-50%, 80%);
        }
        .buttons
        {
            position: absolute;
            bottom: 20px;
            left: 20px;
            list-style: none;
            margin: 0;
            padding: 0;
            right: 20px;
        }
        .button
        {
            float: left;
            margin-right: 10px;
            padding: 10px 15px;
            border: 1px #ebebeb solid;
            text-decoration: none;
            color: #222222;
        }