はじめに

小学校においてプログラミング教育が新設され、暗記や物まねから脱却して自ら考える能力を養う教育が重要視されています。

他人から進むべきレールを敷いてもらい、改良改善をモットーにひたすら努力するだけでは国際競争に勝てる時代ではなくなり、無から有を生む知力が必要な時代になりました。

世の中のすう勢、プログラミング、絵文字について語り、さらにパスワードの概要、パスワードの決め方、パスワードの遊び方を説明した後にゲーム開始に進みます。

若年期から力を養成

人件費の高騰により機械化やセルフサービスになって味気ない接遇に終始する現状では切ない感じを受けますが、ボーダレスによる国際化を克服する試練として甘んじ、乗り越えていかなければならない現象でしょうか。

そのような中で若年期からシステムの一環を理解し制御するメカニズムに慣れるために『パスワードクイズ』を作りました。

小学校の低学年から利用できるように漢字を少なくしてひらがなを多用しています。

パスワードは多桁に対応できるように配慮しながらも4桁に限定しています。入力ボードのキートップに刻印される文字はアルファベットや数字が一般的ですが、今回は絵文字を使いました。

画像で表示される絵文字は日本が発祥であり、象形文字の特性から言語の壁を乗り越え、世界中の多くの国々で使われています。

絵文字の採用

絵文字はemojiと呼ばれ、絵文字文化として異なる文化圏に根付きつつあり、絵文字によるパスワードは数字の暗証番号よりも記憶しやすい形式と思われます。

自分の経験や嗜好などと関連づけを行えば、忘れにくい特定情報になります。

また、若年層には動物や果物の名称がシステムの安全性に繋がっていることが成長の暁に理解されることでしょう。

パスワードクイズの概要

パスワードは4桁固定で扱い、キーパッドは4行8列のマトリックスを形成し32進数の4桁数字にたとえられます。発生する組み合わせは32*32*32*32＝1,048,576になります。

絵文字は果物、花、野菜、動物から等分に8個ずつ使われています。キーの配列はパスワード設定ごとに変化します。これは入力位置から暗証番号が推定されることを避けるためです。また、絵柄を①から㉜までの丸囲み数字にすることも可能です。

パスワードの決め方

パスワードクイズの開始画面（上図）を見てください。発生組み合わせはあまりにも多く簡単には記憶できにくいです。4つの分野から1個を選ぶと覚え易いでしょう。たとえば、もっとも好きな果物、癒される花、苦手な野菜、家族の干支になっている動物から4つを選ぶと忘れにくいパスワードになりそうです。

セキュリティが低くなりますが同じ絵柄を選ぶことも可能です。4桁そろっていなければエラーメッセージが表示されます。

パスワードクイズの遊び方

パスワードの初期値は、桃-桜-ナス-うさぎに仮り定義されています。パスワード設定を省略して次に進むことも可能です。順を追って説明します。

1. キーの役割
   キーの種類は6種あり、一つ目の32絵文字キーはパソコンキーボードのテンキーに相当し、暗証番号を決めるためにある。2つ目はパスワード登録キーで、パスワードの登録に使う。
   
   

   3つ目はパスワード表示キーで、入力済みパスワードを表示する。4つ目はミスで入力したキーや利用済みキーを取り消して初期状態にして、キートップ表示を①～㉜で表示する。

   5つ目はキートップ表示を絵文字にして4つ目と同等の機能。最後の6つ目は4桁目のパスワードを入力後に入力完了に用いる。

2. パスワードの登録
   このキーにてパスワードを登録する。パスワード表示キーの操作により、決定されたパスワード値がそのままあるいは伏せられた状態でメッセージ欄に表示される。
3. パスワードの表示
   入力されたパスワードの表示/非表示を設定する。
4. キー種別＆クリア指定
   キートップ表示を①～㉜あるいは絵文字で並び替えて表示後にパスワードをリセットする。
5. パスワードの入力
   4桁のパスワードを入力する。入力されたパスワードは絵文字あるいは伏字でパスワード表示欄に表示される。
