カール・ヘイエルダール良い一日。この短い記事は、いくつかの小さな新しいJavaScriptライブラリー-motionia.jsとconsoleimg.jsの機能をテストすることを目的としています。1つ目はアニメーションの操作用、2つ目は画像をコンソールに出力するためのものです。Motionia.js
Motionia.jsは、アニメーションを操作するためのライブラリです。要素はでアニメーション化されmotionia('target', 'anim')ます。targetは任意のHTML要素（id、class、tag）で、animはアニメーションの名前です。開発者によると、motionia.jsは拡張性を備えた100以上の組み込みアニメーションを提供しています。ライブラリを接続します。<script src="https://cdn.jsdelivr.net/gh/abhiprojectz/motionia/dist/motionia.js" defer></script>
5つのコンテナーを作成します。それぞれにクリックイベントハンドラーを追加します。クリックすると「motionia」関数が呼び出され、アニメーションターゲット（アニメーション要素）、アニメーションの名前、および2つの場合（最初と最後のコンテナー）の追加パラメーター-アニメーション設定が引数として渡されます。<div class="box1" onclick="motionia('.box5', 'slideX', '100px')">slideX</div>
<div class="box2" onclick="motionia('.box3', 'bounceIn')">bounceIn</div>
<div class="box3" onclick="motionia('.box4', 'rollIn')">rollIn</div>
<div class="box4" onclick="motionia('.box2', 'slideIn')">slideIn</div>
<div class="box5" onclick="motionia('.box1', 'slideY', '-100px')">slideY</div>
スタイルを追加：body {
margin: 0;
height: 100vh;
background: radial-gradient(circle, lightgreen, darkgreen);
display: flex;
justify-content: center;
align-items: center;
}
div {
margin: 0 .5em;
width: 100px;
height: 100px;
background: linear-gradient(skyblue, steelblue);
border-radius: 5px;
box-shadow: 0 1px 2px rgba(0,0,0,.8);
display: inherit;
justify-content: center;
align-items: center;
font-family: system-ui;
font-size: 1.2em;
font-weight: bold;
cursor: pointer;
user-select: none;
}
結果：アイデアを得るためにGithubにスターを付けてください。欠点の中には、次の点に注意してください。- 私の計算によれば、33の組み込みアニメーションがあります（たとえば、Animate.cssには97あります）。
- フリップなど、一部のアニメーションは機能しません。
- アニメーションはかなりシンプルです。
- 別のスクリプトで使用しようとすると、次のようになります
Uncaught ReferenceError: motionia is not defined。これは組み込みスクリプトでのみ使用できますが、これは一般的ではありません。 - jQueryで使用されますが、これも一般的な方法ではありません。私はjQueryに対して何もしていませんが、そのような機能は純粋なJSで実装できます。
- セレクターからは、識別子、クラス、タグのみを使用できます。
もちろん、ライブラリを使用するかどうかは、ユーザーが決定します。Consoleimg.js
Consoleimg.js-名前が示すように、これはコンソールに画像を出力するためのライブラリです。適切な画像を見つけてダウンロードし（gifやsvgを含むすべての形式がサポートされています）、Githubからスクリプトをダウンロードして接続します。<script src="consoleimg.min.js"></script>
画像はを使用してコンソールに表示されますconsoleimg.load('image', {size: 320, color: 'transparent'})。ここで、imageは画像の名前、sizeは画像の最大の高さ（デフォルトでは320px）、colorは背景色（デフォルトでは透明）です。consoleimg.load('img.png', {size: 320, color: '#fff'})
結果：
役に立たないが面白い。コードはこちらです。清聴ありがとうございました。