日時(月、時間など)に合わせて、背景画像を自動的に変更したいとき。 月に合わせて、背景画像を(正月、節分、ひな祭り、......)のように替えたい場合、まず1〜12月の画像を連番で用意する。月については、 1月はimage0.png、2月はimage1.png のように0を初期値として連番で画像に名前をつける。表示するためのjavascriptは以下の通り。 var theDate = new Date(); var thisMonthImage = "url(image" + theDate.getMonth() + ".png)"; $("#content").css("background", thisMonthImage); head要素でjQueryを読み込んでおく id="content"の属性を付けたHTML要素の背景画像が設定される
img要素ではなく背景画像(background-image)を切り替えるjQueryプラグインです。 2013年7月29日にバージョン0.4.0をリリースしました。一から書きなおして、切り替え方法など色々改善しているので、良ければ使ってみてください。 ダウンロード jquery.bgswitcher.js 開発リポジトリはrewish/jquery-bgswitcher · GitHub 依存ライブラリ jQuery 1.7.x以上が必要です。 ライセンス MIT License 主な機能 エフェクト付きの背景切り替え 切り替えの制御(開始/停止/リセット) ファイル名の連番自動読み込み 画像のプリロード デモ Demo - jQuery.BgSwitcher 使用方法 <div class="box"> <p>Lorem ipsum dolor sit amet.</p> </div>
今回は比較的簡単な背景色をランダムにってのをjQueryでやってみたいと思います。ウィンドウを開くたび、色をこちらで指定して好きな色のみでランダムに背景色を変更できるようにします。 ※デモ追加しました。 ではHTMLソース。 <body> <p></p> </body> ほぼ空ですがpタグのところに文字を入れるのでpタグだけ入れといてください。 ではjQueryのソース。 var bgcolor = ["#fff000","#ff3dab","#0085f5"]; hairetusu = bgcolor.length; //配列数「3」が出力 $('p').append(hairetusu+"パターンのランダム背景です。");//pタグに配列数を出力 var picup = Math.floor(Math.random()*hairetusu); // 1~3を変数picupに入れる va
ロンドンにある Artlogic Media Ltd. という会社が公開している jQuery プラグイン、jQuery.spritely がおもしろかったので、紹介がてらポスト。 公開したのが2010年3月10日ということなので、公開ほやほやなプラグインのようです。 このプラグインを使用すると、FLASH のような動きを、iPhone のような FLASH 非対応のデバイスでも見られるようになります。 ※“クリック”と書いてある箇所は iPhone などのデバイスでは、“タッチ”になります。 jQuery Spritely | Spritel ※リンク先がデモも兼ねています。 ページを開くと、背景がスクロールしていて、その上に鳥が2羽飛んでいます。 これだけでも充分すごいんですが、ページのどこかをクリックすると… マウスのある場所まで降りてくる! 背景がスクロールしているエリアから飛び出
当サイトではCookieを使用しています。引き続き当サイトを閲覧することにより、ポリシーを受け入れたものとみなされます。今後表示しない詳しく見る
Free Web Tools & Online ConvertersBuilt For Easier Everyday TasksStop wasting valuable time doing small tedious tasks when you can focus on the bigger picture. Use our easy free tools and pat yourself on the back. You Deserve it! 🙂 Temperature ConversionConvert temperatures between Fahrenheit, Celsius, and Kelvin with ease. Ideal for cooking, travel, science projects, and daily weather interpreta
当サイトで配付しているページ内をスムーズにスクロールできるスクリプト「Page Scroller」をバージョンアップ(3.0.7)して、商用利用でも無料に変更しました。 スクリプトは当サイトでも下記のキャプチャのように、いろいろな箇所に利用しています。 簡単に設置できるページ内をスムーズにスクロールできるスクリプト -Page Scroller ver.3 [ad#ad-2] 3.0.7の変更点 スクリプトのライセンス スクリプトのダウンロード 3.0.7の変更点 主な変更点は、下記の通りです。 3.0.7 ライセンスが変わりました。 詳しくは、「スクリプトのライセンス」を参照ください。 スクリプトのライセンス ライセンスを下記のように変更しました。 変更前: 表示 - 非営利 - 継承 2.1 日本 変更後: 表示 - 継承 2.1 日本 使用条件 上記のライセンスに従い、個人でも商用で
WEBデザイナーとして日々感じたこと、思ったこと。 写真、絵、デザイン、WEB、インタラクションなことがらについて。 フットサル/サッカーの話題なども。 無事にポータルサイトやコンセプトブックのコンテンツサイトもアップになったので、一安心。 今後も、情報発信、表現で適切なものを適切に使うことを行なっていきたいな、と考えてます(^^ というわけで、ちょこっと追加で、改めていい感じのjQueryプラグインがあったのでご紹介~~。 ●[jQuery]自由自在!マウスオーバーで背景画像と文字色がフェードで切り変わるメニューColor Fading Menu | Ys DESIGN 元サイトはこちら ●Color Fading Menu with jQuery | CSS-Tricks マウスオーバーで背景画像が切り替わったり文字の色がフェードで変わるので上品な感じ。 今、よく実装している背景画像配
body{ background:url(画像のURL) repeat-x bottom; background-attachment:fixed; } #frame{ background-color:transparent; } #sub_a{ background-color:transparent; } #sub_b{ background-color:transparent; }
リストマーカー(CSSのlist-style-typeプロパティ)で迷ったことがありまして あるHTMLコーディングの仕事において、リストマーカー(CSSのlist-style-typeプロパティ)について迷うことがありました。それはホームページの利用規約や個人情報保護方針のような、条文タイプのテキストをHTMLコーディングするときに発生しました。通常、条文タイプのテキストでは番号リスト(HTMLタグ : ol)でマークアップします。条文には番号(順番)があり、これが重要なためです。 番号リストでマークアップされたテキストは、ブラウザによって各条文の先頭に「1.」「2.」のように連番が振られて表示されます。ここで問題が発生しました。原稿には「(1)」「(2)」のように括弧付きの連番がふられています。また条文のなかには「2.(1)(2)を除いて〜」のように条文番号を括弧付きの連番で参照するも
photoshopのwebで使うエレメンツのファイルや、ブラシ、カスタムシェイプ、パターン、アクションなどの素材を無料で提供しているサイトを紹介します。 個人のブクマを整理してる段階でまとめたものですが、共有します。 photoshopのwebで使うエレメンツのファイルや、ブラシ、カスタムシェイプ、パターン、アクションなどの素材を無料で提供しているサイトを紹介します。 個人のブクマを整理してる段階でまとめたものですが、 共有します。 はじめに photoshopの素材を紹介しているサイトは多いので、 主にphotoshopの素材の提供を主としてるサイト、 またはそのようなカテゴリを持つサイトのみを集めました。 紹介文の後のリストはそのサイトで扱ってる素材の種類となります。 また、ライセンスについては分かる範囲で記載しましたが 間違いがありましたら指摘頂けると助かります。 サイト一覧 dev
JavaScriptライブラリのjQueryのプラグインを利用して出来るサンプルです。 jQueryは、John Resig によって開発されたJavascriptライブラリで、AjaxやDOMプログラミングコードを「簡潔・簡単」に書けます。 ここでは、画像関連のjQueryプラグインを紹介しています。 JSONファイルから画像スライダーを作成するjQueryプラグイン「jsonslider」 JSONファイルに画像パスなどのデータが格納されている場合、処理を入れて画像スライダーにするのはそれなりの手間です。 jQueryプラグインのdcdeiv/jsonslider · GitHubを利用することでその手間が少し軽減できるかもしれません。 via:dcdeiv/jsonslider
CSS3 ノンサポートの IE でも CSS3 の border-radius、box-shadow、text-shadow などの、エフェクト系プロパティを利用する為のライブラリをご紹介します。また、最後に IE の filter を使ったコードもまとめてあります。 IEでも CSS3 の表現をするためのライブラリを使ってみました。IE9 がどれくらい普及するか分かりませんが、IE9 の CSS3 のサポートを見る限り、相変わらず IE だけ特別扱いしてあげないとダメなところもありそうですねー。以下のリンクで、IE9 の CSS3 サポートの状況をチェックできます。 Impressive Webs CSS3 Support in Internet Explorer 9 今回は、IE8 以下でもいくつかの CSS3 のプロパティを利用できるようにするためのライブラリを、2つほどご紹介します
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く