6. 入力完了
   パスワードの入力完了を通知し、登録されているパスワードと入力されたパスワードの一致を調査する。それぞれの状態に見合ったメッセージが表示される。
7. 遊び方のまとめ
   それぞれの操作において、ガイドメッセージを参考にしてパスワードの入力処理を体験できる。誤操作は最下行のメッセージ欄に表示されるので軌道修正しながら適切な操作を行うことができる。

ゲーム開始

さぁ！ゲーム開始です。キー入力音、エラー警告音が出力されます。適切な音量でお楽しみください。パスワードが不一致の時には、渋く沈んだ表情、合致した時にははしゃいだ表情の動画が表示されます。

まずは、下の画面で4つの絵文字を選び最後に▶を入力してみてください。次、多くは⌨でクリア指定です。その後、👁をクリックしてパスワードを表示してみるとゲームのマスターに繋がるでしょう。

さいごに

パスワードを不用意に他人に漏らして損害を被っている人も多いと聞きます。小さい時から「安全」「安心」「信用」「保安」などセキュリティに関連する知識を理解されることを願っています。

このゲームはセキュリティを考えそれを実体化する一例を示したものです。登録したパスワードが次に変更されるまで記憶される機能は持っていません。パスワードの有効期間は当ページが閲覧されている間だけです。これらの改善は自らの努力で解決されますように。ご意見はコメントを残すでお待ちしております。

プログラマー養成と異なる

最近、プログラミングという言葉がマスコミ上で目にする機会が増え喜ばしい限りです。このブログで関連する出来事を何度か発言したものとしてやっと日の目を浴びてきたのではと安堵しています。

これはプログラミングへの関心が高くなってきたからに違いありません。今や小学校で小型パソコンやタブレットを一人一人に持たせてプログラミング教育を展開していくという文科省の旗振りが功を奏した結果であると言えましょう。

我が国は欧米の先進性を逸早く（いちはやく）取り入れながらも為政者や経営者に都合の良いように巧妙にすり替えられた歴史がありました。以前、短絡的な呼称としてのプログラマーは初心者の部類に区分けされ、SE、プランナー、アナリストは高級エンジニアに位置づけられ、プログラマーの地位や報酬が低く抑えられてきたきらいがありました。

欧米の解説書、解析書、翻訳本を参考にしながら業務に携わってきましたがSystem engineerという用語は見かけたことがありません。

参考にさせていただいた著者のWalter Oney、Peter Norton氏らは自らをプログラマー、ソフトウェアエンジニアとプロフィールで語っていました。

世界の多くの技術者に敬愛を受けている著者がプログラマーなのです。

欧米のプログラマー歴史は深く、世界最初の女性プログラマーと称されるエイダ・ラブレス夫人（Lovelace, Augusta Ada Byron-1815～1852）は坂本龍馬よりも21年早く、渋沢栄一より25年早く生まれています。

そしてadaという言葉は米軍国防省が世界中から公募して完成させた ada 言語（エイダげんご）にその名を残しています。

必要とされている人材評価

太閤殿下の豊臣秀吉は上杉氏の家臣であった直江兼続を引き抜くために自分の収入の数倍に当たる好待遇で誘ったと言われています。

プログラマーの評価が世界標準になり、ビル・ゲイツ並みの高額所得者に迎えられるような力のあるプログラマーの出現を待望しています。

最後に

日本の製造業は先頭を走ってきましたがこんなにも早く諸外国から追いつかれたり、追い抜かれることはないだろうと思っていたことが現実になっています。

他人が考えたことを研究して付加価値を加えて世界を席捲・リードしてきましたが、日本が進めてきたことを多くの国がさらに改良を重ねて市場を奪っていったのでしょう。

安易な物まねによる成功は長続きしない

プログラミング教育はプログラマーを育てる教育にあらず、自ら考えて行動する人材を育てることが目的のようです。世界に先駆けて新しいことを生み出す人材が多く現れることを願っています。

おまけ

➊エイダ夫人とは『人を恋うる歌』にある「バイロン・ハイネの熱なきも…」と歌われた詩人バイロン卿の娘さんです。

