Animography's Mobilo Text Editor in SVG

Developer
Size
3,057 Kb
Views
42,504

How do I make an animography's mobilo text editor in svg?

Tap on your keyboard. My whole #codevember project :) Because sequels are always better Animography's Mobilo font chars exported to SVG. . What is a animography's mobilo text editor in svg? How do you make a animography's mobilo text editor in svg? This script and codes were developed by Kittons on 06 September 2022, Tuesday.

Animography's Mobilo Text Editor in SVG Previews

Animography's Mobilo Text Editor in SVG - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Animography's Mobilo Text Editor in SVG</title> <link rel='stylesheet prefetch' href='https://labs.nearpod.com/bodymovin/demo/mobilo_demo/styles/bundle.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="toolbar" id="toolbar"> <div class="title">Animography - Mobilo Text Editor</div> <ul class="characters justification"> <li class="characters__item characters__item--first left"><button class="characters__item__button"></button></li><!-- --><li class="characters__item characters__item--middle center"><button class="characters__item__button"></button></li><!-- --><li class="characters__item characters__item--last right"><button class="characters__item__button"></button></li> </ul> <ul class="characters sizing"> <li class="characters__item characters__item--first size1"><button class="characters__item__button"></button></li><!-- --><li class="characters__item characters__item--middle size2"><button class="characters__item__button"></button></li><!-- --><li class="characters__item characters__item--last size3"><button class="characters__item__button"></button></li> </ul> <ul class="characters"> <li class="characters__item characters__item--color " > <input class="characters__item__colorInput color1" type="color" id="color1"/> </li><!-- --><li class="characters__item characters__item--color"> <input class="characters__item__colorInput color2" type="color" id="color2"/> </li><!-- --><li class="characters__item characters__item--color"> <input class="characters__item__colorInput color3" type="color" id="color3"/> </li> </ul>
</div>
<div class="textBox"> <div id="charsContainer"></div> <div class="bm caret" id="caret">|</div> <input type="text" class="textHelper">
</div> <script src='https://labs.nearpod.com/bodymovin/demo/mobilo_demo/build.js'></script> <script src="js/index.js"></script>
</body>
</html>

Animography's Mobilo Text Editor in SVG - Script Codes CSS Codes

body { background-color: #eee;
}
html,
body { margin: 0px; height: 100%; overflow: hidden;
}
.toolbar { width: 100%; background: #fff; padding: 4px 10px;
}
.characters { display: inline-block; margin-right: 20px; vertical-align: top;
}
.characters__item { border: 1px solid #333333; border-radius: 0; display: inline-block; width: 25px; height: 25px; text-align: center; background-color: #eee;
}
.characters__item--selected { background: #fff;
}
.characters__item--first { border-bottom-left-radius: 2px; border-top-left-radius: 2px;
}
.characters__item--last { border-bottom-right-radius: 2px; border-top-right-radius: 2px;
}
.characters__item--middle { border-left-width: 0; border-right-width: 0;
}
.characters__item--color { border: 0; width: 55px;
}
.characters__item__button { width: 100%; height: 100%; cursor: pointer;
}
.characters__item__colorInput { width: 100%; cursor: pointer;
}
.bm { background-color: transparent; width: 100px; height: 120px; display: inline-block; /*float: left;*/ overflow: hidden; transform: translate3d(0, 0, 0); vertical-align: top; position: absolute; left: 0; top: 0;
}
.bm.char { pointer-events: none;
}
.bm .hoverer { width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0); position: absolute; top: 0; left: 0;
}
.bm .loader { width: 50%; height: 50%; background-color: rgba(0, 0, 0, 0); position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto;
}
.bm svg g { pointer-events: auto;
}
.space { position: absolute; transform: translate3d(0, 0, 0); width: 100px; height: 120px; background-color: rgba(255, 0, 0, 0); pointer-events: none;
}
.line-break { height: 120px; width: 0px;
}
.textBox { position: relative; top: 0; left: 0; overflow-y: auto; overflow-x: hidden; height: calc(100% - 56px); width: 100%;
}
.caret { position: absolute; top: 0; left: 0; background-color: #333333; width: 4px; margin-left: -2px; animation: blink-animation 1.5s steps(5, start) infinite; -webkit-animation: blink-animation 1.5s steps(5, start) infinite;
}
.textHelper { position: absolute; top: 0; left: -100%; /*visibility: hidden;*/ opacity: 0.01;
}
@keyframes blink-animation { to { visibility: hidden; }
}
@-webkit-keyframes blink-animation { to { visibility: hidden; }
}
.title { float: right; line-height: 2em;
}

Animography's Mobilo Text Editor in SVG - Script Codes JS Codes

var BASE_URL = 'https://labs.nearpod.com/bodymovin/demo/mobilo_demo/'; toolbar.init(); textbox.init(); animationProvider.init(); window.onresize = textbox.resize;
Animography's Mobilo Text Editor in SVG - Script Codes
Animography's Mobilo Text Editor in SVG - Script Codes
Home Page Home
Developer Kittons
Username airnan
Uploaded September 06, 2022
Rating 4.5
Size 3,057 Kb
Views 42,504
Do you need developer help for Animography's Mobilo Text Editor in SVG?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Kittons (airnan) Script Codes
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!