流行のjQueryでスクロールするサイトを集めてみました
jQueryでコンテンツをスクロールさせる海外サイトを最近見るのですが、あれはかっこいいですね。そこで、今回の記事では、jQueryでコンテンツをスクロールさせているサイトをいくつか紹介しつつ、このタイプのサイトに特有の問題についても触れてみたいと思います。 はじめに コンテンツをスクロールバーではなく、JavaScriptでスクロールさせる場合、ブラウザのスクロールバーが出ないため、「ブラウザからはみ出るコンテンツをどのように扱うか」の課題に直面します。以下のサイトで、この問題をどのように解決しているかにも、注目して見てください。 01. Reverse Büro 自由自在に縦、横方向にスクロールします。マウススクロールにも対応しています。コンテンツ自体がブラウザ幅に合わせて拡大・縮小するのでスクロールは必要ないですね。写真だけのサイトでは、こういった解決策もアリなんだと思います。 ※サ
これは便利！jQueryに依存せずに使えるgetJSON.jsを作ってみた | soplog(そぷログ)
タイトルは最近の流行りっぽくしてみました＼(^o^)／ 「ソーシャル系のJSONPのためだけにjQuery読み込ませるのもな～」ということで作成してみましたが、「jQuip」なんてサービスもでてきたのでそちらを使った方が便利かもしれません。 しかし空気を読まずに投下します。 追記： @teramakoさんが修正してくださいました！ありがとうございます！！ @sophide0822 さん、テストできてませんが、一応 https://t.co/tON5JQ7a に上げました — てらまこ (@teramako) 2012, 2月 23 修正いただいたスクリプトは eval を使用せず動作します。 すごくスマートに書かれていて、とても参考になりました。 精進します(`・ω・´) jQueryのgetJSONが今の形になる以前に、「jQuery JSONP plugin」というプラグインを開発され
[jQuery]透過PNGに対応したクロスフェードボタン – smoothRollOver.jsロールオーバーすると滑らかに画像が切り替わるライブラリ | レポート | 日本電子工藝社
ロールオーバーすると滑らかに画像が切り替わるライブラリ ボタン・リンクのロールオーバー効果を表現する際、CSSやJavaScriptによる画像の切り替えだけでは物足りない時があります。ロールオーバー時のデザインを活かすため、ボタンにロールオーバーすると滑らかに画像が切り替わるライブラリを作成しました。みなさまのデザイン表現の幅を広げるお手伝いができれば幸いです。（※個人利用・商用利用を問わず自由にご利用いただけますが、自己責任の上でご使用ください。） 動作サンプル このライブラリは、JPEG・GIF・透過PNGに対応しています。 JPEG/GIFの場合 透過PNGの場合 InternetExplorer6～8のPNG対応について InternetExplorerは、バージョン6までは透過PNG自体に対応しておらず、7・8になってもフェードイン表現の際に透過部分がギザギザになってしまう仕様で
Adaptive Images in HTML
Adaptive Images detects your visitor's screen size and automatically creates, caches, and delivers device appropriate re-scaled versions of your web page's embeded HTML images. No mark-up changes needed. It is intended for use with Responsive Designs and to be combined with Fluid Image techniques. Why? Because your site is being increasingly viewed on smaller, slower, low bandwidth devices. On tho
多数のアイテムから目的の物を見つけやすくするjQueryフィルタリングプラグイン集:phpspot開発日誌
30 Useful jQuery Filter and Sort Plugins - tripwire magazine 多数のアイテムから目的の物を見つけやすくするjQueryフィルタリングプラグイン集 沢山のアイテムをずらっと並べただけだと探しにくいわけですが、フィルタリングをすることで目的の物をすぐに見つけられます。 画面遷移もないというのがいいんですが、そういった機能を実装するためのプラグインが３０個もまとまっていて、自分にマッチしたものを探せそうです よくこんなにあったもんだなという感じですが、便利に活用させていただきましょう 関連エントリ レスポンシブな背景画像スライドショーを実現するjQueryプラグイン「bgStretcher」 ユーザへの通知UI全部のせなjQueryプラグイン「noty」 レスポンシブなスライドショーを実装できるjQueryプラグイン「Responsiv
レスポンシブWebデザインから始まる適応への道
2月22日 Web担当者Forum 主催のイベント 企業サイトのスマホ“対応”とその一歩先の”最適化”とは？ に登壇させていただきました。今回はレスポンシブ Web デザインの話題を中心に、Web への窓口がますます増える今後にどう対応していけば良いのかを、技術・デザイン・企画・そして具体的なソリューションなど様々な視点で講演されました。 今回は、先月執筆したレスポンシブにデザインするために克服することをキッカケで話すことになりました。「未来へレスポンシブに対応するための設計と戦略」と題して、スマートフォンやタブレットだけでなく、もう少し視野を広げてレスポンシブの実現について話をしました。 クロスオーバーする時期が来た 制作者向けのセミナーであれば、レスポンシブ Web デザインを語るのにふさわしい人は他にいると思うのですが、今回は Web担当者Forum という制作者以外の方が多く参加さ
モバイルファースト/コンテンツファーストという考えかた | Accessible & Usable
公開日 : 2012年2月23日 (2018年1月20日 更新) カテゴリー : 情報設計 (IA) スマートフォンの普及によって、モバイル環境で Web を利用することが当たり前になってきました。goo リサーチによるスマートフォン意識調査 (2011年6月、10代から60代以上のインターネットユーザー1,148名を対象に実施) によると、スマートフォンを持ちたい理由として「パソコン用サイトにアクセスできるから」を挙げる人がダントツで多かったそうで (参照 : インターネットコムの記事)、スマートフォンは Web 端末としてユーザーに高く期待されていると言えそうです。 たしかにスマートフォンでは PC 用サイトを閲覧することができます。ただ、画面が小さいので、ピンチ＆ズームを繰り返さなければならず、かなり面倒だったりします (途中でユーザーが投げ出してしまうことも十分あり得るでしょう)。
フロントエンドの開発を加速するCodeKit :: 5509
また紹介エントリーか。。。Sass布教活動の一貫です。どうも。 SassとかLESSって使ってますか？書くのがとても億劫なCSS（個人の感想です）を快適に書くことが出来るようになる上に、始めた頃の楽しさが戻ります（個人の感想です）。詳しいことは以下のエントリかたがたを見てもらうとして。Sassの記事が多いのは僕がSass使ってるからです。Sass推しです。 CSSとフレームワークとメタ言語 Sass、そしてSassy CSS (SCSS) Sass を今すぐ実務で使おうよ！ Sassを覚えよう LESS初心者向けのナニカ というか LESS & Sass Advent Calendar 2011（） をみてください。 浸透しにくい理由は色々ある気がしますが・・・ コンパイルがめんどい そのとおりです。慣れですけどね。とっつきにくい感をこいつが出してるのはその通りでしょう。 黒い画面がちょっ
[JS]スクロール時に面白いエフェクトを与えるjQueryのプラグインのまとめ
パララックスをはじめ、パスに沿ってスクロールさせたり、スクロールに合わせてパネルを表示するなど、スクロール時に面白いエフェクトを与えるjQueryのプラグインを紹介します。
for 属性に対する属性セレクタの IE7 での挙動
IE7 には、label 要素の for 属性に対する CSS の属性セレクタが無効になるバグがあります。 label[for="foo"] { background-color: yellow; } この場合 for="foo" という属性を持つ label 要素の背景が黄色になるはずですが、IE7 では無視されてしまいます。これはどうやら for というキーワードが DOM の予約語であることに由来するバグのようです (参考: Attribute Selector (CSS selector) - SitePoint CSS Reference)。そのかわり、IE7 では htmlFor という属性名を利用すればスタイルが有効になります。 label[htmlFor="foo"] { background-color: yellow; } ただこれだと IE8 以降やほかのブラウザが解
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
