🕵️

termynal.js で遊んだ

2021/10/30に公開

CSS

これは、これです

termynal.js
- オリジナルのデモ

使い方

termynal.js, termynal.css を適当なディレクトリに保存する
div#terminal, span[data-ty] を書く

簡単な例

CodePenのURLが不正です

コード例

<!doctype html>
<html lang="en">
    <head>
        <title>termynal.js example</title>
        <meta charset="utf-8">
        <!-- include the termynal stylesheet -->
        <link rel="stylesheet" href="termynal.css">
        <!-- some custom styles for the page -->
        <link href="https://fonts.googleapis.com/css?family=Fira+Mono">
        <style>
            body {
                padding: 0; margin: 0;
                background: #1a1e24;
                width: 100%;
                min-height: 100vh;
                display: -webkit-box; display: -ms-flexbox; display: flex;
                -webkit-box-align: center; -ms-flex-align: center; align-items: center;
                -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
                -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
            }
        </style>
    </head>
    <body>
        <!-- the termynal container -->
        <div id="termynal" data-termynal>
            <span data-ty="input">echo Hello</span>
            <span data-ty="progress"></span>
            <span data-ty>Successfully termynal.js</span>
        </div>

        <!-- include and initialise termynal.js -->
        <script src="termynal.js" data-termynal-container="#termynal"></script>
    </body>
</html>

何かの資料作成に使っていこうと思う

これは、これです

使い方

Discussion