基于jquery和svg实现超炫酷的动画特效


Posted in Javascript onDecember 09, 2014

今天给大家分享一款基于jquery和svg超炫的网页动画。这款动画效果非常炫。下面还有重播、慢速、和反向动画按钮。效果非常漂亮。一起看下效果图:

基于jquery和svg实现超炫酷的动画特效

实现的代码。

html代码:

 <div id="intro">

        <svg xmlns="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">

    <style>

        .tomatoLeft, .tomatoRight

        {

            fill: #D74022;

        }

        .bracketLeft, .bracketRight

        {

            fill: #4D4D4F;

        }

        .s2

        {

            fill: none;

            stroke-linecap: round;

            stroke-miterlimit: 10;

            stroke-width: 10;

            stroke: #FFF;

        }

        .tomatoLeaves

        {

            fill: #95D600;

        }

    </style>  

    <polygon points="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"/>

    <polygon points="70.5 152.1 0 81.5 70.5 11 83.2 23.8 25.5 81.5 83.2 139.3 " class="bracketLeft"/>

    <g id="tomato">

      <path d="M139.7 17.2C106 18.3 78.6 45.7 77.5 79.4 76.9 98 84.2 114.9 96.3 127l91-91C175.2 23.9 158.3 16.6 139.7 17.2z" class="tomatoLeft"/>

      <path 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"/>

      <path d="M128.6 10.9c0-1.5 0-3 0.1-4.5 0.1-1.4 0.8-3.1 0.3-4.5 -0.8-2.5-4.3-2.6-5.5-0.3 -1.8 4.5-2.5 9.2-2.4 14 -6.7 3.2-17 2-24-0.2 5.1 4 11.2 6.7 18 7.5 -6.5 3-12.5 7-17.6 11.9 13.7-9.2 32.4-7.6 44.4 3.7 -1.3-4.6-3.5-8.7-6.4-12.3 7.3-5.2 16.3-7.4 25.1-6.3 -7-2.1-14.2-3-21.5-2.8 3.2-2.1 6-4.7 8.3-7.7 -6.3 3.5-11.4 4.1-18.5 4.4C128.8 13.2 128.7 11.6 128.6 10.9" class="tomatoLeaves"/>

    </g>

  </svg>

        <svg xmlns="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">

    <path fill="#D74022" d="M5.3 18.5V19H3.7h-1H1.1v-0.4c0-0.2 0.1-0.4 0.4-0.4 0 0 0.1 0 0.1 0 0.1 0 0.2 0 0.4 0 0.2 0 0.4 0 0.7 0V8.9c-0.2 0-0.4 0-0.5 0 -0.2 0-0.3 0-0.3 0 -0.1 0-0.1 0-0.2 0 0 0-0.1 0-0.1 0 -0.3 0-0.4-0.1-0.4-0.4V8h1.6 1v10.1c0.2 0 0.4 0 0.5 0 0.2 0 0.3 0 0.3 0 0.1 0 0.1 0 0.2 0 0 0 0.1 0 0.1 0C5.2 18.1 5.3 18.3 5.3 18.5zM2.3 4.6C2.3 4.5 2.2 4.4 2.2 4.2c0-0.1 0-0.3 0.1-0.4 0.1-0.1 0.1-0.2 0.2-0.3 0.1-0.1 0.2-0.2 0.3-0.2s0.2-0.1 0.4-0.1c0.1 0 0.3 0 0.4 0.1 0.1 0.1 0.2 0.1 0.3 0.2C4 3.6 4.1 3.7 4.1 3.9 4.2 4 4.2 4.1 4.2 4.2c0 0.1 0 0.3-0.1 0.4C4.1 4.7 4 4.8 3.9 4.9 3.8 5 3.7 5.1 3.6 5.1 3.5 5.2 3.3 5.2 3.2 5.2c-0.1 0-0.3 0-0.4-0.1S2.6 5 2.5 4.9 2.4 4.7 2.3 4.6z"/>

    <path fill="#D74022" d="M14.9 7.6c1.2 0 2.1 0.4 2.8 1.2 0.6 0.8 1 1.8 1 3.1v5.5c0.7 0.1 1.1 0.2 1.3 0.3 0.2 0 0.3 0.2 0.3 0.4V19h-3.5v-7.1c0-1.8-0.8-2.7-2.3-2.7 -1.1 0-2.1 0.5-3 1.6v6.6l0.3 0.1c0.6 0.1 0.9 0.2 1 0.2 0.2 0 0.3 0.2 0.3 0.4V19H7.8V18c0-0.2 0.1-0.4 0.3-0.4l1.3-0.3v-13C8.5 4.2 8 4.1 7.9 4.1c-0.2 0-0.3-0.2-0.3-0.4V2.7h3.8v6.6C12.4 8.2 13.6 7.6 14.9 7.6z"/>

    <path fill="#D74022" d="M32.2 18v0.9h-1.4 -0.2 -0.7c-0.2 0-0.3 0-0.5-0.1 -0.1-0.1-0.2-0.2-0.2-0.4l-0.2-1c-0.3 0.3-0.6 0.5-0.9 0.7 -0.3 0.2-0.6 0.4-0.9 0.5 -0.3 0.1-0.6 0.3-1 0.3 -0.3 0.1-0.7 0.1-1.2 0.1 -0.4 0-0.8-0.1-1.2-0.2s-0.7-0.3-1-0.5c-0.3-0.2-0.5-0.5-0.7-0.9C22 17.1 22 16.6 22 16.1c0-0.4 0.1-0.9 0.4-1.3 0.2-0.4 0.6-0.8 1.2-1.1s1.2-0.6 2.1-0.8c0.9-0.2 1.9-0.3 3.2-0.3v-0.9c0-0.9-0.2-1.5-0.6-2 -0.4-0.4-0.9-0.7-1.6-0.7 -0.5 0-0.9 0.1-1.2 0.2s-0.6 0.3-0.8 0.4c-0.2 0.2-0.4 0.3-0.6 0.4 -0.2 0.1-0.3 0.2-0.5 0.2 -0.1 0-0.2 0-0.3-0.1 -0.1-0.1-0.2-0.2-0.2-0.3l-0.4-0.6c0.6-0.6 1.3-1 2-1.3 0.7-0.3 1.5-0.4 2.4-0.4 0.6 0 1.2 0.1 1.7 0.3 0.5 0.2 0.9 0.5 1.2 0.9 0.3 0.4 0.6 0.8 0.7 1.3 0.2 0.5 0.3 1.1 0.3 1.7v5.6c0.3 0.1 0.9 0.2 1.1 0.2C32 17.6 32.2 17.8 32.2 18zM28.8 13.9c-0.9 0-1.7 0.1-2.3 0.2 -0.6 0.1-1.1 0.3-1.5 0.4 -0.4 0.2-0.7 0.4-0.9 0.7s-0.3 0.5-0.3 0.8c0 0.3 0 0.5 0.1 0.8s0.2 0.4 0.4 0.5c0.2 0.1 0.4 0.2 0.6 0.3 0.2 0.1 0.5 0.1 0.7 0.1 0.3 0 0.7 0 0.9-0.1 0.3-0.1 0.6-0.2 0.8-0.3 0.3-0.1 0.5-0.3 0.7-0.5 0.2-0.2 0.5-0.4 0.7-0.6V13.9z"/>

    <path fill="#D74022" d="M35.5 18.4c-0.5-0.5-0.7-1.2-0.7-2.1V9.4h-1.3c-0.1 0-0.2 0-0.3-0.1S33 9.2 33 9V8.2L34.8 8l0.5-3.4c0-0.1 0.1-0.2 0.1-0.3s0.2-0.1 0.3-0.1h1V8h3.2v1.4h-3.2v6.7c0 0.5 0.1 0.8 0.3 1 0.2 0.2 0.5 0.3 0.9 0.3 0.2 0 0.4 0 0.5-0.1 0.2-0.1 0.3-0.1 0.4-0.2 0.1-0.1 0.2-0.1 0.3-0.2s0.1-0.1 0.2-0.1c0.1 0 0.2 0.1 0.3 0.2l0.6 0.9c-0.3 0.3-0.7 0.6-1.2 0.7 -0.5 0.2-1 0.3-1.5 0.3C36.6 19.1 35.9 18.9 35.5 18.4z"/>

    <path fill="#D74022" d="M48.4 8c0.6 0.2 1.1 0.5 1.5 1s0.7 0.9 1 1.6c0.2 0.6 0.3 1.3 0.3 2.1 0 0.3 0 0.5-0.1 0.6 -0.1 0.1-0.2 0.2-0.4 0.2h-7.4c0 0.7 0.1 1.3 0.3 1.8 0.2 0.5 0.4 1 0.7 1.3 0.3 0.3 0.7 0.6 1.1 0.8 0.4 0.2 0.9 0.3 1.4 0.3 0.5 0 0.9-0.1 1.3-0.2 0.4-0.1 0.7-0.2 0.9-0.4 0.3-0.1 0.5-0.3 0.6-0.4 0.2-0.1 0.3-0.2 0.4-0.2 0.2 0 0.3 0.1 0.4 0.2l0.5 0.7c-0.2 0.3-0.5 0.5-0.9 0.8 -0.3 0.2-0.7 0.4-1.1 0.5 -0.4 0.1-0.8 0.2-1.2 0.3 -0.4 0.1-0.8 0.1-1.2 0.1 -0.8 0-1.5-0.1-2.1-0.4 -0.6-0.3-1.2-0.6-1.7-1.1 -0.5-0.5-0.8-1.1-1.1-1.9 -0.3-0.7-0.4-1.6-0.4-2.6 0-0.8 0.1-1.5 0.4-2.2s0.6-1.3 1-1.8 1-0.9 1.6-1.2c0.6-0.3 1.4-0.4 2.2-0.4C47.2 7.6 47.8 7.7 48.4 8zM44.4 9.9c-0.5 0.5-0.9 1.3-1 2.3h6.1c0-0.5-0.1-0.9-0.2-1.2 -0.1-0.4-0.3-0.7-0.6-1 -0.2-0.3-0.5-0.5-0.9-0.6s-0.7-0.2-1.2-0.2C45.7 9.1 44.9 9.3 44.4 9.9z"/>

    <path fill="#D74022" d="M55 18.3c-0.5-0.6-0.8-1.3-0.8-2.3V9.7h-1.1c-0.1 0-0.3 0-0.4-0.1s-0.2-0.2-0.2-0.4V8.1l1.8-0.3 0.6-3.1c0-0.1 0.1-0.3 0.2-0.3 0.1-0.1 0.2-0.1 0.4-0.1H57v3.6h3v1.9h-3v6.1c0 0.4 0.1 0.6 0.3 0.8 0.2 0.2 0.4 0.3 0.7 0.3 0.2 0 0.3 0 0.4-0.1s0.2-0.1 0.3-0.1c0.1 0 0.2-0.1 0.2-0.1 0.1 0 0.1-0.1 0.2-0.1 0.1 0 0.1 0 0.2 0.1 0.1 0 0.1 0.1 0.2 0.2l0.8 1.3c-0.4 0.3-0.9 0.6-1.4 0.7 -0.5 0.2-1 0.3-1.6 0.3C56.3 19.1 55.6 18.9 55 18.3z"/>

    <path fill="#D74022" d="M69 7.9c0.7 0.3 1.3 0.7 1.8 1.2 0.5 0.5 0.9 1.1 1.1 1.8s0.4 1.5 0.4 2.4c0 0.9-0.1 1.7-0.4 2.4s-0.6 1.3-1.1 1.8 -1.1 0.9-1.8 1.2 -1.5 0.4-2.3 0.4 -1.6-0.1-2.3-0.4 -1.3-0.7-1.8-1.2c-0.5-0.5-0.9-1.1-1.1-1.8s-0.4-1.5-0.4-2.4c0-0.9 0.1-1.7 0.4-2.4s0.6-1.3 1.1-1.8c0.5-0.5 1.1-0.9 1.8-1.2s1.5-0.4 2.3-0.4C67.6 7.5 68.3 7.6 69 7.9zM68.8 16.1c0.5-0.6 0.7-1.6 0.7-2.8 0-1.2-0.2-2.1-0.7-2.8s-1.1-1-2.1-1c-1 0-1.7 0.3-2.1 1 -0.5 0.6-0.7 1.6-0.7 2.8 0 1.2 0.2 2.1 0.7 2.8 0.5 0.6 1.2 1 2.1 1C67.7 17 68.3 16.7 68.8 16.1z"/>

    <path fill="#D74022" d="M92.7 17.7V19H91h-2.7v-7.2c0-0.7-0.2-1.3-0.5-1.6 -0.3-0.4-0.8-0.5-1.4-0.5 -0.3 0-0.5 0-0.8 0.1 -0.2 0.1-0.4 0.2-0.6 0.4s-0.3 0.4-0.4 0.7c-0.1 0.3-0.2 0.6-0.2 0.9v5c0.3 0 0.5 0.1 0.6 0.1 0.2 0 0.3 0 0.3 0.1 0.1 0 0.1 0 0.1 0 0.4 0.1 0.6 0.3 0.6 0.7V19h-1.7 -2.7v-7.2c0-0.8-0.2-1.3-0.5-1.6s-0.8-0.5-1.3-0.5c-0.4 0-0.8 0.1-1.1 0.3 -0.3 0.2-0.7 0.5-1 0.8v6.1c0.3 0 0.5 0.1 0.6 0.1s0.3 0 0.3 0.1c0.1 0 0.1 0 0.1 0 0.4 0.1 0.5 0.3 0.5 0.7V19h-1.7 -2.7 -1.7v-1.3c0-0.4 0.2-0.6 0.6-0.7 0 0 0.1 0 0.1 0 0.1 0 0.2 0 0.3-0.1 0.2 0 0.4-0.1 0.7-0.1V9.8c-0.3 0-0.5-0.1-0.7-0.1 -0.2 0-0.3 0-0.3-0.1 -0.1 0-0.1 0-0.1 0 -0.4-0.1-0.6-0.3-0.6-0.7V7.7h1.7l1.7 0c0.4 0 0.6 0.2 0.7 0.5L77.7 9c0.2-0.2 0.4-0.4 0.6-0.6s0.4-0.3 0.7-0.5c0.2-0.1 0.5-0.2 0.8-0.3 0.3-0.1 0.6-0.1 0.9-0.1 0.7 0 1.3 0.2 1.8 0.6s0.8 0.9 1 1.5c0.2-0.4 0.4-0.7 0.7-1C84.4 8.4 84.7 8.2 85 8c0.3-0.2 0.7-0.3 1-0.4 0.4-0.1 0.7-0.1 1.1-0.1 0.6 0 1.2 0.1 1.7 0.3C89.3 8 89.7 8.2 90 8.6c0.3 0.4 0.6 0.8 0.8 1.3 0.2 0.5 0.3 1.1 0.3 1.8v5c0.3 0 0.5 0.1 0.7 0.1 0.2 0 0.3 0 0.3 0.1s0.1 0 0.1 0C92.5 17 92.7 17.3 92.7 17.7z"/>

    <path fill="#D74022" d="M104.9 17.6v1.3h-1.4 -0.3 -0.9c-0.3 0-0.5 0-0.6-0.1 -0.1-0.1-0.3-0.2-0.3-0.5l-0.2-0.8c-0.3 0.3-0.6 0.5-0.8 0.7 -0.3 0.2-0.6 0.4-0.9 0.5 -0.3 0.1-0.6 0.2-0.9 0.3 -0.3 0.1-0.7 0.1-1.1 0.1 -0.5 0-0.9-0.1-1.3-0.2 -0.4-0.1-0.8-0.3-1-0.6 -0.3-0.3-0.5-0.6-0.7-1 -0.2-0.4-0.2-0.8-0.2-1.3 0-0.4 0.1-0.8 0.3-1.3 0.2-0.4 0.6-0.8 1.1-1.1s1.2-0.6 2.1-0.8 1.9-0.3 3.2-0.3v-0.7c0-0.8-0.2-1.3-0.5-1.7 -0.3-0.4-0.8-0.5-1.4-0.5 -0.4 0-0.8 0.1-1.1 0.2 -0.3 0.1-0.5 0.2-0.8 0.3 -0.2 0.1-0.4 0.2-0.6 0.3 -0.2 0.1-0.4 0.2-0.6 0.2 -0.2 0-0.3 0-0.5-0.1 -0.1-0.1-0.2-0.2-0.3-0.4l-0.5-0.9C96 8 97.5 7.4 99.4 7.4c0.7 0 1.2 0.1 1.8 0.3 0.5 0.2 1 0.5 1.3 0.9 0.4 0.4 0.6 0.8 0.8 1.4 0.2 0.5 0.3 1.1 0.3 1.8v5c0.2 0 0.4 0.1 0.6 0.1s0.2 0 0.2 0C104.7 17 104.9 17.3 104.9 17.6zM100.9 14.1c-0.8 0-1.5 0-2 0.2 -0.5 0.1-1 0.2-1.3 0.4S97.1 15 97 15.2s-0.2 0.4-0.2 0.7c0 0.5 0.1 0.8 0.4 1 0.3 0.2 0.7 0.3 1.1 0.3 0.3 0 0.5 0 0.8-0.1 0.2-0.1 0.5-0.1 0.7-0.2 0.2-0.1 0.4-0.2 0.6-0.4s0.4-0.3 0.6-0.5V14.1z"/>

    <path fill="#D74022" d="M108.1 18.3c-0.5-0.6-0.8-1.3-0.8-2.3V9.7h-1.1c-0.1 0-0.3 0-0.4-0.1s-0.2-0.2-0.2-0.4V8.1l1.8-0.3 0.6-3.1c0-0.1 0.1-0.3 0.2-0.3 0.1-0.1 0.2-0.1 0.4-0.1h1.4v3.6h3v1.9h-3v6.1c0 0.4 0.1 0.6 0.3 0.8 0.2 0.2 0.4 0.3 0.7 0.3 0.2 0 0.3 0 0.4-0.1s0.2-0.1 0.3-0.1c0.1 0 0.2-0.1 0.2-0.1 0.1 0 0.1-0.1 0.2-0.1 0.1 0 0.1 0 0.2 0.1 0.1 0 0.1 0.1 0.2 0.2l0.8 1.3c-0.4 0.3-0.9 0.6-1.4 0.7 -0.5 0.2-1 0.3-1.6 0.3C109.4 19.1 108.7 18.9 108.1 18.3z"/>

    <path fill="#D74022" d="M122.1 7.9c0.7 0.3 1.3 0.7 1.8 1.2 0.5 0.5 0.9 1.1 1.1 1.8s0.4 1.5 0.4 2.4c0 0.9-0.1 1.7-0.4 2.4s-0.6 1.3-1.1 1.8 -1.1 0.9-1.8 1.2 -1.5 0.4-2.3 0.4 -1.6-0.1-2.3-0.4 -1.3-0.7-1.8-1.2c-0.5-0.5-0.9-1.1-1.1-1.8s-0.4-1.5-0.4-2.4c0-0.9 0.1-1.7 0.4-2.4s0.6-1.3 1.1-1.8c0.5-0.5 1.1-0.9 1.8-1.2s1.5-0.4 2.3-0.4C120.7 7.5 121.4 7.6 122.1 7.9zM121.9 16.1c0.5-0.6 0.7-1.6 0.7-2.8 0-1.2-0.2-2.1-0.7-2.8s-1.1-1-2.1-1c-1 0-1.7 0.3-2.1 1 -0.5 0.6-0.7 1.6-0.7 2.8 0 1.2 0.2 2.1 0.7 2.8 0.5 0.6 1.2 1 2.1 1C120.8 17 121.5 16.7 121.9 16.1z"/>

    <path fill="#D74022" d="M134.3 7.8c0.6 0.2 1.1 0.6 1.5 1s0.8 1 1 1.6c0.2 0.6 0.4 1.4 0.4 2.2 0 0.2 0 0.4 0 0.5s-0.1 0.2-0.1 0.3 -0.1 0.1-0.2 0.2c-0.1 0-0.2 0-0.3 0h-7c0.1 1.2 0.4 2 0.9 2.6 0.5 0.5 1.3 0.8 2.2 0.8 0.4 0 0.8-0.1 1.1-0.2s0.6-0.2 0.8-0.3 0.4-0.2 0.6-0.3 0.4-0.2 0.5-0.2c0.1 0 0.2 0 0.3 0.1 0.1 0 0.2 0.1 0.2 0.2l0.8 1c-0.3 0.4-0.6 0.6-1 0.9s-0.8 0.4-1.2 0.6c-0.4 0.1-0.8 0.2-1.2 0.3 -0.4 0.1-0.8 0.1-1.2 0.1 -0.8 0-1.5-0.1-2.2-0.4 -0.7-0.3-1.3-0.6-1.8-1.2 -0.5-0.5-0.9-1.1-1.2-1.9s-0.4-1.6-0.4-2.6c0-0.8 0.1-1.5 0.4-2.2 0.2-0.7 0.6-1.3 1.1-1.8s1-0.9 1.7-1.2c0.7-0.3 1.4-0.4 2.3-0.4C133 7.5 133.7 7.6 134.3 7.8zM130.5 10.1c-0.4 0.4-0.7 1.1-0.9 1.9h5.1c0-0.4 0-0.7-0.1-1 -0.1-0.3-0.2-0.6-0.4-0.8s-0.4-0.4-0.7-0.6 -0.7-0.2-1.1-0.2C131.6 9.4 131 9.7 130.5 10.1z"/>

    <path fill="#D74022" d="M147 15.4c0 0.5-0.1 1-0.3 1.5 -0.2 0.5-0.5 0.9-0.9 1.2 -0.4 0.3-0.9 0.6-1.4 0.8 -0.6 0.2-1.2 0.3-1.9 0.3 -1.4 0-2.8-0.3-3.6-0.6v0 -1.1 -2.1h0.1 0.3 0.9c0.3 0 0.5 0.1 0.5 0.4 0 0.1 0.1 0.4 0.1 1.3 0.6 0.2 1.3 0.2 1.8 0.2 0.3 0 0.6 0 0.8-0.1 0.2-0.1 0.4-0.2 0.6-0.3 0.2-0.1 0.3-0.3 0.3-0.4 0.1-0.2 0.1-0.3 0.1-0.5 0-0.3-0.1-0.5-0.2-0.6 -0.2-0.2-0.4-0.3-0.6-0.4 -0.3-0.1-0.6-0.2-0.9-0.3 -0.3-0.1-0.7-0.2-1-0.3 -0.3-0.1-0.7-0.3-1-0.4 -0.3-0.2-0.6-0.4-0.9-0.6 -0.3-0.2-0.5-0.5-0.6-0.9 -0.2-0.4-0.2-0.8-0.2-1.3 0-0.5 0.1-0.9 0.3-1.3s0.5-0.8 0.8-1.1c0.4-0.3 0.8-0.6 1.3-0.7s1.1-0.3 1.8-0.3c1.1 0 1.7 0.1 3.3 0.6v0 3.2h-0.1 -0.3 -0.9c-0.3 0-0.5-0.1-0.5-0.4 0-0.1-0.1-0.4-0.1-1.2 -0.3-0.1-0.8-0.1-1.3-0.1 -0.5 0-1 0.1-1.3 0.3 -0.3 0.2-0.5 0.5-0.5 0.9 0 0.2 0.1 0.4 0.2 0.6 0.2 0.2 0.4 0.3 0.6 0.4 0.3 0.1 0.6 0.2 0.9 0.3 0.3 0.1 0.7 0.2 1 0.3 0.3 0.1 0.7 0.3 1 0.4s0.6 0.3 0.9 0.6c0.3 0.2 0.5 0.5 0.6 0.8C146.9 14.5 147 14.9 147 15.4z"/>

  </svg>

        <ul class="buttons">

            <li><a id="btnPlay" class="button" href="#">replay</a></li>

            <li><a id="btnSlowMo" class="button" href="#">slow motion</a></li>

            <li><a id="btnReverse" class="button" href="#">reverse</a></li>

        </ul>

    </div>

    <script src='jquery.js'></script>

    <script src='TweenMax.min.js'></script>

    <script>

        var tomato = $('#tomato'), bracketRight = $('.bracketRight'), bracketLeft = $('.bracketLeft'), tomatoLeft = $('.tomatoLeft'), tomatoRight = $('.tomatoRight'), tomatoLeaves = $('.tomatoLeaves'), letters = $('#ihtText path'), $btnPlay = $('#btnPlay'), $btnSlowMo = $('#btnSlowMo'), $btnReverse = $('#btnReverse'), tl;

        tl = new TimelineMax();

        tl.set([tomatoLeft], { xPercent: 23.6 });

        tl.set([tomatoLeaves], { xPercent: 41 });

        tl.set([tomato], {

            xPercent: 2,

            rotation: 13,

            transformOrigin: 'center center'

        });

        tl.set(tomato, { yPercent: -200 });

        tl.set(bracketRight, { xPercent: 200 });

        tl.set(bracketLeft, { xPercent: -200 });

        tl.to([

    bracketRight,

    bracketLeft

], 0.3, {

    xPercent: 0,

    ease: Power4.easeOut

}, 0.5).to(tomato, 0.5, {

    yPercent: 0,

    ease: Bounce.easeOut

}).to(tomato, 0.2, {

    rotation: 0,

    xPercent: -4

}).to([

    tomatoLeft,

    tomatoLeaves

], 0.2, { xPercent: 0 }, 'split').to(tomato, 0.2, {

    rotation: 0,

    xPercent: 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

    </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;

        }
Javascript 相关文章推荐
JS 字符串连接[性能比较]
May 10 Javascript
基于jquery的超简单上下翻
Apr 20 Javascript
jquery multiSelect 多选下拉框
Jul 09 Javascript
jquery.form.js用法之清空form的方法
Mar 07 Javascript
javascritp添加url参数将参数加入到url中
Sep 25 Javascript
javascript实现删除前弹出确认框
Jun 04 Javascript
学习JavaScript设计模式(链式调用)
Nov 26 Javascript
Bootstrap实现下拉菜单效果
Apr 29 Javascript
js querySelector() 使用方法
Dec 21 Javascript
Bootstrap多级菜单的实现代码
May 23 Javascript
详解小程序不同页面之间通讯的解决方案
Nov 23 Javascript
vue路由传参的基本实现方式小结【三种方式】
Feb 05 Javascript
Javascript实现禁止输入中文或英文的例子
Dec 09 #Javascript
JavaScript解析json格式数据简单示例
Dec 09 #Javascript
浅谈页面装载js及性能分析方法
Dec 09 #Javascript
深入分析jquery解析json数据
Dec 09 #Javascript
WEB前端设计师常用工具集锦
Dec 09 #Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
Dec 09 #Javascript
JQuery中使用on方法绑定hover事件实例
Dec 09 #Javascript
You might like
PHP4 与 MySQL 数据库操作函数详解
2006/10/09 PHP
解析link_mysql的php版
2013/06/30 PHP
分享下页面关键字抓取www.icbase.com站点代码(带asp.net参数的)
2014/01/30 PHP
如何解决PHP使用mysql_query查询超大结果集超内存问题
2016/03/14 PHP
PHP常量及变量区别原理详解
2020/08/14 PHP
ExtJS Store的数据访问与更新问题
2010/04/28 Javascript
7个JS基础知识总结
2014/03/05 Javascript
require.js的用法详解
2015/10/20 Javascript
jquery采用oop模式class类的使用示例
2016/01/22 Javascript
Jil,高效的json序列化和反序列化库
2017/02/15 Javascript
Bootstrap栅格系统简单实现代码
2017/03/06 Javascript
Angular4学习笔记之准备和环境搭建项目
2017/08/01 Javascript
浅谈JS 数字和字符串之间相互转化的纠纷
2017/10/20 Javascript
JS正则表达式常见函数与用法小结
2020/04/13 Javascript
VUE动态生成word的实现
2020/07/26 Javascript
[01:24:34]2014 DOTA2华西杯精英邀请赛5 24 DK VS LGD
2014/05/25 DOTA
Django基于ORM操作数据库的方法详解
2018/03/27 Python
windows7 32、64位下python爬虫框架scrapy环境的搭建方法
2018/11/29 Python
python 堆和优先队列的使用详解
2019/03/05 Python
pybind11和numpy进行交互的方法
2019/07/04 Python
对python 中re.sub,replace(),strip()的区别详解
2019/07/22 Python
pytorch使用horovod多gpu训练的实现
2020/09/09 Python
CSS3对背景图片的裁剪及尺寸和位置的设定方法
2016/03/07 HTML / CSS
HTML5离线缓存在tomcat下部署可实现图片flash等离线浏览
2012/12/13 HTML / CSS
eBay荷兰购物网站:eBay.nl
2020/06/26 全球购物
企业授权委托书范本
2014/04/02 职场文书
社区工作者演讲稿
2014/05/23 职场文书
综治维稳工作承诺书
2014/08/30 职场文书
乡镇党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
商铺租房协议书范本
2014/12/04 职场文书
优秀班主任推荐材料
2014/12/17 职场文书
小学语文复习计划
2015/01/19 职场文书
环境卫生整治简报
2015/07/20 职场文书
2015年学校政教工作总结
2015/07/20 职场文书
导游词之临安白水涧
2019/11/05 职场文书
MySQL pt-slave-restart工具的使用简介
2021/04/07 MySQL