TweenMax.js 树叶掉落动画和文本分解

最后的落叶

gsap，leaf，gravity

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 3296
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var Leaf = document.getElementById('leaf'),
    mySplitText = new SplitText("#spring", {
        type: "chars"
    }),
    Path1 = [{
        x: 0,
        y: 0
    }, {
        x: 0,
        y: 0
    }, {
        x: 0,
        y: 21.5
    }, {
        x: 1,
        y: 38
    }, {
        x: 5,
        y: 88
    }, {
        x: 70,
        y: 142
    }, {
        x: 145,
        y: 165
    }, {
        x: 230,
        y: 190
    }, {
        x: 330,
        y: 195
    }, {
        x: 360,
        y: 170
    }],
    Path2 = [{
        x: 360,
        y: 170
    }, {
        x: 330,
        y: 195
    }, {
        x: 0,
        y: 320
    }, {
        x: 40,
        y: 220
    }, {
        x: 60,
        y: 150
    }, {
        x: 230,
        y: 350
    }, {
        x: 313,
        y: 310
    }],
    Path3 = [{
        x: 313,
        y: 310
    }, {
        x: 230,
        y: 350
    }, {
        x: 145,
        y: 372
    }, {
        x: 65,
        y: 355
    }],
    Path4 = [{
        x: 65,
        y: 355
    }, {
        x: 145,
        y: 372
    }, {
        x: 205,
        y: 425
    }, {
        x: 250,
        y: 403
    }],
    Path5 = [{
        x: 250,
        y: 403
    }, {
        x: 205,
        y: 425
    }, {
        x: 215,
        y: 430
    }, {
        x: 185,
        y: 440
    }, {
        x: 160,
        y: 447
    }, {
        x: 128,
        y: 450
    }, {
        x: 127,
        y: 450
    }],
    tl = new TimelineMax({
        delay: 2,
        onComplete: function() {
            tl2.play()
        }
    });

TweenLite.set(Leaf, {
    rotation: 90
});
tl.add(function() {
        tl.timeScale(2.5)
    })
    .to(Leaf, 4, {
        bezier: {
            type: "cubic",
            values: Path1,
            autoRotate: true
        },
        ease: Sine.easeInOut
    })
    .fromTo(Leaf, 8, {
        scale: 1,
        immediateRender: false
    }, {
        bezier: {
            type: "cubic",
            values: Path2,
            autoRotate: true
        },
        ease: Sine.easeInOut
    })
    .fromTo(Leaf, 3, {
        scale: -1
    }, {
        bezier: {
            type: "cubic",
            values: Path3,
            autoRotate: true
        },
        ease: Sine.easeInOut
    })
    .fromTo(Leaf, 3, {
        scale: 1
    }, {
        bezier: {
            type: "cubic",
            values: Path4,
            autoRotate: true
        },
        ease: Sine.easeInOut
    })
    .fromTo(Leaf, 2, {
        scale: -1
    }, {
        bezier: {
            type: "cubic",
            values: Path5,
            autoRotate: true
        },
        ease: Sine.easeInOut
    })
    .to(Leaf, 22, {
        rotationX: 770
    }, 0)
    .add(function() {
        tl.timeScale(1)
    }, "wind")
    .to(Leaf, 1, {
        rotationY: 90,
        rotationX: 360,
        opacity: 0,
        x: 500,
        y: '-=50',
        ease: Sine.easeIn
    }, 'wind+=1')
    .staggerFrom(mySplitText.chars, 0.5, {
        x: -100,
        opacity: 0
    }, 0.03, 'wind+=1')

编译

CSS

body {
    background-color: #333;
    margin: 0;
    padding: 5px;
    overflow: hidden;
}
#tree {
    width: 530px;
    height: 600px;
    position: absolute;
    top: -140px;
    left: -200px;
    background: url(/uploads/150701/winter_tree.png);
    background-size: 100% 100%;
}
#tree:before {
    content: "";
    position: absolute;
    width: 400px;
    height: 50px;
    bottom: -30px;
    left: 100px;
    border-radius: 50%;
    box-shadow: 0px 0px 30px black;
    background: black;
    opacity: 0.1;
}
#leaf {
    width: 50px;
    height: 40px;
    position: absolute;
    top: 10px;
    left: 20px;
}
#leaf:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url(http://demosthenes.info/assets/images/leaf.png);
    background-size: 100% 100%;
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}
#autumn {
    color: BLACK;
    opacity: 0.5;
    font-family: 'Oswald', arial;
    font-size: 50px;
    font-size: 10vw;
}
#spring {
    position: absolute;
    color: white;
    font-family: arial;
    font-size: 20px;
    bottom: 120px;
    left: 30px;
}
#floor {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.2);
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: 200px;
}

HTML

最后的落叶

gsap，leaf，gravity

编辑器支持Emmet

快捷键

最后的落叶

gsap，leaf，gravity

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：