Technology blog from Web Engineer
画像マスクを行うときに画像が画面より大きい場合に画面の中心をマスクする際は、普通に画面サイズの中心に来るような計算ではだめで、それにプラスして比率も必要になってきます。
arc-one.jpで遊びとして実装しているクリックイベント演出のうち「花火」の作り方を紹介。一見複雑そうなアニメーションでも分解したり工夫して組み合わせることで面白いものが出来ます。
モーフィングライブラリがなくても場合によってはアニメーションの組み合わせでモーフィングっぽく見せることが出来ます。今回は雫をモーフィングっぽくアニメーションさせてみました。
カード要素の時はスピナーのような画一的なローダーより、スケルトンスクリーンにするとちょっとかっこよくなるよ
ドラムロールをウェブブラウザでも実現したい！そんな時に使える吸着スクロールの実装方法を紹介します。
いつかどこかで役に立つはず。独自スクロールの作り方も！
ファジィ理論の3回目。台形型は画像遅延や領域内に入ったかどうかの判定をしたりするのにとても相性が良いです。
ファジィ理論の2回目。三角形型をの頂点を使うことで特定の位置に一番近い要素を取得することもできます。サンプルでは集中力をパーセントで表示しています。
ゲームAIや洗濯機、冷蔵庫などで使われるファジィ理論。ウェブ制作とは縁がないと思いがちですが、仕様次第では有効に活用することができます
地味に忘れがちなbyteからKBなどへの変換方法
配列をn個ずつ抜き出すときにfor文で頑張っていた人はArray.sliceを使うとコードが見やすくなりますよ。さらにクラス化すれば使い回しができます。
画像サイズからアスペクト比を計算する
JavaScriptで画像を特定の要素幅に対して比率そのままでフィットさせる
CSSの属性セレクタを使い、HTMLに無駄なクラスの付与を減らす方法
複雑なアニメーションを考える時、動く物体単体だけではなく、要素を隠して時間差で作成するという考え方もあります。
疑似要素を使ってリストをちょっと整形してみる
create.jsを使って簡単な重力ボールを作ってみた。
Google Material Design Lite風のボタンアクションを作ってみた
モバイルファーストだと余りやりませんが、マウスの進入方向でマウスオーバーの要素を差し込む方法。
ウェブサイトで画像の読み込みやajaxでのデータ取得などを処理する場合、ノータイムでの表示は理想的ですが、どうしても多少なりとも時間がかかります。 そういった場合には、処理をしているということを知らせるローディングを実装 […]