JavaScriptでスライド表示するサンプルギャラリー

noobslideによるスライド表現｜web creators 2008年8月

商品写真を数点、ギャラリー的に見せたいという案件があり、以前から気になっていた「noobslide」を 使ってみました。
少し古いですが、web creators 2008年8月号の「すぐに使えるCSSデザインテクニック」でも詳しく紹介されていますので、本格的に使いたい方は読んでみて下さい。

noobSlideのページを見ていただくと分かりますが、いろいろな演出ができます。その中で気に入ったモノがあれば、使ってみるのも良いでしょう。
ただし、カスタマイズは結構複雑でした。僕の場合は、web creators 2008年8月号のサンプルデータをカスタマイズしたんですが、多少分からないトコロもあり、CSSで無理矢理非表示にしたりしています。

とりあえず、サンプルです。

続きを読む "JavaScriptでスライド表示するサンプルギャラリー"

RSS Feed をHTMLページに組み込むCGI

jsRSS++｜大黒屋本舗

ブログなどのRSS Feed を表示させる方法はいろいろあります。
このブログでも、下記のように過去に何回か紹介しましたが、なかなか表示状態のカスタマイズが難しいかったりするんですよね。

・RSSリーダー2(2005.07.18)
・RSS をHTMLに組み込む(2007.06.20)
・RSS をHTMLに組み込む２(2007.08.06)

そこで登場するのが、「大黒屋本舗さんのjsRSS++」です。
CGIなので、多少の知識は必要ですが、各ファイルに対するパーミッションの設定が分かるくらいで大丈夫です。
テンプレートを自分で作るコトができるので、好きなように表示状態をカスタマイズできて、非常に便利だと思います。…もっと早く知っていれば良かったです。

JavaScriptでクロスフェード

DIV要素をクロスフェード

このところバタバタしておりまして…。ストックネタという訳でもないんですが、今回はかなり定番の結構便利なスクリプトを紹介してみます。
「Flashを使うまでもないんだけど、ちょっとした演出が欲しい…」という時などにはうってつけです。

「Brand Spanking New」で紹介されている「Crossfader.js」というスクリプトです。ご存知の方も多いかもしれないですね。
このスクリプトの優れている所は、画像ではなくDIV要素に対してクロスフェードさせられるトコロです。…なので、使い方を工夫すれば、いろいろと凝ったアプローチができると思います。しかも、設置は至って簡単！使わない手はないでしょう。

とりあえず、サンプルです。

続きを読む "JavaScriptでクロスフェード"