これならすごく簡単！ページを高速に表示させるLazy Loadを実装できる超軽量ライブラリ -Lazyestload.js | コリス
最近はLazy Loadを採用しているサイトが増えていますね。 Lazy Loadとは、画像やiframeコンテンツなどが見えていない状態（ビューポート外）はロードさせずに、見えはじめた状態（ビューポート内）の時だけロードさせるようにして、ページの表示を速くするテクニックです。 そんなLazy Loadを外部ファイルとimg要素にclassを加えるだけで、簡単に実装できる超軽量JavaScriptライブラリを紹介します。 Lazyestload.js -GitHub Lazyestload.jsの特徴 Lazyestload.jsのデモ Lazyestload.jsの使い方 Lazyestload.jsの特徴 Lazy Loadを外部ファイルとimg要素にclassを加えるだけで実装。 画像はビューポート内にある時、およびスクロールが停止した時にロード。 ロード前の状態は、CSSで簡単にス
HTML5で組んでるならこの魔法のjsも入れておけっていう話
現在、A!@attripさん発で話題になっている「たった2行でIE5.5～IE8をモダンブラウザの挙動にする魔法のJS」という記事。 Webデザイン界隈では当たり前のものですが、実はもうひとつ追加しておくといいかもしれないjsがあったりします。 Photo:html5 By michael pollak IE8以前のブラウザはどうにもこうにも開発者泣かせなわけですが、ie9.jsとcss3-mediaqueries.jsを突っ込むことで、モダンブラウザと同じ挙動にすることができちゃいます。 もう少し具体的に書くと、ie9.jsを組み込むことで、 position:fixed;に対応 max-width、max-heightに対応 属性セレクタ、擬似クラスに対応 margin:0 auto;でのセンタリングに対応 透過PNGに対応 opacityに対応 といったことが可能になります。要はCS
HTML5のCanvasを使ったパターン背景を簡単に作成出来るWebサービス・Patternizer
珍しいなぁと思ったのでメモがてらご紹介です。 HTML5のCanvasを使用してパターン背景を 生成出来る、というWebサービス。線を描いて 数枚重ね、パターンのような背景を作成する ことが出来ます。まだ実用段階とは行きません けど。 簡単にHTML5製の背景を作成出来るジェネレーターです。Canvasは非プログラマーにとっては若干ハードルが高い印象ですので、この手のジェネレーターで使い方を覚えていくのもいいかもしれません。 こんな感じ。線の太さ、角度などを調整し、複数の線の連続を重ねてパターンを生成します。 使い方はこんな感じ。直感で分かるんじゃないですかね。 使い方まず、patternizer.jsというスクリプトを読み込みます。 <script src="js/patternizer.js"></script>で、マークアップ <canvas id="bgCanvas"></canv
透過PNGをIE6に対応させる方法いろいろ｜その他のJSライブラリ｜Ajax｜PHP & JavaScript Room
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-eq
jsdo.it
Come creare il miglior gioco da casinò Quando si progetta un gioco da casinò, la prima cosa che devi considerare è che tipo di gioco sarà. Ci sono molti diversi tipi di giochi da casinò, dalle slot e video poker ai giochi da tavolo e giochi di carte. Dovrai decidere quale tipo di gioco si adatta meglio alle tue esigenze. Ogni tipo di gioco ha il proprio set di regole e regolamenti, quindi dovrai a
CSS で文字サイズを変更する
第 10 回目は「CSSで文字サイズを変更するボタンを設置する」です。 今回は「styleswitcher.js」でCSSを切り替えて、サイトの文字サイズを変更するボタンの設置方法を解説します。 「styleswitcher.js」は複数のスタイルシートファイルを切り替えて読み込むことができ、クッキーに保存できる優れもののライブラリです。 実装手順は以下の通りです。 1. styleswitcher.js をダウンロード 「styleswitcher.js」を以下のサイトからダウンロードします。 「A List Apart: Articles: Alternative Style: Working With Alternate Style Sheets」のエントリーの中にある Download styleswitcher.js からダウンロードできます。 2. font-sizeの値が異な
たったワンクリックであらゆるサイトのJavaScriptやCSSを圧縮＆最適化してくれる『zbugs』 | 100SHIKI
これはすんごく便利・・・。 zbugsを使えば、ワンクリックであらゆるサイトのCSSおよびJavaScriptを圧縮してくれるようだ。 もちろん何パーセント圧縮されたかとか、どのファイルがどれだけ小さくなったかといったことの詳細も教えてくれる。 さらに圧縮したファイル群をまとめてダウンロードすることも可能だ。 サイトをつくったあとに、さらなるスピードアップを図るのにいいだろう。インターフェースも素敵でシンプルなので一度試してみるといいですよ。
スマートフォンサイトにフリック・スワイプ実装できるjQueryスライダプラグイン
※コメントにも頂いておりますが、この公開版はバグがありますので、承知の上でご利用になるか、ご自身でカスタマイズされる方がお使いください。 スマートフォンサイトにおいて、左のムービーのようなフリック動作ができる画像スライドのjQueryプラグインを作りました。（ムービーはiOSシミュレータによるデモです）iPhone・Androidでご覧の方はデモに直接アクセスしてください（ムービーは再生されません）。 【デモを見る（iPhone・Androidで見てください）】 【ダウンロード】 なぜプラグイン化したか 横向き対応がハードルを高くする ご自身でこの手のUIを組んだ経験がある方はわかると思いますが、絶対配置（position:absolute）を使ったリキッドレイアウトを組むのはなかなか手の込んだことが必要で、今後の仕事で都度ゼロからUI作成を行うのは効率が悪くなってしまうと思ったからです。
[JS]IE6でもブラウザのサイズに合わせて最適なスタイルシートを適用するスクリプト -Adapt.js
CSS3のMedia Queriesを使用して同様のことができますが、CSS3非対応ブラウザでも動作し、且つjQueryなど他のスクリプトに依存しないでブラウザの幅をチェックし、そのサイズに最適化されたスタイルシートのみをロードさせる超軽量（894bytes）のスクリプトを紹介します。 Adapt.js - Adaptive CSS 左：ファイル名、右：スクリーンサイズ [ad#ad-2] スクリプトの制作は「960 Grid System」と同じNathan Smith氏なので、960 Grid Systemとの相性がよいのではないでしょうか。 また、対応ブラウザの表記は見あたりませんでしたが、IE6でも動作しました。 スクリプトでは、上記キャプチャのようにサイズごとに異なるスタイルシートを指定し、ユーザーの環境に合わせて最適なレイアウトで表示することができます。 下記は、同サイトをブラ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]画像を溶け合うように切り替えられるスクリプト -CrossSlide