シングルページなサイトをデザインする上で、知っておいて損は無いかもしれないプラグインとか色々！ | バンクーバーのうぇぶ屋
最近多いですねー、1ページで完結するタイプのサイト。One Page Loveのサイトなんかから、シングルページの事例も大量に見ることが出来ますし、パララックスやらフリップ型のコンテンツやら、なんか色々出てきてて着いて行くのがやっとです… でも実際シングルページをつくろうとすると、え？何これどうなってんの？って物も多くてビビることもしばし。 ってことで、今日は僕が知ってる中で『お、これ、シングルページ作る時に使えるんじゃね？』って物を幾つかご紹介させて頂きます！ 主にはシングルページデザインの表現の幅を広げるjQueryプラグインの紹介になるかなと思いますが、楽しい物も多いので、是非興味があれば試してみてくださいませ〜！ それではいってみましょー！ パララックススクローリング系プラグイン この辺は以前に紹介したことがあるものばかりなので、ぱぱーっと行きます。 jQuery Waypoint
レスポンシブWebデザインでテーブルを使う時の小技
tableやtr、tdなどのテーブル関連のタグのdsiplayプロパティを変更することでデザインを変更します。 tableタグのdisplayの値はデフォルトではtable、tdやthタグはtable-cellといった具合ですが、この値をblockやlist-itemなど他の値に変えます。 @media only screen and (max-width:420px){ tbody tr{ display: block; margin-bottom: 1.5em; } tbody th, tbody td{ display: list-item; border: none; } ..... } Chrome、Safari、Firefox対応。 IEではTableのdisplayを変更しても表示は変わらないようなので非対応です。 条件分岐コメントを使ってIEにはメディアクエリを読ませないよ
単純だけど簡単な背景画像のパララックスを実現するjQueryのスクリプト | Web Mugen
スクロールで背景画像がズレるやつを制作しました。パララックスとか言うやつですね。まあコンテンツごとの背景がズレるだけなので、視差と呼べるかは微妙ですけれど、他のをみるとそう呼んでもいい感じですね。 とりあえず今回のウリはタイトル通り単純だけど簡単ってところです。パララックスする要素をまとめて指定するだけでOK。あとは動きの量を調整したければする位です。まあ、大したモノではありませんし、もう新しいって程でもありませんが、チョット試してみようかなって思ってる方にはイイかもしれません。 Demo 必要なファイル jquery.js 対応ブラウザ Google Chrome Safari Firefox Internet Explorer7～ Opera ※Windowsのみの確認です。また、Internet Explorer以外は記事投稿時の最新版を対象にした確認です。 コーディング＆設定 HT
HTML5とjQueryでRotate｜スクロールに応じて画像を回転させる方法 – How to rotate the image by scroll | Stronghold Archive
HTML5とjQueryでRotate｜スクロールに応じて画像を回転させる方法 – How to rotate the image by scroll どうもこんにちは！今日は【HTML&jQueryでRotate スクロールに応じて画像を回転させる方法】について書きたいと思います。このところscroll連動系のサイトが多くなったのでちょっと作ってみました。個人的に直線的なパララックスサイトを作っといてなんですが回転の方が楽しいです。特定の位置で回転開始等も簡単にできていいですね。（追記：jQueryのみで画像回転を実装する方法も記事にしました。） Rotate v1 – DEMO スクロールのタイミングでキャンバスに画像に回転を付けていくバージョンです。増加のみ。fillStyle,fillRect,clearRectで残像の調整も可能です。 HTML – 共通 <div id="scr
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