❷どこで入手したかわかりませんがWalter Oney氏からメールが届き小躍りして喜んだことがありました。本文をよく読むと、今度、新刊本が出るのでぜひ買って読んでほしいという内容でした。出版社の営業の一環かもしれないと考え、喜びが半減したことを記憶しています。

途中から観た人のためにも

言葉が長いとイライラすることがあり、短縮形を使うとテンポよく話が進むことがあります。それも時によりけりです。ニュースや冠婚葬祭でのあいさつでは多用は禁物です。

「まん延防止等重点措置」のことを「マンボウ」と短縮形で使うのは言葉が軽くなっているといわれても仕方ありません。

新聞などでは最初に正式な言葉で表し以下、〇〇と略記と注意書きしています。テレビでは前に戻って見直すのは難しいです。

途中からスイッチを入れた人のためにも時々、正式名称を使ってもらいたいです。

エンターテインメントの番組はともかく、公式な記者会見で「ヤッパ」、「ヤバい」、「クドカン」、「マエケン」なども多用は止めてもらいたいです。コロナ感染が拡大傾向です。言葉が軽くなっています。「マンボウ」は即刻、止めてください。

新機軸の動くキャッチコピー

動くキャッチコピー第2弾をお届けします。ロダン作・考える人の静かな銅像から一転、軽やかな動きが加えられた次世代のキャッチコピーです。

中央のはじめボタンがくっきり描画されそこをクリックすると、未来のクリエーター・ウェブデザイナーを育てる学習塾のキャッチコピーが現れます。

最後まで閲覧していただいたお礼に、中心部の先生の画像が鮮明になったらそこをクリックして妖艶風な動画を描画申し上げます。

その場所は本当はもっとも見てもらいたいホームページのアドレスを置いておく場所なのです。商売の業績アップの一助になれば幸いです。

動くキャッチコピー

キャッチコピーを再描画するにはブラウザの再ロードボタンをクリックします。

手づまり感を打破する

この頃、紙による表現に手詰まり感がある一方、インターネットを利用する表現は限りない広がりを感じます。いちいち目先の傾向にとらわれるのはどうかと思いますが、大きなうねりを無視すると気が付いてみれば一周遅れとなって取り残されることになります。

コロナ禍で失職の憂き目にあっている人が多いと聞きます。早く元に戻られるように祈っています。

とは言っても人手不足の分野は必ず存在します。当面、需要に応ずるにしても揺るぎない知識、技能、技術を身に着けるべく、IT技術者やウェブデザイナーを目指してはいかがでしょう。

頂上を極めるにはそれなりの努力が必要でしょうが、まずは登山口に行って緒に就くことになります。

本ブログは懇切丁寧とは言い難いですが、指針の一つになりますので閲覧していただきたいです。

電子媒体を活かす

会社や団体組織をアピールする端的なものとしてロゴマークがあります。有力どころはデザイナーに依頼してアピールの高いマークを作ります。今ではスマホを持っていることが一般化しているのでホームページで広報します。

なのにロゴマークは静止したままです。電子媒体を有効利用しないのはもったいないです。このたび、リサージュ曲線、正葉曲線などを基調にした動くロゴマークを作りました。

自前の会社名、キャッチコピーを承ります。ブログの問い合わせにてご連絡ください。

新しい傾向

これまですごろくの上がりのごとく、芸能人や知識人の究極のラスト職業として政治家（多くは県知事）を考えることができまし た。

県知事の元職業として中央官僚、大学教授、芸能人、弁護士、ジャーナリスト、スポーツマンなどが多かったように感じます。

会社や団体組織の長は黙々と中で組織に貢献した者がなるのが通例ですが、知事の場合は違っていたように感じていました。

最近、この傾向が崩れたようで新しい展開です。たたき上げの政策人、政治家がなるというより、著名人が候補に押されても中々、 承諾を受けられないからではないだろうか。

一方、『国家が諸君の為に何をしてくれるかを問うな。諸君が国家の為に何を成し得るかを問いたまえ。』と語って第35代アメリ カ大統領に当選したジョン・F・ケネディが受けた尊敬・敬慕が政治家に向けられなくなったことも一因となったいるようです。

