html要素の背景色が変化するアニメーションをCSSで(無理やり)実装する

CSSによるアニメーションについて CSSではanimationプロパティを利用することによって、JavaScriptを使うことなく、HTML要素にアニメーションを付与することができる。 CSSアニメーションの概要は以下の記事を参考にさせていただいた。 今回作りたいもの 今回、以下のような流れでアニメーションする要素を作りたい。 要素の左端から背景色がだんだん元々の背景色Aから色B変わっていき、背景全体が色Bになる。この時、色Aと色Bの境界はグラデーションにする。 背景全体が色Bのまましばらく維持する。 要素の左端から背景色がだんだん色Bから色Aに変わっていき、背景全体が色Aにもどる。この時、色Bと色Aの境界はグラデーションにする。 少し調べてみると、グラデーションは<gradient>データ型を利用すれば問題なさそうだった。問題は、グラデーションの境界位置をアニメーションする部分である。以下のように、ただ単に0%と100%のkeyframeを指定しただけでは、思ったようなアニメーションにならなかった。 See the Pen wrong case by kouya17 (@kouya17) on CodePen. 私の知識ではスマートなやり方が分からなかったので、keyframeを0%から100%まですべて指定する形で(無理やり)実装することにした。 keyframes生成用のpythonスクリプトを作成する pythonで、以下のようなkeyframes生成用のプログラムを作成した。 このスクリプトによって生成したテキストをkeyframesとしてCSSに貼り付けると、以下のようなアニメーションになる。 See the Pen linear by kouya17 (@kouya17) on CodePen. とりあえずやりたいことは出来た。しかし、完成したアニメーションを見ると、動きにメリハリがない。アニメーションの進行具合はCSSの`animation`要素の`animation-timing-function`プロパティを設定すればいじることができる。 ただ、今回のパターンだと、うまく設定できないようだ。下の例はanimation-timing-functionプロパティをlinearとease-in-outにそれぞれ設定したものを並べた例である。それぞれのアニメーションの進行具合に違いが生じるはずだが、特に差がない。 See the Pen linear and ease-in-out by kouya17 (@kouya17) on CodePen. 先ほど作成したpythonスクリプトを修正して、イージングの要素も取り入れることにする。 イージングの要素を実装する イージングの要素を実装するには、3次ベジェ曲線について把握しておく必要がある。ベジェ曲線については以下の記事を参考にさせていただいた。 pythonでベジェ曲線生成クラスを作成する pythonでベジェ曲線を生成するためのクラスを以下のように作成した。 上のスクリプトを実行すると p0=[0,0], p1=[0,1], p2=[1,0], p3=[1,1] とした時の3次ベジェ曲線が生成される。グラフにプロットすると以下のような曲線になる。 keyframes生成用のpythonスクリプトを修正する 先ほど作成したkeyframes生成用のスクリプトにベジェ曲線生成用クラスを組み込む。組み込んだ後のスクリプトは以下のようになる。 このスクリプトを使って、 p0=[0,0], p1=[0,0....

February 7, 2021 · 1 min

サイトをスマホで表示したとき下端にメニューバーが表示されるようにする

スマホの場合は、画面下端の方が圧倒的にタップしやすく、スマホアプリは大体画面下部に重要なナビゲーションが並んでいる。 本サイトもそれに倣って改修する。 環境 Django v2.1.4 Bootstrap v4.2.1 スマホのみに表示する Bootstrapの機能を使う。 以下のようにHTMLに記載すれば、スマホ(画面サイズ768px未満)の場合のみ表示される。 <div class="d-block d-sm-none">スマホのみ表示</div> iPhone8の画面サイズで表示すると以下のように最下部に"スマホのみ表示"というテキストが表示されるが、 iPadの画面サイズで表示すると"スマホのみ表示"というテキストが表示されなくなる。 参考 表示ユーティリティ~Bootstrap4移行ガイド 下端に固定する CSSで実装する 表示位置を絶対位置で指定する。 以下のようにCSSで指定することで画面下端に要素を固定できる。 /* スマホ用画面下端メニュー */ .footer-menu-bar { position: fixed; /* 要素の位置を固定する */ bottom: 0px; /* 絶対位置を指定する(下0px) */ } ただ、この方法だと他コンテンツと重なって表示されてしまうので他の用途に使う場合は注意。(今回の用途としては重なっても問題なしとしている) 参考 【css】フッターをページ下部に固定する方法【お手軽コピペ】 | Pで作業軽減しましょ 横並びでリスト表示する Bootstrapの機能を使ってリスト表示を実装する。 HTMLを以下のように変更する。 <div class="d-block d-sm-none">スマホのみ表示</div> ↓ <div class="d-sm-none d-block footer-menu-bar w-100 border-top"> <div class="row m-2"> <div class="col"> TOP </div> <div class="col"> 検索 </div> <div class="col"> タグ </div> </div> </div> 表示は以下のようになる。...

May 31, 2020 · 2 min

Vue.jsでローディング表示を実装する

ローディング表示モジュールの調査 vue.jsでローディング表示を行う場合、ローディング表示に関係するモジュールについて調査する。 出来れば、 実装が簡単 よく見かけるような見た目(独自性がない) メンテされている という条件にあてはまるものを採用したい。 調べた結果を以下の表にまとめた。 名前 種類 GitHub Star 最終更新(2020/05/06時点) 備考 vue-loading Vueコンポーネント 2018/12/22 紹介している記事が多い vue-spinner Vueコンポーネント 2017/10/07 Vue2.0をサポートしていない Single Element CSS Spinners css 2019/12/09 よく見かける見た目 vue-loading-overlay Vueコンポーネント 2020/04/18 全画面に表示するらしい vue-wait Vueコンポーネント 2019/10/08 だいぶ機能がリッチそう ajaxload.info gif - - よく見かける見た目 調べて出てきた候補は以上。...

May 6, 2020 · 1 min