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

TweenMax.js house building

h5, gsap, house

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

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

HTML
CSS
JavaScript
Result

编译

JavaScript

(function() {
    var fullSVG = document.getElementById("svgout"),
        sun = document.getElementById('sun'),
        bg = document.getElementById('background'),
        bottomShadow = document.getElementById('bottomShadow'),
        shadow = document.getElementById('shadow'),
        earth = document.getElementById('earth'),
        toggleButton = document.getElementById('toggleButton');

TweenMax.set(bg, {
        backgroundColor: "#469CCE"
    });

introTimeline = new TimelineLite();
    introTimeline.from(fullSVG, 1, {
            scale: 0,
            rotation: "120",
            ease: SteppedEase.config(12),
            y: -500
        })
        .staggerFrom('.element', 0.5, {
            scale: 0,
            rotation: "120",
            ease: Back.easeOut.config(1.7),
            y: -500
        }, 0.1)
        .from(sun, 0.51, {
            scale: 0,
            rotation: "100",
            ease: Elastic.easeOut
        })
        .fromTo(shadow, 0.2, {
            opacity: 0,
            ease: Linear.easeNone
        }, {
            opacity: 0,
            ease: Linear.easeNone
        })
        .to(earth, 0.2, {
            y: "0%",
            ease: Linear.easeNone,
            onComplete: floating
        })
        .from(toggleButton, 0.5, {
            scale: 0
        })

function floating() {
        TweenMax.fromTo(shadow, 3, {
            opacity: 0,
            ease: Linear.easeNone
        }, {
            opacity: 0.1,
            ease: Linear.easeNone,
            yoyo: true,
            repeat: -1
        });
        TweenMax.fromTo(earth, 3, {
            y: "0%",
            ease: Linear.easeNone
        }, {
            y: "3%",
            ease: Linear.easeNone,
            yoyo: true,
            repeat: -1
        });
    }

} else {
                TweenMax.to(bg, 0.51, {
                    backgroundColor: "#469CCE",
                    ease: Bounce.easeOut
                });
                TweenMax.to(sun, 0.51, {
                    fill: "#e3be00",
                    scale: 1,
                    rotation: "0",
                    x: "0%"
                });
                TweenMax.to(".windows", 1, {
                    fill: "#975A42",
                    ease: Elastic.easeOut
                });
                TweenMax.to(".vegetation", 1, {
                    fill: "#77a951",
                    ease: Linear.easeOut
                });
                TweenMax.to(".topGrass", 1, {
                    fill: "#b9d668",
                    ease: Linear.easeOut
                });
                TweenMax.to(".greyRoad", 1, {
                    fill: "#b2b2b1",
                    ease: Linear.easeOut
                });
                TweenMax.to(".treeWood", 1, {
                    fill: "#ae663d",
                    ease: Linear.easeOut
                });
                TweenMax.to(".leftWall", 1, {
                    fill: "#C57F42",
                    ease: Linear.easeOut
                });
                TweenMax.to(".windowRims", 1, {
                    stroke: "#AE663D",
                    ease: Linear.easeOut
                });
                TweenMax.to(".leftRoof", 1, {
                    fill: "#F2563B",
                    ease: Linear.easeOut
                });
                TweenMax.to(".rightRoof", 1, {
                    fill: "#F2563B",
                    ease: Linear.easeOut
                });
                TweenMax.to(".frontWall", 1, {
                    fill: "#EFA258",
                    ease: Linear.easeOut
                });
                TweenMax.to(".frontFascia", 1, {
                    fill: "#ECB27B",
                    ease: Linear.easeOut
                });
                TweenMax.to(".door", 1, {
                    fill: "#B65041",
                    ease: Linear.easeOut
                });
                TweenMax.to(".leftSideGrass", 1, {
                    fill: "#6e9e4f",
                    ease: Linear.easeOut
                });
                TweenMax.to(".rightGrassTop", 1, {
                    fill: "#8cb154",
                    ease: Linear.easeOut
                });
                TweenMax.to(".crustLeftTop", 1, {
                    fill: "#96563d",
                    ease: Linear.easeOut
                });
                TweenMax.to(".middleLeftCrust", 1, {
                    fill: "#c67e5c",
                    ease: Linear.easeOut
                });
                TweenMax.to(".topRightCrust", 1, {
                    fill: "#a5732a",
                    ease: Linear.easeOut
                });
                TweenMax.to(".middleRightCrust", 1, {
                    fill: "#5a6498",
                    ease: Linear.easeOut
                });
                TweenMax.to(".middleRightCrust", 1, {
                    fill: "#c89451",
                    ease: Linear.easeOut
                });
            }
        }
    }

document.getElementById("toggleCheckbox").addEventListener("click", toggleBox);

})();

编译

CSS

body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}
#toggleButton {
    margin: 5%;
}
.day-toggle {
    position: absolute;
    right: 0%;
    top: 0%;
}
.container {
    position: absolute;
    height: 100%;
    width: 100%;
    overflow: hidden;
    -moz-transition-property: background-color;
    -o-transition-property: background-color;
    -webkit-transition-property: background-color;
    transition-property: background-color;
    -moz-transition-duration: 1s;
    -o-transition-duration: 1s;
    -webkit-transition-duration: 1s;
    transition-duration: 1s;
}
.switch {
    width: 100px;
    height: 40px;
    display: inline-block;
}
.switch input {
    display: none;
}
.slider {
    position: absolute;
    background-color: white;
    width: inherit;
    height: inherit;
    border-radius: 34px;
    cursor: pointer;
}
.slider:before {
    position: absolute;
    left: 5px;
    top: 5px;
    content: "";
    height: 30px;
    width: 30px;
    border-radius: 50px;
    background-color: #469CCE;
    transition: .4s, background-color 1s linear;
    -webkit-transition: .4s, background-color 1s linear;
    -moz-transition: .4s, background-color 1s linear;
    -o-transition: .4s, background-color 1s linear;
}
input:checked + .slider:before {
    background-color: #2c3e50;
}
input:checked + .slider:before {
    -webkit-transform: translateX(60px);
    -ms-transform: translateX(60px);
    transform: translateX(60px);
}

HTML

<div id="background" class="container">
    
    <svg id="svgout" height='100%' width='100%' viewBox="0 0 550 400" preserveAspectRatio="true">
        <defs>
            <g id="bottomShadow">
                <path fill="#000000" stroke="none" d="
		M 270.5 225.95
		L 127.35 316.65 266.8 400 409.6 309.25 270.5 225.95 Z" />
            </g>
            <g id="Layer52_0_FILL">
                <path class="topGrass" fill="#B9D668" stroke="none" d="
	M 397.85 229.3
	L 397.85 225.6 269.85 152 135.75 228.6 135.75 233.65 262.1 306.55 397.85 229.3 Z" />
            </g>

</g>

</svg>
    <! -- End of SVG file -->
    <! -- Moon/Sun Toggle -->
    <div id="toggleButton" class="day-toggle">
        <div class="sun-icon"></div>
        <label class="switch">
            <input id="toggleCheckbox" type="checkbox">
            <div class="slider"></div>
        </label>
        <div class="cloud-icon"></div>
    </div>
    <! -- Moon/Sun Toggle -->

<! -- End of Container -->
</div>

TweenMax.js house building

h5, gsap, house

编辑器支持Emmet

快捷键

TweenMax.js house building

h5, gsap, house

HTML5 GSAP房屋建造动画

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

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：