選挙対策側から推薦を受けた著名人が冷徹な考えのもとに安易に立候補しなくなっているのかもしれません。政治の世界で、独裁 者が追放されたのに、後を継ぐ為政者がドングリの背比べから抜け出せず混沌・混乱を繰り返しているところも存在します。それ ほど現状を改革していくことが難しいと言えるでしょう。

’21知事選

多数決、民主主義などは古代ギリシャで芽生え、義務教育では最終的な仕組みとして「貝殻追放」の言葉で習ったと記憶していますが、一筋縄ではいかないようです。テレビの解説番組で取り上げてもらえるよう期待します。

おまけ

古い人間には「貝殻追放」と習いましたがそれは誤訳とか、今は「陶片追放」に改められているそうです。

評価は永遠でない

文書の作り方において、さまざまな表現法を体得すると楽しみが倍加しますが、今回は憂鬱になった話をします。

HTMLではdiv, span, pなどの要素を組み合わせて記事を作成します。重ね書きするときにはposition relative/absoluteを使えば多彩な表現が可能です。

他の手法ではmarginにて負の値を指定して重ね書きを実現することができます。absoluteは絶対的な位置決めを思い起こさせ柔軟性が欠けるのではと考え、marginを多用していましたが、a要素のonClick機能との相性がよくないことがわかりましたので記録に残します。margin指定による重ね書きの評価を最小に変更します。

実現したいこと

a要素によるハイパーリンクは電子媒体が紙媒体を凌駕する絶大な機能の一つです。実現したいことは下図の左に示すように、『図を複 数領域に細分化し指定された領域に応じた表現をする』ことです。

position relative/absoluteによる重ね書き

<Div style="position:relative; width:240px; height:300px;">
<a onclick='s1()'><div id="d1" style="width:240px; height:200px; position:absolute; left:0px;   top:0px;   z-index:20; background:lightcyan;     border:1px solid red;">A</div></a>
<a onclick='s2()'><div id="d2" style="width:240px; height:200px; position:absolute; left:0px;   top:200px; z-index:40; background:palegoldenrod; border:1px solid blue;">B</div></a>
<a onclick='s3()'><div id="d3" style="width:100px; height:230px; position:absolute; left:140px; top:100px; z-index:50; background:lavender; border:2px solid green;">C</div></a>
</Div>
<script type="text/javascript" charset="utf-8">
function s1(){console.log("A(20)");}
function s2(){console.log("B(40)");}
function s3(){console.log("C(50)");}
</script>

margin-left/margin-topによる重ね書き

<Div style="width:240px; height:300px;">
<a onclick='s1()'><div id="d1" style="width:240px; height:200px; z-index:20; background:lightcyan;     border:1px solid red;">A</div></a>
<a onclick='s2()'><div id="d2" style="width:240px; height:200px; z-index:40; background:palegoldenrod; border:1px solid blue;">B</div></a>
<a onclick='s3()'><div id="d3" style="width:100px; height:230px; margin-left:140px; margin-top:-300px; background:lavender; border:2px solid green;">C</div></a>
</Div>
<script type="text/javascript" charset="utf-8">
function s1(){console.log("A(20)");}
function s2(){console.log("B(40)");}
function s3(){console.log("C(50)");}
</script>

期待した結果にならない事

margin-left/margin-topによる重ね書きをして、その領域にa要素にてハイパーリンクを設定したとき、図の右のような結果になりました。具体的には、左図のlightcyan領域の左下部をクリックすると、右labender領域をクリックしたように評価されるのです。加えて、下palegoldenrod領域の左上部をクリックしても同じ結果になります。

以上のことからmarginによる描画とa要素のonclick機能は相性が悪いという結論です。重ね書きはオーソドックスな方法であるposition relative/absoluteを使った方が発展性があるといえます。

アニメーションによる表現

作成内容

『大きな古時計』は作詞・作曲ヘンリー・クレイ・ワークによるアメリカ合衆国のポピュラー・ソングです。かつて公会堂などに大きな柱時計が置いてありましたが、今では見かけなくなりました。

