Tag ‘jQuery’
シンプルなモーダルウィンドウを制作しました。有名なモーダルウィンドウに比べらたら出来ないことだらけです。画像をグループ化して他の画像へ移動することや、img内のtitleからキャプションを生成、他のHTMLを読み込んでの表示等もできません。その変わり3つのメリットがあります。
- 軽いこと。JSファイルにすると3K以下の軽さであり、画像を必要とせずCSSも普通に記述して20行程の導入のしやすさ。つまり気軽さ。
- シンプルなこと。見飽きた有名なモーダルウィンドウのインターフェイスに比べて何というシンプルさ、そう閉じるボタンを取り払うほどに。（※閉じるボタンが無くても、グレーバックをクリックすると閉じるコトを認識している人が増えていると、勝手に判断した為です。あとがきでこの事についてチョット書いていますので、興味があれば読んでみて下さい。）
- 表示コンテンツの切り替えができること。コレが本命。とっても気軽にモーダルウィンドウ内で表示コンテンツを切り替えることができます。まあいつもの如く、どこかにあるんでしょうけど、見つけられなかったので制作してみたパターンです。
っとまあ、無理やり3つのメリットをこじつけてみました。まあ興味を示した方はどうぞご覧下さいませ。
Demo
More »
スクロールで背景画像がズレるやつを制作しました。パララックスとか言うやつですね。まあコンテンツごとの背景がズレるだけなので、視差と呼べるかは微妙ですけれど、他のをみるとそう呼んでもいい感じですね。
とりあえず今回のウリはタイトル通り単純だけど簡単ってところです。パララックスする要素をまとめて指定するだけでOK。あとは動きの量を調整したければする位です。まあ、大したモノではありませんし、もう新しいって程でもありませんが、チョット試してみようかなって思ってる方にはイイかもしれません。
Demo
More »
以前作ったCanvasで実現するカラフルな円が小さくなったり大きくなったりする背景の別バージョンを作ってみました。ソースを改良しようと思い作りましたが、ついでなのでちょっと違ったヤツをと思いまして。
動きとしての大きな変更点は軌跡を残してポワってさせたのと、イージングを数学関数でちゃんとしたもの？にしました。あとソースを改良した割にはこれといって軽くなった訳ではありませんのであしからず。（いやね、本当は軽くするつもりだったんだよ。でもね、僕の力じゃこれがゴニョゴニョ。）
Demo
More »
前に作った画像にクラス名を追加するだけでアニメーションロールオーバーできるjQueryのスクリプトをプラグイン化してみました。特に追加したアニメーションもありませんがね。単純に1つにまとめてアニメーションの変更等をしやすくしたくらいです。
Demo
More »
前に作ったフォントサイズを変更するjQueryのスクリプトの改良版です。元々はフォントサイズ切替用のスタイルシートを作るのがメンドイので作ってみました。改良点は画像でもテキストでも使えるし、クリックするとアクティブ用のクラスが付くのでCSSを適応できます。さらにロールオーバー画像のオンオフも切り替えれます。おまけにフォントサイズの段階（標準・大とか小・中・大みたいな）もいくつでも設定できます。ちなみにプラグイン風？に作りました。もちろん自己満の為です。
画像タイプDemo
テキストタイプDemo
More »
