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
270 lines (258 loc) • 7.03 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>Test Tokenizer - Metro 4 :: Popular HTML, CSS and JS library</title>
<style>
#example1 {
display: flex;
align-items: flex-start;
position: relative;
background: #3e372d;
padding: 50px;
justify-content: center;
overflow: hidden;
font-size: 32px;
}
#example1 .char {
display: inline-block;
position: relative;
}
#example1 .te-odd {
color: orange;
}
#example1 .te-even {
color: orangered;
}
#example1 .ts-4, #example1 .ts-e {
color: white;
}
#example1 .ts-o {
color: greenyellow;
}
#example1 .ts-s {
color: deepskyblue;
}
#example1 .ts-a {
color: #ffe34a;
}
#example1 .ts-M, #example1 .ts-m {
color: cyan;
}
#example2 {
font-size: 38px;
font-weight: bold;
color: #ffffff;
display: flex;
justify-content: center;
padding: 50px;
background: #3e372d;
position: relative;
}
#example2 .char {
font-weight: bold;
display: inline-block;
width: 48px;
height: 56px;
line-height: 56px;
text-align: center;
text-transform: uppercase;
z-index: 2;
opacity: .8;
}
#example2 .char.te-odd {
background: orangered;
transform: skewY(-20deg);
}
#example2 .char:not(.space).te-even {
background: orange;
transform: skewY(20deg);
}
#example3 {
display: flex;
align-items: flex-start;
position: relative;
background: #3e372d;
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">
<br>
<h1 class="text-center">Tokenizer test page</h1>
<br>
<div id="example1" data-cls-token="char" data-space-symbol=" " data-on-token-create="drawToken"></div>
<br>
<br>
<div id="example2" data-cls-token="char" data-role="tokenizer">
Metro 4
</div>
<br>
<br>
<div id="example3" data-role="tokenizer" data-cls-token="char">
Metro 4
</div>
<br>
<br>
<div id="example4">
Metro4 is Awesome!
</div>
</div>
<script src="../metro/js/metro.js?ver=@@b-version"></script>
<script>
$.animation.duration = 1000;
$.animation.ease = "easeOutBounce";
function drawToken(token){
$(token).css({
top: -100
});
setTimeout(function(){
$.chain([
{
el: token,
draw: {
top: 0
}
},
{
el: token,
draw: {
top: 120
},
defer: 2000
}
])
}, $.random(300, 1000))
}
function a(){
setTimeout(function(){
$('#example1').tokenizer({
textToTokenize: "Build impressive web site with a Metro 4!"
});
b();
}, 5000)
}
function b(){
setTimeout(function(){
$('#example1').tokenizer({
textToTokenize: "Metro 4 is awesome!"
});
a();
}, 5000)
}
$(function(){
$('#example1').tokenizer({
textToTokenize: "Metro 4 is awesome!",
onTokenizerCreate: function(){
a();
}
});
$('#example4').tokenizer({
splitter: ' ',
clsToken: "word",
tokenElement: "div"
}).children().tokenizer({
clsToken: "char",
append: " "
});
})
</script>
</body>
</html>