この記事はHtmlで記述されていて画像や歌詞がスクロールする機能はjQueryを使っていますが、時計振り子のスウィングだけはanimationを用いています。振り子は限りなく揺れ動きますが時計の分針、時針に波及しません。正確な時計表示は別の機会になります。

画像とテキストはposition:relativeとposition:absoluteで位置決めされて表現されます。visibilityで表示・非表示を切り替えたりopacityを調整して重ね書きに対応しています。

余白なし画像スクロール描画法

画像を数珠つなぎに連続して横スクロール描画するときや一枚の画像を繰り返して表示するとき、大きな余白が出現してかったるさを覚えます。そのような場合、同じ画像をもう一枚、用意することによって空白をなくすことができます。

画像Aを横にスクロールして連続表示すると同じサイズの空白が生じます。このようなとき、同じ画像Bを時間差で表示させることによって上のような空白のない表現が可能になります。ページ初頭の雲が右に流れるアニメーションも同じ手法を用いています。

サンプルコード

<div id="d1" data-direction="left" data-duration="6000" style="width:600px; height:200px; z-index:30; overflow:hidden;">
  <img src="http://aidesign.lolipop.jp/wp-content/uploads/2021/03/picture30.png" width="600" height="200">
</div>
<div id="d2" data-direction="left" data-duration="6000" style="width:600px; height:200px; margin-top:-200px; z-index:30; overflow:hidden;">
  <img src="http://aidesign.lolipop.jp/wp-content/uploads/2021/03/picture30.png" width="600" height="200">
</div>
<div style="margin-left:-35px;"><img src="IMG/picture30AB.png"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.Marquee/1.6.0/jquery.marquee.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$('#d1').marquee({delayBeforeStart: -6000});
$('#d2').marquee({delayBeforeStart: 0});
</script>

さいごに

当ブログでもjQuery.Marqueeを何度も掲載しています。すぐ上のサンプルコード一部にある8行と9行のjquery.min.jsとjquery.marquee.jsリンクアドレスは貴重な情報になります。ライブラリーのダウンロードを面倒と感じる人には打って付けです。

また、スクロール表現を初心から紐解くにはテキストを流れるように表示するjQueryプラグイン「jQuery.Marquee」が参考になるでしょう。

アニメーション表現例

animation.css使用の具体例です。再実行はブラウザの再ロードボタンをクリックします。

びっくり箱 Jack-in-the-box(zoomIn) ©2021 TacM, Ver0.01

サンプルコード

<head>								<!-- びっくり箱をアニメーション表示 -->
  <meta charset="utf-8">
  <style>
  #container{						/** 画面の左右の中央に表示 **/
	width: 640px;
	margin: 0 auto;
	padding: 0.6em 2em 2em 2em;
	color: mediumvioletred;
	font-size:22px;
	font-weight: bold;
  }
  </style>
  <link rel="stylesheet" href="http://aidesign.lolipop.jp/wp-content/uploads/2021/03/animate.css">		<!--Animate.css(V4.1.1)を読み込む-->
</head>
<div id="container">&emsp;びっくり箱&emsp;Jack-in-the-box(zoomIn)
  <img class="animate__animated animate__zoomIn" style="animation-duration:0.8s; animation-delay:0.2s; animation-iteration-count:3; border:2px solid blue; border-radius:20px; display:block;" src="https://thumb.ac-illust.com/56/56146a30d96665280ff4dd5d52a454b4_t.jpeg" width="480" height="340">
</div>

16行目を細分化して再掲
<img class="animate__animated animate__zoomIn"
 style="animation-duration:0.8s; animation-delay:0.2s; animation-iteration-count:3;
 border:2px solid blue; border-radius:20px; display:block;"
 src="https://thumb.ac-illust.com/56/56146a30d96665280ff4dd5d52a454b4_t.jpeg"
 width="480" height="340">

css使い方を深掘りする

