フルスクリーンでタッチデバイスでも使いやすいナビゲーションメニュー実装:phpspot開発日誌
Full-Screen Pushing Navigation in CSS and jQuery | CodyHouse フルスクリーンでタッチデバイスでも使いやすいナビゲーションメニュー実装。 PC時代はコンパクトにまとめるのがよかった気がしますが、タッチデバイス時代では画面上に大きく表示したほうがタッチもしやすくて使いやすいと言えそう。 こういう部分も自分含めた昔からWEBを作っている人は頭を切り替える必要がありますね 関連エントリ 美しいナビゲーションメニューを自動生成するjQueryプラグイン「MenuItems」 ページ自体のサムネイルを作ってナビゲーションにできる「Minimap」
LazyLoader実装ならお任せ！というぐらい高機能なjQueryプラグイン「Lazy Load XT」:phpspot開発日誌
LazyLoader実装ならお任せ！というぐらい高機能なjQueryプラグイン「Lazy Load XT」 2015年02月10日- Demos LazyLoader実装ならお任せ！というぐらい高機能なjQueryプラグイン「Lazy Load XT」 画像、動画、iframeのLazyLoadに対応させるためのjQueryプラグイン。 表示時のエフェクトをフェードインや、スピナー表示する等を選べたり、レスポンシブな出し分けやRetina対応なども。background-imageのLazyLoadにも対応。 スマホファースト、スマホの通信も大分速くなったとはいえ、通信量をまず減らしてページ表示速度を上げるという意味では活用できるプラグインですね 関連エントリ Googleマップを遅延ロードしてページ読込速度を上げてくれるjQueryプラグイン「Lazy-loading」
Youtube動画はカッコよく埋め込もう「PrettyEmbed.js」:phpspot開発日誌
PrettyEmbed.js Demo - CodePen Youtube動画はカッコよく埋め込もう「PrettyEmbed.js」。 通常埋め込むと動画コントローラーやラベルが表示されて便利なんですが、どうしてもYoutube埋め込んだ感が凄くなりますね。 そこで、PrettyEmbedを使えば次のように。せっかくデザインしたサイトもYoutube埋め込みでかっこわるくならないようにできますね 関連エントリ Youtube,Vimeo,Dailymotion等の動画APIを共通化できる「jquery-video」 流行りのYoutube風ローディングバー実装jQueryプラグイン YoutubeのChannel・Playlistの動画リストを表示できるjQueryプラグイン「PlumTube」
jQuery custom content scroller – malihu | web design
When upgrading from version 2.x to 3.x it’s important to use version 3 CSS and .png files. Version 3 is backwards compatible but it’s also a huge overhaul. One significant change is that you don’t need to call the update method manually (the script does it automatically). For more info see changelog. Version 2 is still maintained and updated here. Get started Configuration Methods Styling Callback
jquery 1.xと2.x の違い、さらに動作を高速にするための設定 | まとめーたー
photoBy: http://www.jose-aguilar.com/blog/wp-content/uploa…まずは jquery 1.x と 2.x の違い 1.x 系は IE8 以前をサポートするが遅い、重い 2.x 系は IE8 以前のサポートは捨てて、いるが軽い、早い アイルトン・セナじゃあるまいしそんなに早くしてどうすんの？Webページがたった1秒高速化するだけでECサイトなんか、売上が10％向上した事例もあります。 使い分ける対応していないIE8以下には古いjqueryを読み込ませます <!--[if lt IE 9]> <script src="jquery-1.9.1.js"></script> <![endif]--> <!--[if gte IE 9]><!--> <script src="jquery-2.0.0.js"></script> <script s
lightGallery
lightGallery A lightweight, modular, JavaScript image and video lightbox gallery plugin. Available for React.js, Vue.js, Angular, and TypeScript. View on GitHub
jquery.kerning.js
jQuery.Kerning.js A jquery plugin which adjust text kerning in HTML. Get Source Demo うつくし明朝 - plain ポラーノの広場 あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。 うつくし明朝 - kerned ポラーノの広場 あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。 M+ 2m Regular - plain ポラーノの広場 あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。 M+ 2m Regular - kerned ポラーノの広場 あのイーハトーヴォ
複数RSSをjQueryでアグリゲートして1ページに表示できるjQueryプラグイン「jQuery Feeds」:phpspot開発日誌
Demo ? jQuery Feeds 複数RSSをjQueryでアグリゲートして1ページに表示できるjQueryプラグイン「jQuery Feeds」 クロスドメインのRSSもサポートしていて、サーバサイドスクリプトは一切不要。 複数のRSSを時系列にサクッとまとめて表示したい場合に便利そうです 次のようにJSONでURLを定義してあげればまとめて表示してくれるみたい 関連エントリ レスポンシブで何でも埋め込めるLightBox実装jQueryプラグイン「VenoBox」 おしゃれで軽量なシェアボタンを実装できるjQueryプラグイン Bootstrap用のフォームバリデーター実装jQueryプラグイン「BootstrapValidator」 フラットデザインがクールなカレンダー実装jQueryプラグイン「kalendar」 ダイナミックなタイル状レイアウトを実現できるjQueryプラグ
SVGMagic
div要素の背景画像としてSVGを使用します。 SVGMagicの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとしてhead内に記述します。 <head> ... <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script src="SVGMagic.min.js"></script> </head> SVG画像をPNG画像に変換するのには、PHPを使用しています。 converter.php（ダウンロードファイル一式に含まれています） SVGMagic.min.js内では、配布元のサーバーのファイルを参照してい
[JS]レスポンシブにしっかり対応！高さの異なるパネルを揃えたり、成り行きにするスクリプト -EqualHeight.js
divなどで配置したパネル内の要素の量が異なっていても、全てのパネルの高さを揃えるjQueryのプラグインを紹介します。 高さを揃える系としては後発のスクリプトですが、レスポンシブにしっかり対応しているのがポイントです。 一列のパネルはもちろん、段組でもOK、省スペースのスマフォ用に成り行きもコントロールできます。
jQuery最高の教科書｜株式会社シフトブレイン 著
「ゼロからjQueryを学びたい人たち」が効率的に理解できるように、 1章から順に難易度が上がるステップアップ形式の解説を行っています。 また、jQuery初心者のデザイナーの視点を加えることで、 プログラミング未経験者の「つまずきやすいポイント」を押さえた内容になっています。 通常、サンプルコードは全て出来上がった状態で配布されますが、 本書ではあえて途中までのみを記載しています。 コードに余白を残すことで、サンプルをただなぞるだけではなく、 読み手の工夫次第で様々な表現を生み出すことができるようにしています。 最終章では、実際の仕事でデザイナーやエンジニアが手がけるWebサイトと同等のクオリティのページを制作します。 単なる技術の理解に終始せず、実際のサイトを制作する上でのポイントを習得することで、 Web制作における実践的な力が身につきます。 シフトブレインの取締役、テクニカルディレ
スクロール後、ナビゲーションをページトップに固定するjQueryプラグイン「stickUp」:phpspot開発日誌
stickUp - a free jQuery Plugin スクロール後、ナビゲーションをページトップに固定するjQueryプラグイン「stickUp」 最初からposition:fixedではなく、一定以上スクロールした段階でfixedにしてくれるプラグインです。 シームレスにナビが固定されるあたりがクールだったりしますが、これを簡単に実装できます。 関連エントリ レスポンシブなナビゲーションメニュー作成用jQueryプラグイン「Naver」 スクロールすると上に固定される一見普通のナビゲーション実装jQueryプラグイン「SMINT」 レスポンシブでクールなナビゲーションを実現できる「Responsive Nav」 クールな円形ナビゲーションを作るチュートリアル
画面上にエレメントが表示された際のイベントハンドラを設定できる「onScreen()」:phpspot開発日誌
$.onScreen(); 画面上にエレメントが表示された際のイベントハンドラを設定できる「onScreen()」 1ページに沢山のコンテンツを読み込んでいるサイトにおいては、その画面が表示されないでもHTMLを出力し、転送量を必要とし、表示スピードに影響を及ぼします。 そのエレメントがスクリーンに表示された時点で、コンテンツを表示するように設計すれば無駄な転送がなくなり、スピードも速くなりますね。 これを簡単に実現できるのが、このライブラリです。 実装は次のように、初期化します。doIn, doOut という感じで関数内に定義すればよいみたいです。 lazyloaderや、ページの自動読込、更に、利用者がどこまで見たか？をトラックする場合にもAnalytics等と組み合わせて使えそう。 関連エントリ ネットワークのオフラインを検知して処理を実行できる「Heyoffline.js」
Swings | Designers Online Magazine by BULANCO
2017年の登場以来、注目が高まる“ネコ家具”。世界的にも話題のネコ家具が大集合したイベント「ネコ家具EXPO!」についてご紹介します。 ネコ家具EXPO! 伝統と…
Sticky-Kit | jQuery plugin for sticky elements
Reference To install include jquery.sticky-kit.js after including jQuery. Usage: $("#sticky_item").stick_in_parent(); // or $("#sticky_item").stick_in_parent(options); You can pass a hash of options to configure how Sticky Kit works. The following options are accepted, each one is optional: parent — The element will be the parent of the sticky item. The dimensions of the parent control when the st
imagefill.js | Project Page
Simple Example Given this html: <div class="container"><img src="myawesomeimage" /></div> Do this: $('.container').imagefill(); // image stretches to fill container Grid Example Given a grid like this: <div class="grid-whole"> <div class="grid-quarter"> <img src="myawesomeimage.jpg"> </div> <div class="grid-quarter"> <img src="myawesomeimage.jpg"> </div> <div class="grid-quarter"> <img src="myawes
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
アニメーション切り替えがカッコイイタブUI実装jQueryプラグイン「tabtab.js」:phpspot開発日誌
Flatis
画像からカラーを取得して背景に適用するjQueryのプラグイン。
iOSスタイルのヘッダーが作れるjQueryプラグイン「Stacks」:phpspot開発日誌