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
236 lines (225 loc) • 6.48 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>Tokenizer and Animation - Metro 4 :: Popular HTML, CSS and JS library</title>
<style>
body {
background: #3e372d;
}
#example1 {
display: flex;
align-items: flex-start;
position: relative;
padding: 200px 0;
justify-content: center;
overflow: hidden;
font-size: 32px;
color: #ffffff;
}
#example1 .char {
display: inline-block;
position: relative;
margin: 0 1px;
}
#example1 .space {
margin: 0 4px;
}
.example1 .te-odd {
color: orange;
}
.example1 .te-even {
color: orangered;
}
.example1 .ts-4, #example1 .ts-e {
color: white;
}
.example1 .ts-o, .example1 .ts-j, .example1 .ts-J {
color: greenyellow;
}
.example1 .ts-s, .example1 .ts-w {
color: deepskyblue;
}
.example1 .ts-a, .example1 .ts-i {
color: #ffe34a;
}
.example1 .ts-M, .example1 .ts-m {
color: cyan;
}
#example3 {
display: flex;
align-items: flex-start;
position: relative;
padding: 50px;
justify-content: center;
overflow: hidden;
}
#example3 .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;
}
#example3 .char::before {
content: "";
position: absolute;
z-index: 2;
width: 8px;
height: 8px;
border-radius: 50%;
background: #39342e;
left: 50%;
top: 6px;
margin-left: -4px;
}
#example3 .char.te-odd {
margin-top: 3px;
}
#example3 .char.te-even {
}
#example3 .ts-M {
animation: skew 2s linear infinite;
}
#example3 .ts-e {
animation: skew-reverse 2.2s linear infinite;
}
#example3 .ts-t {
animation: skew 3s linear infinite;
}
#example3 .ts-r {
animation: skew-reverse 2.8s linear infinite;
}
#example3 .ts-o {
animation: skew-reverse 3.2s linear infinite;
}
#example3 .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)
}
}
#example4 .word:not(:nth-child(1)) {
margin-left: 4px;
}
#example4 .char:not(:nth-child(1)) {
margin-left: -4px;
}
</style>
</head>
<body class="m4-cloak">
<div class="container">
<div id="example3" data-role="tokenizer" data-cls-token="char">Metro 4</div>
<div id="example1" data-cls-token="char" data-space-symbol=" " data-on-token-create="drawToken"></div>
<div class="text-center">
<a class="button border-radius-20 warning pl-20 pr-20" href="https://metroui.org.ua/">Get Metro 4</a>
</div>
</div>
<script src="../metro/js/metro.js?ver=@@b-version"></script>
<script>
var n = 0;
var phrases = [
"Metro 4 is awesome component library",
"Built on HTML, CSS, JavaScript",
"Metro 4 contains:",
"Enhanced base styles",
"Over 100 pre-build components",
"JavaScript tools and routines",
"Build-in animation function",
"AJAX routines",
"Metro 4 is awesome",
"Build impressive web with a Metro 4!"
];
$.animation.duration = 1000;
$.animation.ease = "easeOutBounce";
function drawToken(token){
$(token).css({
top: -200,
opacity: 0
});
setTimeout(function(){
$.chain([
{
el: token,
draw: {
top: 0,
opacity: 1
}
},
{
el: token,
draw: {
top: 320,
opacity: 0
},
defer: 2000
}
])
}, $.random(200, 1500))
}
function line(n, timeout){
var text;
if (n === phrases.length) {
n = 0;
}
text = phrases[n];
setTimeout(function(){
$('#example1').removeClass("example1").tokenizer({
textToTokenize: text,
clsTokenizer: n === 0 || n === 8 ? "example1" : "",
onTokenize: function(){
n++;
line(n);
}
});
}, timeout || 5000)
}
$(function(){
line(n, 1);
})
</script>
</body>
</html>