PhamBaTrungThanh/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Chúc mừng năm mới 2018</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://fonts.googleapis.com/css?family=Pacifico&amp;subset=vietnamese" rel="stylesheet">
    <style>
        body {
            background: #f8f7fa;
        }
        .container {
            width: 100vw;
            height: 100vh;
            position: relative;

        }

        #main_text {
            position: absolute;
            text-transform: uppercase;

        }

        h1 {
            font-size: 4.5rem;
            position: relative;
            overflow: hidden;
            font-family: 'Pacifico', cursive;
        }
        h1 > span.text {
            visibility: hidden;
            overflow: hidden;
            transition: transform 0.8s ease 0.3s;
            display: block;

        }
        h1.show > span.text {
            visibility: visible;
        }
        h1 > span.overlay {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            transition: transform 0.3s ease 0s;
            background: rgb(246, 65, 62);
            transform-origin: center left;
            transform: scaleX(0);

        }
        h1.down {
            margin-left: 200px;
        }
        h1.down > span.overlay {
            background: rgb(36, 55, 193);
        }
        h1 > span.overlay.begin {
            transform: scaleX(1);
        }
        h1 > span.overlay.end {
            transform: scaleX(0);
            transform-origin: center right;
        }


        h1 > span.destroyer {
            position: absolute;
            right: 0;
            top: -2px;
            bottom: -2px;
            width:0;
            border-left: 2px solid transparent;
            display: block;
            background: #f8f7fa;
            transition: width 0.8s ease 0.3s, transform 0.3s ease 0s;
            z-index: 999;
        }
        h1.destroy > span.destroyer {
            border-color: #000000;
            width: 50%;
        }
        h1.destroy > span.text {
            transform: translateX(60%);
        }
        h1.complete > span.text {
            visibility: hidden;
        }
        h1.complete > span.destroyer {
            transform-origin: center center;
            transform: scaleY(0);
        }
    </style>
