Skip to content

Instantly share code, notes, and snippets.

@PhamBaTrungThanh

PhamBaTrungThanh/index.html

Created February 16, 2018 03:47
Show Gist options
  • Save PhamBaTrungThanh/9f1a874b85f2e8ec3afa678ceb368d5b to your computer and use it in GitHub Desktop.
Save PhamBaTrungThanh/9f1a874b85f2e8ec3afa678ceb368d5b to your computer and use it in GitHub Desktop.
Download ZIP
A Vietnamese New Year 1st day simple warm up project
Raw
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment