Javascriptで画像や文字などを徐々に変化させる(表示させたり消したりする)方法

Javascript
本記事ではJavascriptを使って画像などを徐々に変化させる(表示させたり消したりする)方法を紹介します。
(※画像でなくとも文字やボックス等、何でも可能です。)




スポンサーリンク

なぜ画像を徐々に表示させたいか

僕は最近Webアプリ製作にハマっています。
その中で、ボタンを押したときに「正解!」という文字と画像を表示させて徐々に消す設定を実装しようと、色々試行錯誤していました。
その結果僕なりに2つの方法を考えました。
※追記
何か色々書きましたが、試行錯誤の結果できました。
実装例はこちら
javascript_img_change.html

 

styles2.css

 

main2.js

徐々に変化させる2つの方法

色々ネットも参考にさせてもらった部分はあるんですが、以下の2つの方法を今回は紹介しようと思います。
  • opacityの値を徐々に減らす(又は増やす)方法
  • display: none;で消す方法
もちろん、まだ改良の余地はあると思いますが、備忘録代わりに書いておきます。

opacityの値を変化させる方法

opacityは0~1の間で透明度を指定するプロパティです。
0が透明、1が不透明です。
ボタンを押したときにまずは画像を表示させ、そこから「opacityの値を0.01ずつくらい0.01秒間隔で引いていく」という処理を繰り返す事で、徐々に画像を消して行こうと思います。
  1. ボタンを押すと画像が表示される
  2. opacityの値が1から0へと徐々に変化
  3. 画像が消える(消えたように見える)
実際に作ってみたので、まずはボタンを押してみてください。
《実装例》
setTimeoutを使って、一定間隔で繰り返し処理をさせます。
関数の中に入れたsetTimeoutの処理の中にその関数自身を入れるところがポイントです。(この処理はストップウォッチとかでも使いますよね。)
実際のコードは以下です。

display:none;で消す方法

こちらの方法では「徐々に消す」、ではなく、パッ、パッと表示させたり消したりする方法です。
もしかしたらtransitionとか使ったら徐々にできるのかもしれませんので、もしできるようになったら追記しようと思います。
今回はパッ、パッと切り替わります。実装例は以下のようになります。
コードは以下です。こちらもsetTimeoutを使います。
 ※追記
main2.jsファイル内の
「panel.className = “changed”;」の部分を
「panel.className = “hidden”;」に変えればOKです。

改善ポイント・今後の課題

「opacityの値を変化させる方法」では画像をしばらく表示させて、それから徐々に消していきたいです。
setTimeoutを駆使すれば出来るとは思うのですが、連続してボタンを押したときにうまく行ってくれません
多分clearTimeoutの使い方が悪いんだと思ってはいるんですが・・・。
以下が1秒画像表示させた後に、徐々に消していく実装例です。
2回目以降がうまく作動しません。
※追記
色々書いたのですが結局できちゃったので、記事の最初の方でまとめました。気になるのは1回目のクリックと、2回目以降ではパネル出現の方法が違うということですね。hiddenが外れる処理にもtransitionがかかってしまっています。
もしご助言ありましたら宜しくお願い致します。
以上です。

コメント