[JS]スクロールした際に見出しや画像やエリアなどが見切れるのを自動補正するスクリプト -Scrollsnap
ユーザーがページをスクロールした時、見出しや画像が見切れてしまう、ストライプの背景で違うカラーが少し見えてしまうなど、ちょっとだけスクロール位置がうまくない時に自動で補正するjQueryのプラグインを紹介します。 Scrollsnap Scrollsnapの特徴 Scrollsnapのデモ Scrollsnapの使い方 Scrollsnapの特徴 Srollsnapはスクロールでのユーザエクスペリエンスを強化するjQueryのプラグインで、ページ内の指定したポイントの上下でスクロール移動が止まってしまったら、自動的にちょうどいい位置にスナップさせます。 スナップ時のポイントはclassで設定可なので、テキスト・見出し・画像をはじめ、div要素やarticle要素などにも設定できます。 対応ブラウザ デスクトップ用の最新のブラウザをはじめ、IE9、スマフォ用のSafariにも対応しています。
windows
a handy, loosely-coupled jQuery plugin for full-screen scrolling windows project root | -- css | -- | -- main.css (compiled) | -- js | -- | -- jquery.windows.js | -- scss | -- | -- main.scss | -- index.html This is a light bootstrap that sets up: - the basic SASS for sequential full screen windows - a jQuery plugin for managing their positions as the user scrolls The plugin simply opens up a handy
[JS]最近よく見かける1ページ垂直スクロールコンテンツで、スクロール位置を自動補正するスクリプト -windows.js
スクロールしすぎも補正 windows.jsの使い方 実装は簡単で、既存のコンテンツにclassを加えるだけで適用できます。 Step 1: HTML HTMLは各コンテンツを配置しているdivやsectionにclassを加えるだけです。 classは変更可です。 <section class="window"></section> <section class="window"></section> <section class="window"></section> <section class="window"></section> <section class="window"></section> Step 2: 外部ファイル 「jquery.js」と当スクリプトをhead内に記述します。 <script src="http://cdnjs.cloudflare.com/aja
ボックスを綺麗に並べてくれるMasonryライクなjQueryプラグイン・Freetile.js - かちびと.net
サイズの異なるボックスを綺麗 に配置してくれるスクリプト、 MasonryっぽいjQueryプラグイン、 Freetile.jsです。似たような スクリプトは結構ありますので 参考までに。 よく見かける、異なるボックスを綺麗に並べるスクリプトです。Masonryっぽいやつ。 こういうやつです。ウィンドウサイズが変わってもボックスを再配置してくれます。 $('#foo').freetile(); 本体とプラグインを読み込んでセレクタ指定します。アニメーションオプション等もありました。 ライセンスはBSDです。手抜きな記事ですけどちょい忙しいので今日はこれにて。 Freetile.js
[JS]ページのレイアウトに役立つjQueryのプラグインのまとめ
Pinterestのようにパネルを隙間なくレンガ状に配置したり、異なる高さのパネルを同じ高さにしたりなど、ページのレイアウトに役立つjQueryのプラグインを紹介します。
[JS]柔軟なclassの設定が可能なResponsive Web Design用の超軽量(1KB)スクリプト -syze
demo 1：幅1920pxで表示 デスクトップ用の画像（hdsize-wide-512x512.png）を表示 syzeの使い方 上記のdemo 1を例に実装方法を紹介します。 外部ファイル 当スクリプトを外部ファイルとして指定します。 <script src="syze.min.js"></script> JavaScript demo1では表示サイズの数値を元に、class名にもその数値を利用します。 syze.sizes(320, 480, 768, 1024, 1920); class名 .is320(0-479px) .is480(480-767px) .is768(768-1023px) .is1024(1024px-1079px) .is1920(1920+px) CSS 設定が完了したら、あとはサイズごとにスタイルシートを設定します。 body { background:
Responsive Web Design用のHTML5+CSS3のテンプレート素材
iPhone, Androidのスマートフォンなどの小さいスクリーンから、デスクトップの大きいスクリーンまで、それぞれの表示サイズに合わせて最適なレイアウトを提供するHTML5+CSS3のテンプレートを紹介します。 サイズ変更時はレイアウトの一部がアニメーションで移動し、面白い仕掛けにも利用できそうです。 デモページ：幅480pxで表示 [ad#ad-2] HTMLの構造 テンプレートはブログを想定して作成されています。 ヘッダ、ナビゲーション、特集記事、最近の記事、サイドバー、フッタ、とシンプルな構成です。 HTML: index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Onextrapixel - Responsive Web Design Template</title>
Media QueryでiPhoneやiPadにも自動でレイアウトを調整するHTML5製のWPテーマ・BLASKAN
過去にも何度かご紹介していますが、 Media QueryでiPhoneやiPadを含め た、様々なデバイスにレイアウトを調整 済みのWordPressテーマ・BLASKAN のご紹介。シンプルで良かったので 備忘録です。 同じようにMedia Queryを使ったレスポンシブなWebデザインを構築できるWordPressのテーマは過去にまとめましたので合わせてどうぞ。 css3のMedia QueriesでスマートフォンやiPad等の様々なデバイスに対応済みのWordPressテーマいろいろスマフォにも最適化し、ファンゲート対応のFacebookページも作成できるフリーのWPテーマ・Flexibleがなかなか良さそう新たに仲間入りのテーマです。
Webサイトのレイアウト調整や補助に使えるjQueryプラグインいろいろ
レイアウトの調整を簡略化したり、通常 は難しいレイアウトを可能にしたり、とい った補助的なjQueryプラグインのまとめ です。最近探す機会が増えたので今後 の為に備忘録的に記事にしておきます。 この手のプラグインは数多にあるので 好みで端折っています。 レイアウトの調整や補助などに使えるjQueryプラグインのまとめ。と、言っても大抵は既出だと思います。順不同。 Supersized 画面に合わせて自動的に背景画像を伸縮してくれるだけでなく、スライドショーにもなってくれます。いつか仕事で使いたい。最近FlickrのAPIにも対応しました。 Supersized jQuery UI.Layout Plug-in ブラウザごとの差異を考えずに自由にレイアウトを組めます。 jQuery UI.Layout Plug-in JQUERY CUSTOM CONTENT SCROLLER スクロール
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[CSS]可変するレイアウト幅の最大値を制限する簡単な方法