4:3、16:9のサイズ一覧

たまに必要になってその度に検索していたので作ってみた。
幅を4:3 or 16:9で総当りして、割り切れる高さを算出。

2018/7/10追記
Codepenをアップデートしました。

2016/11/29追記
UIを作りました。

幅と高さからアスペクト比を調べる場合はこちら

See the Pen aspect ratio calc by phantom4 (@phantom4) on CodePen.


CodePenで見る

以下は、幅1〜1280のときの4:3と16:9のリスト
続きを読む 4:3、16:9のサイズ一覧

[js] スマートフォンのアドレスバーを、コンテンツの高さが足りないときでも非表示にする(改良版)

前回から改良したので、別記事にしました。
基本的な処理はほとんど変わっていませんが少し改良しています。

  • スクロールの判定方法を変更
  • アドレスバーが消えたときのイベントが取得できるようになった

続きを読む [js] スマートフォンのアドレスバーを、コンテンツの高さが足りないときでも非表示にする(改良版)

ハッシュ変更を検知

ライブラリに依存しないハッシュ変更を検知するスクリプト。
ほとんど出番はないと思われ。


2013/1/18追記
CoffeeScriptも少しかじったので用意してみた。
ただしやり始めたばっかりなので不備があるかも。。
現時点で把握している不備と対策です。
・on()が存在しない
 →bind()を使う
・off()存在しない
 →unbind()を使う

デモ:

デモ

続きを読む ハッシュ変更を検知

jsでパラパラアニメ

jsでパラパラアニメ。
よく見かけるものはbackgroundpositionを制御するものが多くて、cssでの背景画像の指定が面倒なことがあったのでimgタグでも使えるようにしてみました。
背景画像にする場合は、divタグを入れ子にすれば使えます。

TODO
イベントをつけたい
コマ単位で秒数指定したい

———-
2013/8/16追記
coffee scriptに変更
バグ修正対応

———-
2013/4/20追記
逆再生に対応しました。

———-
2012/11/19追記
素材の縦並びに対応しました。

———-
2012/11/6追記
デモ追加

———-
2012/10/12追記
メソッド to() を追加

デモ:

デモ

続きを読む jsでパラパラアニメ