Today we are sharing a Web animation based on jquery and SVG super dazzle. The animation works very well. There are replay, slow, and reverse animation buttons below. The effect is very beautiful. Take a look at the effect chart:
The code that is implemented.
HTML code:
Copy Code code as follows:
<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 one 308.8 81.5" class= "Bracketright"/>
<polygon points= "70.5 152.1 0 81.5 70.5 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 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 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" cl ass= "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 1 6.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" 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.4v19h 7.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 16.6 16.1c0-0.4 0.1-0.9 0.4-1.3 .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-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. The 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.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 7.6 7.9zm68.8 68.3 16.1c0.5-0.6 0.7-1.6 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 1c6 7.7 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 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 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 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 0.2 104.9 17.3 104.9 17.6zm100.9 14.1c-0.8 0-1.5 0-2- 0.5 0.1-1 0.2-1.3 0.4s97.1 the 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.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 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 1-1c-1 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.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. 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 = $ (' #btnPl Ay '), $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 code:
Copy Code code as follows:
#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;
}
