TECH BOX

Technology developer's blog

#codepenの一覧

CSSでスケルトンスクリーンを表現する

カード要素の時はスピナーのような画一的なローダーより、スケルトンスクリーンにするとちょっとかっこよくなるよ

吸着スクロールの実装

ドラムロールをウェブブラウザでも実現したい!そんな時に使える吸着スクロールの実装方法を紹介します。

独自スクロールの実装

いつかどこかで役に立つはず。独自スクロールの作り方も!

ファジィ理論 〜台形型〜

ファジィ理論の3回目。台形型は画像遅延や領域内に入ったかどうかの判定をしたりするのにとても相性が良いです。

ファジィ理論 〜三角形型〜

ファジィ理論の2回目。三角形型をの頂点を使うことで特定の位置に一番近い要素を取得することもできます。サンプルでは集中力をパーセントで表示しています。

ファジィ理論の概要と傾斜型

ゲームAIや洗濯機、冷蔵庫などで使われるファジィ理論。ウェブ制作とは縁がないと思いがちですが、仕様次第では有効に活用することができます

byteをKBやMBなど適切な単位に変換する

地味に忘れがちなbyteからKBなどへの変換方法

配列をn個ずつ抜き出す

配列をn個ずつ抜き出すときにfor文で頑張っていた人はArray.sliceを使うとコードが見やすくなりますよ。さらにクラス化すれば使い回しができます。

アスペクト比の求め方

画像サイズからアスペクト比を計算する

画像を特定のサイズにフィットさせる

JavaScriptで画像を特定の要素幅に対して比率そのままでフィットさせる

属性セレクタや疑似要素を使って無駄なタグやクラスの付与などを減らす

CSSの属性セレクタを使い、HTMLに無駄なクラスの付与を減らす方法

CSS3のみで時間差を使いアニメーションを作成する

複雑なアニメーションを考える時、動く物体単体だけではなく、要素を隠して時間差で作成するという考え方もあります。

疑似要素でリスト整形

疑似要素を使ってリストをちょっと整形してみる

重力ボールを作ってみた

create.jsを使って簡単な重力ボールを作ってみた。

Google Material Design Lite風ボタンアクション

Google Material Design Lite風のボタンアクションを作ってみた

マウスの進入方向によってオーバーレイ要素を追随させる

モバイルファーストだと余りやりませんが、マウスの進入方向でマウスオーバーの要素を差し込む方法。

ローディングの実装

ウェブサイトで画像の読み込みやajaxでのデータ取得などを処理する場合、ノータイムでの表示は理想的ですが、どうしても多少なりとも時間がかかります。 そういった場合には、処理をしているということを知らせるローディングを実装 […]