HTML5/GSAP万圣节场景动画: 蝙蝠 | 南瓜 | 墓地

Halloween Scene Animation, 滴血的标题文本。

gsap, night

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

// Returns a random integer between min (included) and max (included)
function getRandomIntInclusive(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

(function($) {
    $(window).load(function() {
        var pageWidth = window.innerWidth;
        var batOne = document.getElementById("batOne");

var pumpkinOne = document.getElementById("pumpkinOne");
        var pumpkinTwo = document.getElementById("pumpkinTwo");
        var pumpkinThree = document.getElementById("pumpkinThree");
        var headingSVG = document.getElementById("headingSVG");
        var windows = document.getElementById("windows");
        var witch = document.getElementById("witch");

TweenMax.to('.fade-in', 1.5, {
            opacity: 1,
            delay: 0.5
        });
        TweenMax.to('.fade-in-delayed', 1.5, {
            opacity: 1,
            delay: 4
        });

TweenMax.to('body', 1, {
            backgroundColor: '#636363',
            delay: 1.5
        });
        TweenMax.to('.cross', 0.2, {
            autoAlpha: 1,
            delay: 1.5
        });
        TweenMax.to('.pumpkin', 1, {
            autoAlpha: 1,
            delay: 1.5
        });
        TweenMax.to('.grass', 1, {
            opacity: 0.7,
            delay: 1.5
        });

//////////////////
        // Heading
        //////////////////
        var tl = new TimelineMax({
            yoyo: true,
            repeat: -1
        });

tl.staggerTo(".heading-text stop", 1.1, {
            stopColor: '#cc0000',
            cycle: {
                stopColor: ['#F60', '#F4B404', '#ff9999']
            }
        }, 0.2, 0);

var headingTl2 = new TimelineMax({
            yoyo: true,
            repeat: -1
        });

headingTl2.to(headingSVG, 0.75, {
            y: -3
        });

/////////////////////////
        // Castle Windows
        /////////////////////////

var windowsTimeline = new TimelineMax({
            repeat: -1,
            yoyo: true
        });

windowsTimeline.to(windows, 1, {
                opacity: 1
            })
            .to(windows, 1, {
                opacity: 0,
                delay: 1.5
            });

/////////////////////////
        // Bat animation (Boris)
        /////////////////////////

var batTimeline = new TimelineMax({
            repeat: -1,
            delay: 1.5
        });

var batDuration = pageWidth / 150;
        var d = pageWidth + batOne.width;
        var distance = -d;
        var reverseDistance = d;

TweenMax.to(batOne, 0.5, {
            repeat: -1,
            x: -350,
            ease: SteppedEase.config(2)
        });
        batTimeline.to('.bat-one', batDuration, {
                x: distance,
                y: 0,
                z: 0,
                ease: Power0.easeNone,
                y: 0,
                onComplete: batAltitude
            })
            .to('.bat-one', batDuration, {
                x: reverseDistance,
                y: 0,
                z: 0,
                ease: Power0.easeNone,
                y: 0,
                onComplete: batAltitude
            });

function batAltitude(e) {
            $('.bat-one .direction').toggleClass('reverse');

var altitude = getRandomIntInclusive(15, 85) + '%';
            $('.bat-one').css('top', altitude);
        }

/////////////////////////
        // Other Bats
        /////////////////////////

// (Kevin)
        function stopKevinFlapping() {
            kevinFlappingTimeline.timeScale(1.5);
        }

var kevinFlappingTimeline = new TimelineMax();
        var kevinFlyingTimeline = new TimelineMax({
            onComplete: stopKevinFlapping,
            delay: 1.5
        });

kevinFlyingTimeline.to('.kevin', 5, {
            x: 380,
            y: -480,
            scale: 1
        });
        kevinFlappingTimeline.to('.kevin .bat-body', 0.4, {
            repeat: -1,
            x: -196,
            ease: SteppedEase.config(1)
        });

// (Edgar)
        function speedUpEdgarFlapping() {
            edgarFlappingTimeline.timeScale(1.5);
        }

var edgarFlappingTimeline = new TimelineMax();
        var edgarFlyingTimeline = new TimelineMax({
            onComplete: speedUpEdgarFlapping,
            delay: 2
        });

edgarFlyingTimeline.to('.edgar', 5, {
            x: -220,
            y: -390,
            scale: 0.5
        });
        edgarFlappingTimeline.to('.edgar .bat-body', 0.3, {
            repeat: -1,
            x: -196,
            ease: SteppedEase.config(1)
        });

// (Alan)
        function speedUpAlanFlapping() {
            alanFlappingTimeline.timeScale(1.5);
        }

var alanFlappingTimeline = new TimelineMax();
        var alanFlyingTimeline = new TimelineMax({
            onComplete: speedUpAlanFlapping,
            delay: 3
        });

alanFlyingTimeline.to('.alan', 5, {
            x: 150,
            y: -280,
            scale: 0.3
        });
        alanFlappingTimeline.to('.alan .bat-body', 0.3, {
            repeat: -1,
            x: -196,
            ease: SteppedEase.config(1)
        });

// (Poe)
        function speedUpPoeFlapping() {
            poeFlappingTimeline.timeScale(1.5);
        }

var poeFlappingTimeline = new TimelineMax();
        var poeFlyingTimeline = new TimelineMax({
            onComplete: speedUpPoeFlapping,
            delay: 2
        });

poeFlyingTimeline.to('.poe', 5, {
            x: -210,
            y: -430,
            scale: 0.7
        });
        poeFlappingTimeline.to('.poe .bat-body', 0.4, {
            repeat: -1,
            x: -196,
            ease: SteppedEase.config(1)
        });

// (Tennyson)
        function speedUpTennysonFlapping() {
            tennysonFlappingTimeline.timeScale(1.5);
        }

var tennysonFlappingTimeline = new TimelineMax();
        var tennysonFlyingTimeline = new TimelineMax({
            onComplete: speedUpTennysonFlapping,
            delay: 2
        });

tennysonFlyingTimeline.to('.tennyson', 5, {
            x: -100,
            y: -345,
            scale: 0.9
        });
        tennysonFlappingTimeline.to('.tennyson .bat-body', 0.4, {
            repeat: -1,
            x: -196,
            ease: SteppedEase.config(1)
        });

// Bat eyes flashing
        TweenMax.to('.bat-eyes', 3, {
            repeat: -1,
            x: -19,
            ease: SteppedEase.config(1),
            delay: 1
        });

/////////////////////////
        // Pumpkin One animation
        /////////////////////////

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

pumpkinOneTimeline.to(pumpkinOne, 15, {
            x: -806,
            ease: SteppedEase.config(8)
        });

/////////////////////////
        // Pumpkin Two animation
        /////////////////////////

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

pumpkinTwoTimeline.to('.pumpkin-two', 1, {
                opacity: 1,
                delay: 1.5
            })
            .to(pumpkinTwo, 1.5, {
                x: -1394,
                ease: SteppedEase.config(12),
                delay: 2
            })
            .to(pumpkinTwo, 0.5, {
                opacity: 0
            })
            .to(pumpkinTwo, 0.5, {
                opacity: 0,
                delay: 5
            }); // pause the timeline before repeating

////////////////////////////
        // Pumpkin Three animation
        ////////////////////////////

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

pumpkinThreeTimeline.to('.pumpkin-three', 1, {
                opacity: 1,
                delay: 1.5
            })
            .to(pumpkinThree, 1.5, {
                x: -1394,
                ease: SteppedEase.config(12),
                delay: 5
            })
            .to(pumpkinThree, 0.5, {
                opacity: 0
            })
            .to(pumpkinThree, 0.5, {
                opacity: 0,
                delay: 10
            }); // pause the timeline before repeating

////////////////////////////
        // Witchy Poo animation
        ////////////////////////////

var witchTimeline = new TimelineMax({
            repeat: -1,
            delay: 10
        });

witchTimeline.to(witch, 3, {
                x: 1000,
                y: -450,
                ease: Power0.easeNone
            })
            .to(witch, 0.5, {
                opacity: 1,
                delay: 40
            });

});
})(jQuery);

编译

CSS

body {
    background: #000;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
}
.outer {
    z-index: 1;
    overflow: hidden;
    position: relative;
    background: -moz-linear-gradient(top, #3f0800 0%, rgba(86, 4, 4, 0.65) 20%, rgba(149, 98, 98, 0) 55%, rgba(255, 255, 255, 0) 100%);
    background: -webkit-linear-gradient(top, #3f0800 0%, rgba(86, 4, 4, 0.65) 20%, rgba(149, 98, 98, 0) 55%, rgba(255, 255, 255, 0) 100%);
    background: linear-gradient(to bottom, #3f0800 0%, rgba(86, 4, 4, 0.65) 20%, rgba(149, 98, 98, 0) 55%, rgba(255, 255, 255, 0) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#3f0800', endColorstr='#00ffffff', GradientType=0);
}
body,
html,
.outer {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.container {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
}
.fade-in,
.opacity-zero,
.fade-in-delayed {
    opacity: 0;
}
.sprite-container {
    overflow: hidden;
}
.img-responsive {
    max-width: 100%;
    width: 100%;
    height: auto;
}
#headingSVG {
    width: 90%;
    display: block;
    margin: 0 auto;
}
.heading {
    padding-top: 30px;
}
.heading-text {
    fill: url(#MyGradient);
}
.scene-container,
.scene {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 554px;
}
.scene {
    background: url(/uploads/161201/halloween.png) bottom right no-repeat;
    z-index: 5000;
}
.castle-windows {
    background: url(/uploads/161201/castle_windows.png) top left no-repeat;
    width: 398px;
    height: 210px;
    position: absolute;
    right: 28px;
    bottom: 300px;
    z-index: 5001;
}
.grass {
    position: fixed;
    right: 0;
    bottom: -150px;
    background: url(/uploads/161201/grass.png) bottom right no-repeat;
    width: 2274px;
    height: 281px;
    z-index: 6000;
}
.witchy-poo {
    background: url(/uploads/161201/witch.png) top left no-repeat;
    width: 150px;
    height: 124px;
    position: absolute;
    top: 300px;
    left: -160px;
    z-index: -1;
}
.bat-one {
    z-index: 100;
    width: 160px;
    height: 112px;
    position: absolute;
    right: -160px;
    top: 25%;
}
.dark-bat {
    z-index: 0;
    width: 196px;
    height: 89px;
    position: absolute;
    bottom: -100px;
}
.dark-bat .eyes {
    position: absolute;
    top: 32px;
    left: 82px;
    z-index: 1;
    overflow: hidden;
    width: 19px;
    height: 12px;
}
.dark-bat .body {
    position: relative;
}
.dark-bat.kevin {
    right: 900px;
    -moz-transform: rotate3d(0, 0, 1, 25deg) scale(0.5, 0.5);
    -webkit-transform: rotate3d(0, 0, 1, 25deg) scale(0.5, 0.5);
    transform: rotate3d(0, 0, 1, 25deg) scale(0.5, 0.5);
}
.dark-bat.edgar {
    right: 400px;
    -moz-transform: rotate3d(0, 0, 1, -40deg) scale(0.4, 0.4);
    -webkit-transform: rotate3d(0, 0, 1, -40deg) scale(0.4, 0.4);
    transform: rotate3d(0, 0, 1, -40deg) scale(0.4, 0.4);
}
.dark-bat.alan {
    right: 600px;
    -moz-transform: rotate3d(0, 0, 1, 20deg) scale(0.1, 0.1);
    -webkit-transform: rotate3d(0, 0, 1, 20deg) scale(0.1, 0.1);
    transform: rotate3d(0, 0, 1, 20deg) scale(0.1, 0.1);
}
.dark-bat.poe {
    right: 950px;
    -moz-transform: rotate3d(0, 0, 1, -22deg) scale(0.4, 0.4);
    -webkit-transform: rotate3d(0, 0, 1, -22deg) scale(0.4, 0.4);
    transform: rotate3d(0, 0, 1, -22deg) scale(0.4, 0.4);
}
.dark-bat.tennyson {
    right: 1850px;
    -moz-transform: rotate3d(0, 0, 1, -3deg) scale(0.4, 0.4);
    -webkit-transform: rotate3d(0, 0, 1, -3deg) scale(0.4, 0.4);
    transform: rotate3d(0, 0, 1, -3deg) scale(0.4, 0.4);
}
.sml-bats {
    background: url(/uploads/161201/bats_small.png) top left no-repeat;
    width: 63px;
    height: 227px;
    position: absolute;
    bottom: 210px;
    right: 890px;
}
.tiny-bat {
    background: url(/uploads/161201/bat_tiny.png) top left no-repeat;
    width: 25px;
    height: 12px;
    position: absolute;
    bottom: 290px;
    right: 1430px;
}
.direction.reverse {
    -moz-transform: rotate3d(0, 1, 0, 180deg);
    -webkit-transform: rotate3d(0, 1, 0, 180deg);
    transform: rotate3d(0, 1, 0, 180deg);
}
.pumpkin .direction.reverse {
    -moz-transform: rotate3d(0, 1, 0, 180deg);
    -webkit-transform: rotate3d(0, 1, 0, 180deg);
    transform: rotate3d(0, 1, 0, 180deg);
}
.pumpkin-one {
    z-index: 10;
    display: inline-block;
    position: absolute;
    bottom: 32px;
    right: 318px;
    width: 88px;
    height: 90px;
    -moz-transform: rotate3d(0, 0, 1, 8deg) scale(0.7, 0.7);
    -webkit-transform: rotate3d(0, 0, 1, 8deg) scale(0.7, 0.7);
    transform: rotate3d(0, 0, 1, 8deg) scale(0.7, 0.7);
}
.pumpkin-two,
.pumpkin-three {
    display: inline-block;
    position: absolute;
    width: 110px;
    height: 152px;
}
.pumpkin-two {
    z-index: 6000;
    bottom: 107px;
    right: 1310px;
}
.pumpkin-three {
    z-index: 50;
    bottom: 16px;
    right: 620px;
    -moz-transform: rotate3d(0, 0, 1, 8deg) scale(0.7, 0.7);
    -webkit-transform: rotate3d(0, 0, 1, 8deg) scale(0.7, 0.7);
    transform: rotate3d(0, 0, 1, 8deg) scale(0.7, 0.7);
}
.cross {
    position: absolute;
    background: url(/uploads/161201/cross.png) top left no-repeat;
    width: 150px;
    height: 180px;
}
.cross-one {
    z-index: 5050;
    right: 1450px;
    bottom: -40px;
    -moz-transform: rotate3d(0, 0, 1, -4deg) scale(0.4, 0.4);
    -webkit-transform: rotate3d(0, 0, 1, -4deg) scale(0.4, 0.4);
    transform: rotate3d(0, 0, 1, -4deg) scale(0.4, 0.4);
}
.cross-two {
    z-index: 5060;
    right: 1190px;
    bottom: -25px;
    -moz-transform: rotate3d(0, 0, 1, 4deg) scale(0.6, 0.6);
    -webkit-transform: rotate3d(0, 0, 1, 4deg) scale(0.6, 0.6);
    transform: rotate3d(0, 0, 1, 4deg) scale(0.6, 0.6);
}
.cross-three {
    z-index: 5040;
    right: 500px;
    bottom: -40px;
    -moz-transform: rotate3d(0, 0, 1, 4deg) scale(0.4, 0.4);
    -webkit-transform: rotate3d(0, 0, 1, 4deg) scale(0.4, 0.4);
    transform: rotate3d(0, 0, 1, 4deg) scale(0.4, 0.4);
}

HTML

<div class="sprite-container bat-one boris" data-name="Boris">
        <div class="direction">
            <img id="batOne" src="/uploads/161201/bat.png" alt="" />
        </div>
    </div>

<div class="sprite-container dark-bat kevin" data-name="Kevin">
        <div class="direction">
            <div class="eyes">
                <img class="bat-eyes" src="/uploads/161201/bat-eyes-sprite.png" alt="" />
            </div>
            <div class="body">
                <img class="bat-body" src="/uploads/161201/bat-sprite.png" alt="" />
            </div>
        </div>
    </div>

<div class="scene-container">
        <div class="sprite-container pumpkin pumpkin-one opacity-zero">
            <img id="pumpkinOne" src="/uploads/161201/pumpkin-sprite.png" alt="" />
        </div>
        <div class="sprite-container pumpkin-two opacity-zero">
            <div class="direction reverse">
                <img id="pumpkinTwo" src="/uploads/161201/ghost-pumpkin.png" alt="" />
            </div>
        </div>
        <div class="sprite-container pumpkin-three opacity-zero">
            <div class="direction">
                <img id="pumpkinThree" src="/uploads/161201/ghost-pumpkin.png" alt="" />
            </div>
        </div>
        <div class="cross cross-one opacity-zero"></div>
        <div class="cross cross-two opacity-zero"></div>
        <div class="cross cross-three opacity-zero"></div>
        <div class="scene"></div>
        <div class="castle-windows opacity-zero" id="windows"></div>
        <div class="grass opacity-zero"></div>
    </div>
    
</div>

Halloween Scene Animation, 滴血的标题文本。

gsap, night

编辑器支持Emmet

快捷键

Halloween Scene Animation, 滴血的标题文本。

gsap, night

HTML5 GSAP房屋搭建（盖房子）动画和日夜场景切换

HTML5 GSAP 纸飞机动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：