jQuery / CSS3 TIPS｜BLACKFLAG
BLACKFLAGで紹介しているjQueryとCSS3を使って実装するスライドショーやカルーセル等、Webサイト上でのUI系スクリプトのTIPSをまとめたページになります。 ※一覧は随時更新します。 Comments (6) html/css/jquery などのtipsが多彩のサイト | webサイト作成に関する自分メモ | 2013.02.25 19:11 […] jQuery/CSS3 TIPS jQuery/CSS3 TIPS […] きのぴ | 2015.12.04 14:01 はじめまして、 パララックスデザインのソースについて探しておりました。 勉強も兼ねてですが、簡単なLPサイトで使用させていただこうと考えております。 こういったサイトがあるとすごく助かり、また勉強にもなります。 ブックマークさせていただき、ちょくちょく拝見させていただければと思います。 ありがとうございま
jQueryでRetinaディスプレイを判別して処理を変える方法｜BLACKFLAG
iPhoneなどApple製品に使われているRetinaディスプレイ。 従来のディスプレイよりも高解像度（1ピクセルの幅が78ミクロン）であることから Retinaディスプレイで画像を綺麗に表示するには、表示する倍のサイズで作成する必要があったり 特別な対処をする必要がでてきたりします。 そんなRetinaディスプレイに対して、jQuery（JavaScript）を使って判別し 個別に処理させる方法があったので紹介してみます。 ※webkitブラウザのみの対応です。 Retinaディスプレイかどうかを判別するプロパティは デバイス上で画像の1pxの単位を何pxとしてレンダリングしているかを見てくれる ————————————– window.devicePixelRatio ————————————– によって判別します。 Retinaディスプレイはここで取得する値が「2」になります。 こ
jQueryでレスポンシブ対応の際にウィンドウサイズによって読み込む画像を切り替える実験｜BLACKFLAG
最近ではWebサイトを構築する際にレスポンシブ対応として、PCでの表示のみならずスマートフォンやタブレットでの表示を考慮して構成する必要があります。 レスポンシブ対応でレイアウトに関してはCSSのMediaQueriesを使ったりすることで、ウィンドウサイズによって画面上のレイアウトを調整させたりすることが可能ですが、大きな画像を使用する画面デザインなどの場合ではスマートフォンで表示する際のレンダリング負荷が問題になったりします。 そんな際に使えるようにMediaQueriesと同様の方法で、ウィンドウサイズによって読み込む画像を切り替える動作をjQueryを使って実験的に作ってみたので紹介してみます。 【2016/05/22】 ウィンドウサイズを取得して画像を切り替える部分のスクリプト動作を一部改修しました。 ウィンドウサイズによって切り替える画像については、PCで表示させる為の大きな画
jQueryで16進数の背景色をアニメーション（フェード）させる方法｜BLACKFLAG
jQueryでは通常、背景色や文字色などでの16進数を使った色指定「#ffffff」といった値を アニメーション処理させることは出来ません。（数値化されていない値は処理できない。） これらの色指定をアニメーション処理させるには、値を数値化することが必要になるのですが 簡単にそれらの処理をしてくれるプラグイン「jquery.color.js」というものがあったのでご紹介。 Color Animations ≫Color Animations | jQuery Plugins このプラグインファイルを使うことで16進数で指定された色指定を 「rgb(nn, nn, nn)」の様な感じに変換して処理してくれます。 例えば、 ——————————————————- 白「#ffffff」 → 「rgb(255,255,255)」 黒「#000000」 → 「rgb(0,0,0)」 赤「#ff0000
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
