metro4
Version:
The front-end framework for Build responsive, mobile-first projects on the web with the first front-end component library in Metro Style
231 lines (211 loc) • 6.05 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link href="../metro/css/metro-all.css?ver=@@b-version" rel="stylesheet">
<title>Happy New Year! - Metro 4 :: Popular HTML, CSS and JS library</title>
<style>
body {
background: transparent url("../images/ny-2.jpg") center center no-repeat;
background-size: cover;
overflow: hidden;
}
.snowflake {
background: white;
border-radius: 50%;
position: absolute;
}
.size-1 {
width: 1px;
height: 1px;
}
.size-2 {
width: 2px;
height: 2px;
}
.size-3 {
width: 3px;
height: 3px;
}
.w2021 {
position: absolute;
top: 150px;
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
right: 0;
left: 0;
}
.ts-2 {
background: transparent url("../images/2snow.png") top left no-repeat;
}
.ts-0 {
background: transparent url("../images/0snow.png") top left no-repeat;
}
.ts-1 {
background: transparent url("../images/1snow.png") top left no-repeat;
}
.w2021 > * {
text-indent: -99999px;
background-size: contain;
width: 200px;
height: 200px;
margin-left: -100px;
}
.w2021 > *:nth-child(1) {
margin-left: 20px;
}
.sub {
position: absolute;
bottom: 4px;
left: 0;
right: 0;
text-align: center;
color: white;
font-size: 64px;
font-weight: 100;
}
.sub > *:not(.space) {
display: inline-block;
position: relative;
}
.sub > .space {
width: 10px;
display: inline-block;
}
#metro {
display: flex;
align-items: flex-start;
position: relative;
padding: 50px;
justify-content: center;
overflow: hidden;
}
#metro .char {
display: inline-block;
background: #ffffff;
color: #282828;
border-bottom: 4px coral solid;
font-size: 48px;
padding: 10px 8px 0;
text-align: center;
box-shadow: 2px 2px 4px #000;
text-transform: uppercase;
font-weight: bold;
margin: 0 4px;
position: relative;
width: 64px;
height: 80px;
transform-origin: 50% 6px;
}
#metro .char::before {
content: "";
position: absolute;
z-index: 2;
width: 8px;
height: 8px;
border-radius: 50%;
background: #39342e;
left: 50%;
top: 6px;
margin-left: -4px;
}
#metro .char.te-odd {
margin-top: 3px;
}
#metro .char.te-even {
}
#metro .ts-M {
animation: skew 2s linear infinite;
}
#metro .ts-e {
animation: skew-reverse 2.2s linear infinite;
}
#metro .ts-t {
animation: skew 3s linear infinite;
}
#metro .ts-r {
animation: skew-reverse 2.8s linear infinite;
}
#metro .ts-o {
animation: skew-reverse 3.2s linear infinite;
}
#metro .ts-4 {
animation: skew 1.9s linear infinite;
}
@keyframes skew {
0% {
transform: skew(-10deg, 10deg)
}
25% {
transform: skew(0deg, 0deg)
}
50% {
transform: skew(8deg, -8deg);
}
75% {
transform: skew(0deg, 0deg);
}
100% {
transform: skew(-10deg, 10deg)
}
}
@keyframes skew-reverse {
0% {
transform: skew(8deg, -8deg)
}
25% {
transform: skew(0deg, 0deg)
}
50% {
transform: skew(-10deg, 10deg);
}
75% {
transform: skew(0deg, 0deg);
}
100% {
transform: skew(8deg, -8deg)
}
}
</style>
</head>
<body class="m4-cloak h-vh-100">
<div class="h-100" id="field">
<div data-role="tokenizer" data-cls-token="char" id="metro">Metro 4</div>
<div class="w2021" data-role="tokenizer">2021</div>
<div class="sub" data-role="tokenizer">New Years Is Soon!</div>
</div>
<script src="../metro/js/metro.js?ver=@@b-version"></script>
<script>
function generateSnow(snowflakes){
var snowflake;
var field = $('#field');
var fieldWidth = field.width(), fieldHeight = field.height();
snowflakes = snowflakes || 40;
for (var i = 0; i < snowflakes; i++) {
snowflake = $("<div>").addClass("snowflake").addClass("size-" + ($.random(1, 3))).appendTo('#field');
snowflake.css({
left: $.random(0, fieldWidth - 1)
});
snowflake.animate({
draw: {
top: [-100, $.random(100, fieldHeight)]
},
dur: $.random(3000, 10000),
onDone: function(){
$(this).remove();
}
})
}
}
$(function(){
generateSnow();
setInterval(function() {
generateSnow();
}, 3000);
})
</script>
</body>
</html>