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

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

实现的代码。

html代码：

代码如下:

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

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

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