HTML5 GSAP 纸飞机动画

Paper Plane Fly in the sky

h5, GSAP, CSS3, SVG

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 2149
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

var tl = new TimelineMax({
    repeat: -1
});

var height = window.innerHeight;
var width = window.innerWidth;

var numberOfClouds = 40;

var cloud = document.getElementsByClassName("cloud")[0];

for (var i = 0; i < numberOfClouds; i++) {
    var cloudClone = cloud.cloneNode(true);
    document.getElementById("clouds").appendChild(cloudClone);
}

// GET THE ELEMENTS
var plane = document.getElementById("plane");
var clouds = document.getElementsByClassName("cloud");
var nightLetters = document.getElementsByClassName("night");

// REVEAL YOURSELF
TweenMax.set(clouds, {
    visibility: "visible"
});

TweenMax.set(plane, {
    visibility: "visible"
});

tl.add("begin");

function rand(min, max) {
    return ((max - min) * Math.random()) + min;
}

var duration = 20;

tl.staggerFromTo(clouds, duration, {
    cycle: {
        opacity: function() {
            return rand(0, 1)
        },
        scale: function() {
            return rand(.8, 1.2)
        },
        top: function() {
            return rand(-100, height)
        },
        left: function() {
            return rand(width, width * 2)
        }
    }
}, {
    cycle: {
        left: function() {
            return rand(0, -width) - 200
        }
    },
    ease: Linear.easeNone
}, duration / clouds.length, "begin");

TweenMax.fromTo(plane, 4, {
    x: -200,
    y: height - 50,
    rotation: -30
}, {
    x: width / 2 - 200,
    y: height / 2 - height / 20,
    rotation: 0,
    onComplete: planeHover
});

function planeHover() {
    TweenMax.fromTo(plane, 4, {
        y: height / 2 - height / 20,
        rotation: 0
    }, {
        y: height / 2 + height / 20,
        rotation: 20,
        repeat: -1,
        yoyo: true,
        ease: Sine.easeInOut
    });

TweenMax.fromTo(plane, 2, {
        rotation: 0
    }, {
        rotation: 10,
        repeat: -1,
        yoyo: true,
        ease: Sine.easeInOut
    });

TweenMax.fromTo(plane, 3, {
        x: width / 2 - 200
    }, {
        x: width / 2,
        repeat: -1,
        yoyo: true,
        ease: Sine.easeInOut
    });
}

TweenMax.to("#f", 1, {
    scale: 1.5,
    ease: Bounce.easeOut
});

TweenMax.set("body", {
    backgroundColor: "hsl(100%,100%,100%)"
});
TweenMax.to("body", 60, {
    backgroundColor: "hsl(+360_cw,50%,50%)",
    ease: Linear.easeNone
});

编译

CSS

#fly {
    color: white;
    /*text-shadow: #777777 2px 2px;*/
    
    font-size: 60px;
    font-family: 'Ubuntu', sans-serif;
    /*font-family: 'Courgette', cursive;*/
    
    position: absolute;
    bottom: -10px;
    left: 0;
    white-space: nowrap;
}
#fly,
#night {
    background: rgba(0, 0, 0, .1);
}
#fly div,
#night div {
    display: inline-block;
}
#fly div:nth-child(1),
#night div:nth-child(1) {
    background: rgba(0, 0, 0, .2);
    padding: 2px;
    transform: rotate(5deg) scale(1.3);
}
#night div:nth-child(1) {
    padding: 2px 10px;
    transform: rotate(-5deg) scale(1.3);
}
#night {
    color: white;
    /*text-shadow: #777777 2px 2px;*/
    
    font-size: 60px;
    font-family: 'Ubuntu', sans-serif;
    /*font-family: 'Courgette', cursive;*/
    
    position: absolute;
    top: 0;
    right: 0;
    white-space: nowrap;
}
.cloud,
.plane {
    visibility: hidden;
}
.cloud {
    position: absolute;
}
.plane {
    position: absolute;
    left: 100px;
    height: 100px;
    width: 100px;
    transform: translateY(100px);
}
.cloud--eyeless--filled__border {
    stroke: rgba(255, 255, 255, .5);
}
.cloud--eyeless--filled {
    fill: rgba(255, 255, 255, .1);
}
html {
    background-image: radial-gradient(circle at 50% 100%, whitesmoke 0, skyblue 100%);
    min-height: 100vh;
}
body {
    background-image: radial-gradient(circle at 50% 50%, transparent 0, transparent 75%, rgba(0, 0, 0, .2) 100%);
    margin: 0;
    overflow: hidden;
    min-height: 100vh;
}

HTML

Paper Plane Fly in the sky

h5, GSAP, CSS3, SVG

编辑器支持Emmet

快捷键

Paper Plane Fly in the sky

h5, GSAP, CSS3, SVG

HTML5 Vue.js+D3.js+GSAP交互式机场飞行距离演示动画

HTML5 GSAP带彩色碎片（纸屑）化特效的文本打字动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：