前回、『入学を祝う2021』において、animation.cssを使ったアニメーション10例を取り上げました。バージョン4に強化されたcssは巧妙なアニメーションをたやすく実現させてくれます。ライブラリーとしてのcssはバラエティに富む表現を提供してくれますが、class, styleへの指定で思い通りにならずたいへん悩みました。これからのために記録に残します。

animate.cssには100を超えるclass名が内包されています。そのすべてを解説した記事は見当たりませんが、class名の一部swing, shake, zoom, bounce, fadeなどの意味から機能を類推することができます。

今回、その指定方法が思うように行かず戸惑ったことを以下にまとめました。

一般に、div, span, p要素などで参照するclassやstyleに示された情報の本体は別ファイルで用意されたcssや同一ファイルに定義されたstyleブロック内に存在します。それらはhtml内のdiv, imgで参照されますが個別的に指定されていればこの値が最終的に適用されます。

たとえば、アニメーションの繰り返す回数が永久的(infinite)と定義されていてもhtml内のstyleでanimation-iteration-countが再定義されていればこちらが有効になります。上記例はびっくり箱のアニメーション例としてzoomInを使った例です。

補足説明

animate.cssに定義されているスキルを引き出すに当たり、class名には該当する機能名を指定するに留め、細かい設定はstyleで定義することによって解決しました。animate.cssで定義している繰り返し回数は1～3、遅延秒数は1～5秒です。

cssに規定されていない繰り返し回数：7、遅延秒数：2.6秒を設定するために当初、大いに悩みました。16行目を細分化して再掲に表示したようにanimation-durationなどのパラメーターはstyleに定義します。属性名に続きコロンの後に値を指定します。

アニメーション事情

電子媒体でメッセージを表すとき、動きを入れると豊かな表現になります。今回、animate.cssを用いて小学校入学をお祝いしました。

HTMLにアニメを加えるとき、CSSにanimationプロパティを定義する方法とanimate.cssの中のanimate__から始まるclass名を参照する方法があります。

animationプロパティについて多くの解説記事があふれていますが、animate.cssがバージョン4に更新されバージョン3との互換性がないことからanimate.css使い方の情報不足は否めません。

バージョン3で定義したclass名にanimate__を付加すれば互換性がとれるものもありますが少ないです。バージョン3 animate.cssの解説記事は参考になりますが、バージョン4 animate.cssとリンクしたバージョン3サンプルコードは動作しません。

マイクロソフトが開発したビデオの製作・編集に使用するソフトウェアであるWindows Movie Makerは、画像に切り替え効果を加えた高度な機能を有していましたが、システム的な細工が施されたようで古いソフトウェアを大事に使うことができなくなりました。

そのクォリティーに近づけるべく渾身の力を込めて、バージョン4 animate.cssアニメーションを基礎にしたムービーメーカーを作りましたので公開します。

バージョン4 animate.cssのあらまし

バージョン4 animate.cssについては Animate.css バージョン4がリリース！v3と非互換なので注意！ を参照しました。CSSを参照するにあたり、自分のコードに取り込む場合は圧縮されたanimate.min.css、ドキュメントとして読むにはanimate.cssを参照します。アニメーションclass名は前バージョンと異なりその上、class名の数がかなり増えています。

animate.css(Version4.1.1)のなかのclass名接頭語をサーチしてclass名一覧表を以下に示します。111個が確認されました。

animate.css(Version4.1.1)のclass名一覧表

