記事一覧

表示コンテンツの切り替えも出来るシンプルなモーダルウィンドウを実現するjQueryのスクリプト

シンプルなモーダルウィンドウを制作しました。有名なモーダルウィンドウに比べらたら出来ないことだらけです。画像をグループ化して他の画像へ移動することや、img内のtitleからキャプションを生成、他のHTMLを読み込んでの表示等もできません。その変わり3つのメリットがあります。

  1. 軽いこと。JSファイルにすると3K以下の軽さであり、画像を必要とせずCSSも普通に記述して20行程の導入のしやすさ。つまり気軽さ。
  2. シンプルなこと。見飽きた有名なモーダルウィンドウのインターフェイスに比べて何というシンプルさ、そう閉じるボタンを取り払うほどに。(※閉じるボタンが無くても、グレーバックをクリックすると閉じるコトを認識している人が増えていると、勝手に判断した為です。あとがきでこの事についてチョット書いていますので、興味があれば読んでみて下さい。)
  3. 表示コンテンツの切り替えができること。コレが本命。とっても気軽にモーダルウィンドウ内で表示コンテンツを切り替えることができます。まあいつもの如く、どこかにあるんでしょうけど、見つけられなかったので制作してみたパターンです。

っとまあ、無理やり3つのメリットをこじつけてみました。まあ興味を示した方はどうぞご覧下さいませ。

Demo

More »

単純だけど簡単な背景画像のパララックスを実現するjQueryのスクリプト

スクロールで背景画像がズレるやつを制作しました。パララックスとか言うやつですね。まあコンテンツごとの背景がズレるだけなので、視差と呼べるかは微妙ですけれど、他のをみるとそう呼んでもいい感じですね。

とりあえず今回のウリはタイトル通り単純だけど簡単ってところです。パララックスする要素をまとめて指定するだけでOK。あとは動きの量を調整したければする位です。まあ、大したモノではありませんし、もう新しいって程でもありませんが、チョット試してみようかなって思ってる方にはイイかもしれません。

Demo

More »

『Goodara』公開しました。

Other

前に働いていた会社の人となんかWebを中心に面白い事しようよってことで組んだ集団が『Goodara』だ。結成は2010年8月。その中にデザイナーがイナイという苦境をのりこえ2011年1月ついにロゴができた。

Goodara ロゴ

『ぐ~だら』と読む。意味は説明するのがメンドクサイので各自考えてくれ。

More »

Canvasで実現するカラフルな円が小さくなったり大きくなったりする背景2

Canvas

以前作ったCanvasで実現するカラフルな円が小さくなったり大きくなったりする背景の別バージョンを作ってみました。ソースを改良しようと思い作りましたが、ついでなのでちょっと違ったヤツをと思いまして。

動きとしての大きな変更点は軌跡を残してポワってさせたのと、イージングを数学関数でちゃんとしたもの?にしました。あとソースを改良した割にはこれといって軽くなった訳ではありませんのであしからず。(いやね、本当は軽くするつもりだったんだよ。でもね、僕の力じゃこれがゴニョゴニョ。)

Demo

More »

画像にクラス名を追加するだけでアニメーションロールオーバーできるjQueryのプラグイン

前に作った画像にクラス名を追加するだけでアニメーションロールオーバーできるjQueryのスクリプトをプラグイン化してみました。特に追加したアニメーションもありませんがね。単純に1つにまとめてアニメーションの変更等をしやすくしたくらいです。

Demo

More »

Top