</head>
<body>
    <div class="cointainer">
        <div id="main_text">
            <h1 class="upp">
                <span class="overlay"></span>
                <span class="destroyer"></span>
                <span class="text">Chúc mừng</span>
            </h1>
            <h1 class="down">
                    <span class="overlay"></span>
                    <span class="destroyer"></span>
                    <span class="text">Năm mới</span>
                </h1>
        </div>
    </div>
    <script language="javascript">
        'use strict';
        (function() {
            window.addEventListener("load", function() {
                var $_text = document.getElementById("main_text"),
                    $_overlay = document.getElementById("overlayer"),
                    showTime = 3000,
                    delay = 300,
                    resetPosition = function() {
                        $_text.style.top = Math.round(Math.random()*( window.innerHeight  - $_text.offsetHeight)) + 'px';
                        $_text.style.left = Math.round(Math.random()*(window.innerWidth - $_text.offsetWidth ))  + 'px';
                    },
                    registerEffects = function(element, index, isLastChild) {
                        var overlay = element.getElementsByClassName("overlay")[0];
                        var text = element.getElementsByClassName("text")[0];
                        var destroyer = element.getElementsByClassName("destroyer")[0];
                        var state = "begin";
                        var counter = 0;
                        overlay.addEventListener("transitionend", function() {
                            if (state === "begin") {
                                state = "show";
                                overlay.classList.remove("begin");
                                overlay.classList.add("end");
                                element.classList.add("show");
                                setTimeout(function() {
                                    element.classList.add("destroy");
                                }, showTime);
                            }
                        });
                        destroyer.addEventListener("transitionend", function() {
                            if (state === "show") {
                                state = "destroy";
                                element.classList.add("complete");
                            }
                            if (state === "destroy") {
                                counter++;
                                if (counter === 2) {
                                    element.classList.remove("show", "destroy", "complete");
                                    overlay.classList.remove("end");
                                    state = "begin";
                                    counter = 0;
                                    if (isLastChild) {
                                        resetPosition();
                                    }
                                    setTimeout(function() {

                                        overlay.classList.add("begin");
                                    }, index * delay + showTime);
                                }

                            }
                        });
                        if (state === "begin") {
                            setTimeout(function() {
                                overlay.classList.add("begin");
                            }, index * delay);

                        }
                    };

                var list = document.getElementsByTagName("h1");
                for (var i = 0; i <= list.length - 1; i++) {
                    registerEffects(list[i], i, i === list.length - 1);
                }


            })

        })(window);

    </script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>Chúc mừng năm mới 2018</title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link href="https://fonts.googleapis.com/css?family=Pacifico&subset=vietnamese" rel="stylesheet">
	<style>
	body {
	background: #f8f7fa;
	}
	.container {
	width: 100vw;
	height: 100vh;
	position: relative;

	}

	#main_text {
	position: absolute;
	text-transform: uppercase;

	}

	h1 {
	font-size: 4.5rem;
	position: relative;
	overflow: hidden;
	font-family: 'Pacifico', cursive;
	}
	h1 > span.text {
	visibility: hidden;
	overflow: hidden;
	transition: transform 0.8s ease 0.3s;
	display: block;

	}
	h1.show > span.text {
	visibility: visible;
	}
	h1 > span.overlay {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	transition: transform 0.3s ease 0s;
	background: rgb(246, 65, 62);
	transform-origin: center left;
	transform: scaleX(0);

	}
	h1.down {
	margin-left: 200px;
	}
	h1.down > span.overlay {
	background: rgb(36, 55, 193);
	}
	h1 > span.overlay.begin {
	transform: scaleX(1);
	}
	h1 > span.overlay.end {
	transform: scaleX(0);
	transform-origin: center right;
	}


	h1 > span.destroyer {
	position: absolute;
	right: 0;
	top: -2px;
	bottom: -2px;
	width:0;
	border-left: 2px solid transparent;
	display: block;
	background: #f8f7fa;
	transition: width 0.8s ease 0.3s, transform 0.3s ease 0s;
	z-index: 999;
	}
	h1.destroy > span.destroyer {
	border-color: #000000;
	width: 50%;
	}
	h1.destroy > span.text {
	transform: translateX(60%);
	}
	h1.complete > span.text {
	visibility: hidden;
	}
	h1.complete > span.destroyer {
	transform-origin: center center;
	transform: scaleY(0);
	}
	</style>
	</head>
	<body>
	<div class="cointainer">
	<div id="main_text">
	<h1 class="upp">
	<span class="overlay"></span>
	<span class="destroyer"></span>
	<span class="text">Chúc mừng</span>
	</h1>
	<h1 class="down">
	<span class="overlay"></span>
	<span class="destroyer"></span>
	<span class="text">Năm mới</span>
	</h1>
	</div>
	</div>
	<script language="javascript">
	'use strict';
	(function() {
	window.addEventListener("load", function() {
	var $_text = document.getElementById("main_text"),
	$_overlay = document.getElementById("overlayer"),
	showTime = 3000,
	delay = 300,
	resetPosition = function() {
	$_text.style.top = Math.round(Math.random()*( window.innerHeight - $_text.offsetHeight)) + 'px';
	$_text.style.left = Math.round(Math.random()*(window.innerWidth - $_text.offsetWidth )) + 'px';
	},
	registerEffects = function(element, index, isLastChild) {
	var overlay = element.getElementsByClassName("overlay")[0];
	var text = element.getElementsByClassName("text")[0];
	var destroyer = element.getElementsByClassName("destroyer")[0];
	var state = "begin";
	var counter = 0;
	overlay.addEventListener("transitionend", function() {
	if (state === "begin") {
	state = "show";
	overlay.classList.remove("begin");
	overlay.classList.add("end");
	element.classList.add("show");
	setTimeout(function() {
	element.classList.add("destroy");
	}, showTime);
	}
	});
	destroyer.addEventListener("transitionend", function() {
	if (state === "show") {
	state = "destroy";
	element.classList.add("complete");
	}
	if (state === "destroy") {
	counter++;
	if (counter === 2) {
	element.classList.remove("show", "destroy", "complete");
	overlay.classList.remove("end");
	state = "begin";
	counter = 0;
	if (isLastChild) {
	resetPosition();
	}
	setTimeout(function() {

	overlay.classList.add("begin");
	}, index * delay + showTime);
	}

	}
	});
	if (state === "begin") {
	setTimeout(function() {
	overlay.classList.add("begin");
	}, index * delay);

	}
	};

	var list = document.getElementsByTagName("h1");
	for (var i = 0; i <= list.length - 1; i++) {
	registerEffects(list[i], i, i === list.length - 1);
	}


	})

	})(window);

	</script>
	</body>
	</html>