.animate__animated {}                     .animate__fadeInBottomRight {}        
.animate__animated.animate__infinite {}   .animate__fadeOut {}                  
.animate__animated.animate__repeat-1 {}   .animate__fadeOutDown {}              
.animate__animated.animate__repeat-2 {}   .animate__fadeOutDownBig {}           
.animate__animated.animate__repeat-3 {}   .animate__fadeOutLeft {}              
.animate__animated.animate__delay-1s {}   .animate__fadeOutLeftBig {}           
.animate__animated.animate__delay-2s {}   .animate__fadeOutRight {}             
.animate__animated.animate__delay-3s {}   .animate__fadeOutRightBig {}          
.animate__animated.animate__delay-4s {}   .animate__fadeOutUp {}                
.animate__animated.animate__delay-5s {}   .animate__fadeOutUpBig {}             
.animate__animated.animate__faster {}     .animate__fadeOutTopLeft {}           
.animate__animated.animate__fast {}       .animate__fadeOutTopRight {}          
.animate__animated.animate__slow {}       .animate__fadeOutBottomRight {}       
.animate__animated.animate__slower {}     .animate__fadeOutBottomLeft {}        
.animate__bounce {}                       .animate__animated.animate__flip {}   
.animate__flash {}                        .animate__flipInX {}                  
.animate__pulse {}                        .animate__flipInY {}                  
.animate__rubberBand {}                   .animate__flipOutX {}                 
.animate__shakeX {}                       .animate__flipOutY {}                 
.animate__shakeY {}                       .animate__lightSpeedInRight {}        
.animate__headShake {}                    .animate__lightSpeedInLeft {}         
.animate__swing {}                        .animate__lightSpeedOutRight {}       
.animate__tada {}                         .animate__lightSpeedOutLeft {}        
.animate__wobble {}                       .animate__rotateIn {}                 
.animate__jello {}                        .animate__rotateInDownLeft {}         
.animate__heartBeat {}                    .animate__rotateInDownRight {}        
.animate__backInDown {}                   .animate__rotateInUpLeft {}           
.animate__backInLeft {}                   .animate__rotateInUpRight {}          
.animate__backInRight {}                  .animate__rotateOut {}                
.animate__backInUp {}                     .animate__rotateOutDownLeft {}        
.animate__backOutDown {}                  .animate__rotateOutDownRight {}       
.animate__backOutLeft {}                  .animate__rotateOutUpLeft {}          
.animate__backOutRight {}                 .animate__rotateOutUpRight {}         
.animate__backOutUp {}                    .animate__hinge {}                    
.animate__bounceIn {}                     .animate__jackInTheBox {}             
.animate__bounceInDown {}                 .animate__rollIn {}                   
.animate__bounceInLeft {}                 .animate__rollOut {}                  
.animate__bounceInRight {}                .animate__zoomIn {}                   
.animate__bounceInUp {}                   .animate__zoomInDown {}               
.animate__bounceOut {}                    .animate__zoomInLeft {}               
.animate__bounceOutDown {}                .animate__zoomInRight {}              
.animate__bounceOutLeft {}                .animate__zoomInUp {}                 
.animate__bounceOutRight {}               .animate__zoomOut {}                  
.animate__bounceOutUp {}                  .animate__zoomOutDown {}              
.animate__fadeIn {}                       .animate__zoomOutLeft {}              
.animate__fadeInDown {}                   .animate__zoomOutRight {}             
.animate__fadeInDownBig {}                .animate__zoomOutUp {}                
.animate__fadeInLeft {}                   .animate__slideInDown {}              
.animate__fadeInLeftBig {}                .animate__slideInLeft {}              
.animate__fadeInRight {}                  .animate__slideInRight {}             
.animate__fadeInRightBig {}               .animate__slideInUp {}                
.animate__fadeInUp {}                     .animate__slideOutDown {}             
.animate__fadeInUpBig {}                  .animate__slideOutLeft {}             
.animate__fadeInTopLeft {}                .animate__slideOutRight {}            
.animate__fadeInTopRight {}               .animate__slideOutUp {}               
.animate__fadeInBottomLeft {}                                                   

New Movie Maker

カウントリーダー画面をクリックし多彩な画像切り替え効果をお楽しみください。

100個を超す機能のうち、ほんの10個のアニメーションサンプルですが呼び水としては十分と考えられます。

あとは参照者・利用者の頑張りによるでしょう。不明点はブログを通して問い合わせてください。

追加

最初の画像を左からズームインアニメーションさせるには以下のように指定します。画像アドレスは仮りのものです。animate.cssはアニメーションテクニックの宝庫です。

<img id="p10" class="animate__animated animate__zoomInLeft 3.0s 0.5s 1"
 src="20214-0.png" width="480" height="270" style="border:1px solid navy; display:block;">