テーブルをレスポンシブに対応させるのに便利なjQueryプラグインまとめ｜BLACKFLAG
レスポンシブWebデザインのサイトでテーブル（表組み）を組み込む際に 要素量の多いテーブルの場合、CSSでレイアウトを無理やり調整したり、 スマホレイアウト時はテーブル全体を横スクロールさせるようにしたりと レイアウトに苦労することがよくあります。 そんなテーブルをレスポンシブ対応させる際に いろいろと便利に使えそうなjQueryプラグインを まとめて自分用メモとして紹介してみます。 Basic Table (jQuery Responsive Tables) Basic Table (jQuery Responsive Tables) デモページはこちら まず最初は「Basic Table」。 画面幅に応じて見出し要素を複製するかたちで テーブルを項目の並びを整えて収めてくれます。 様々なレイアウトパターンが用意されていて テーブルが長くなる場合にはスクロール制御する機能もあり、 いろい
jQueryで外部HTML（JSON形式）化した要素を「もっと見る」ボタンで追加する方法【複数設置対応パターン】｜BLACKFLAG
以前に「jQueryで外部HTML（JSON形式）化した要素を「もっと見る」ボタンで追加する方法」 と題して、JSON形式でで外部HTML化したコンテンツ要素を 「もっと見る」ボタンで追加するUIを紹介しました。 当時公開したスクリプトでは「もっと見る」動作は ページ内で１つの設置のみの構成になっていたところ 1ページで複数設置を必要とした場面があったり、同様の要望もいただいたりしたので、 複数設置パターンのサンプルを再度紹介してみます。 サンプルを別枠で表示する ページをスクロールしていくと現れる「もっと見る」をクリックすると そのエリアの続きに追加で要素を読み込みます。 サンプルではページ内に2つの「もっと見る」エリアを設置しています。 左のエリアは28個、右のエリアは20個の要素を 5個ずつ追加表示しています。 全体構成についてまずはHTMLから。 ◆HTML <div class=
jQueryで1ページごとにスクロールして画面遷移させるUIを実装する方法｜BLACKFLAG
以前、iPhone5sのプロダクトページがリリースした頃に『簡単にパララックス実装可能な軽量スクリプト「skrollr」＆コンテンツごとにページスクロールするjQueryプラグイン「fullPage.js」「One Page Scroll」』と題して1ページをフルスクリーン表示にして、画面全体をスクロールさせることで、1ページ分（1コンテンツ分）を画面遷移させるUIを実装できるjQueryプラグインを紹介しましたが、自分なりにもっと使いやすい形で実現できないかやってみた実験をご紹介してみます。 【2014/08/05 追記】 各ブロック内での横スライド機能を追加しました。 まずは動作サンプルから。 下記のサンプル画面でマウスホイールスクロールもしくは画面右側のナビゲーションボタン等を使って画面（ページ）を切り替えてみてください。 「jQueryで1ページごとにスクロールして画面遷移させるU
簡単にパララックス実装可能な軽量スクリプト「skrollr」＆コンテンツごとにページスクロールするjQueryプラグイン「fullPage.js」「One Page Scroll」｜BLACKFLAG
最近でもよく見かけるWebページ内をスクロールしてコンテンツを効果的に魅せる技法として、パララックス（少々今さら感も感じますが・・・）効果に加えて最近ではコンテンツ全体をフルスクリーン表示にして、スクロールすることで1コンテンツ分が自動でスクロールされ、次画面へ遷移するさせる技法がよく見られます。 そんなWebページ内でスクロール効果を使った動作を実装する際に役立ちそうなJSスクリプト＆jQueryプラグインを3つほど紹介してみます。 skrollr – parallax scrolling for the masses skrollr – parallax scrolling for the masses スクロールによって様々なパララックス効果を簡単に実装することができる軽量JSスクリプト「skrollr」。 デモページを見るだけでもこの「skrollr」で様々なパターンのパララックス
パララックス制作などで使えるスクロールして特定の位置でアニメーションなどの処理を実行させることが出来るjQueryプラグイン「jquery-peekaboo」「jQuery Waypoints」｜BLACKFLAG
パララックスサイト制作の際などで活用できる ページ内の特定のスクロール位置でアニメーションなど何か処理を実行させることが出来る jQueryプラグインがいろいろ使い道がありそうだったので 自分用のメモ書きとして紹介してみます。 uniba/jquery-peekaboo・GitHub 使い方はとても簡単で ページをスクロールしてアクションを実行させるポイントになる箇所に対して 下記のような記述で処理を実行させます。 ◆SCRIPT $(function(){ $('.point').on('appear',function(){ $(this).css({opacity:'0'}).stop().animate({opacity:'1'},1000); }); }); この記述の場合は、ページをスクロールして 「.point」とクラス付けされた要素の位置に辿り着いたら その要素に対してフェ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
