サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
毎年恒例のjQueryのプラグインとスクリプトの総まとめを紹介します。「100選」の名称は恒例なので、実際は100以上あります。 今年目立ったのは、ランディングページなどの縦長ページ系、スクロールエフェクト系・CSSやSVGのアニメーションでしょうか。あとレスポンシブ周りも単にサイズ変化に対応させるだけでなく、ユーザビリティを向上させるものが充実していました。 背景関連SVG関連 縦長ページ関連 スクロール連動・パララックス関連 その他スクロール操作・補助関連 レスポンシブ関連 ナビゲーション関連 レイアウト関連 コンテンツ生成関連 コンテンツ紹介・ツアー関連 ソーシャル関連 スライダー・カルーセル関連 画像拡大・配置・キャプション関連 アニメーション関連 エフェクト関連 テキスト関連 タブ・アコーディオン関連 テーブル・リスト・チャート関連 フォーム関連 パネル・ボックス関連 モーダル
最近のレスポンシブWebデザインの影響もあって ボックスをタイル状に並べた構成のグリッドレイアウトWebサイトをよく見かけます。 ウィンドウサイズによって最適な配置で画面を構成できたりするグリッドレイアウトですが jQueryを使って簡単に実装することができるプラグインを自分用メモとして紹介してみます。 まずは「BlocksIt.js」BlocksIt.js | Dynamic Grid Layout jQuery Plugin – Plugin Page デモページはこちらBlocksIt.js Demonstration #1 – Random Dynamic Grid LayoutBlocksIt.js Demonstration #2 –Pinterest Dynamic Grid Layout withCSS3Transitions ページをロードするたびにランダムで
最近、特に女性に人気があるPinterest（ピンタレスト）。 その人気の秘密のひとつが、そのシンプルでお洒落なデザイン性です。Pinterest（ピンタレスト）は白地に画像がずらりと並んだビジュアル中心のデザインになっていて、とてもシンプルですが、ファッション誌のようでただ眺めているだけでも退屈しません。 そのPinterest（ピンタレスト）風に画像を一覧表示させてくれるのが、このjQueryプラグイン「BlocksIt.js」です。 サンプルページを作ってみました。 → Pinterest（ピンタレスト）風に画像を並べて表示するjQueryプラグイン「BlocksIt.js」サンプル jQueryプラグイン「BlocksIt.js」の使用方法は続きをどうぞ。 【使用方法】 まずは、こちらの本家のサイトからBlocksIt.jsなど一式ダウンロードします。 <head>部分にcssと
通常、htmlの項目は規則正しく並ばせることは出来ますが、Pinterestの様に隙間を埋めるようなことは出来ません。 [通常のhtml/css] [Pinterest風のレイアウト] ■The Wookmarkをダウンロード 以下のサイトの右カラムにある「DownloadZIP」からダウンロードします。 https://github.com/GBKS/Wookmark-jQuery ■htmlを記述 構造は、並べたい画像を全てul ＞ liの形式で並べその上を＜div＞で囲っておきます。 この時、＜div＞にはrole属性も設定しておきます。 ＜div id=”main” role=”main”＞ ＜ul id=”tiles”＞ ＜li＞＜img src=”img/sample01.jpg” alt=”” /＞＜/li＞ ＜li＞＜img src=”img/sample01.jpg”
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
pinterestのような、 ・要素を隙間なく敷き詰める ・ブラウザのリサイズに応じて配置も変わる といった機能を持つタイルビューを実現するjsのライブラリはいくつかあります その中でも今回は定番のmasonryを使い、 ajaxでページングして下に下にコンテンツをページ遷移なしで追加してみます 基本的なmasonryの使い方は他に記事が大量にあるのでここでは解説しませんよ! 完成イメージは(手前味噌ですが)こんなかんじです↓ tokyotownname.com では始めます、 画像がいくつかトップにあり、 その下に「もっと読む」ボタンがあるとします。ありがちですね。 <!-- タイルビュー --> <div id="images"> <div id="image-unit">....</div> <div id="image-unit">....</div> ...... <div id
千代田区 九段北 | Kon Yuichi 2013-06-16 02:16:50 +0900 Show 中央区 新富 | Kon Yuichi 2013-06-14 00:30:50 +0900 Show 墨田区 向島 | konpyu 2013-06-09 00:02:17 +0900 Show 墨田区 堤通 | konpyu 2013-06-08 23:56:14 +0900 Show 墨田区 八広 | konpyu 2013-06-08 23:54:10 +0900 Show 墨田区 京島 | konpyu 2013-06-08 23:52:27 +0900 Show 墨田区 東向島 | konpyu 2013-06-08 23:44:39 +0900 Show 渋谷区 恵比寿西 | konpyu 2013-05-27 01:02:10 +0900 Show 渋谷区 東 | kon
Salvattore ? A jQuery Masonry alternative withCSS-driven configuration.CSSで設定ができるPinterest風レイアウト実装ライブラリ「Salvattore」。Pinterest風UIを実現するライブラリは多数ありますが、CSSで設定が出来るのは便利かもしれません JSは使っていますが、カラム数等の調整をCSSでできるのが特徴です。 関連エントリ ドラッグ＆ドロップで再編成できるPinterest風レイアウト作成プラグイン「jQuery.Shapeshift」 画像をクリックで選択してフォーム送信できるようにするjQueryプラグイン「Image Picker」
How to Develop a Social Mass Media Policy andTemplate In today’s digital age, social mass media has become a powerful tool for communication, marketing, and community engagement. However,its widespread use also introduces risks such as reputational damage,privacy breaches, and inappropriate content sharing. Developing a comprehensive social mass media policy is essential for organizations to gu
ピークは過ぎた気もしますが、見ているだけで楽しい気がするPinterest。ちょっとこの見た目を実験したくなったので作ってみました。スコア(つくれぽ数 x はてぶ数)が高いCookpadの中でも人気のありそうなレシピを一覧できます。名前はRecipe +PinterestでRecipinterestです。アクセスはコチラから。 今日の晩ご飯が決まらないなーという時に、一度ご覧くださいませ。 今回はサーバー側は目新しいものはなくて、いつも通りのDjangoなのですが、クライアント側でmasonryというタイリング用のモジュールを使わせてもらっています。やや動きに不満がありますが、簡単にPinterest風の見た目を作れて楽しいです。
Responsive, easily customizable jquery gallery with a masonry layout. Works onChrome, Safari, Firefox, Opera(turned off someCSSanimations), IE7+(Graceful degradation),Android browser,Chrome mobile, Firefox mobile, Safari on iOS andetc. Galereya effects and browser compatibility depends on your customCSS styles a lot! $('#gal1').galereya({ load: function(next) { $.getJSON('images.json', func
Pinterest風グリッドレイアウトを作ってみよう：jQuery×HTML5×CSS3を真面目に勉強（3）（1/4 ページ） はじめに 一口にSNSというと、読者の皆さんはまず、TwitterやFacebook、LINEなどのサービスを思い浮かべることでしょう。しかし、こういったデファクトスタンダードなサービスだけでなく、世の中にはさまざまなジャンルに特化したSNSがいくつも登場してきています。 特に写真共有に特化したSNSのUIというのは、その特性のためか画像を画面いっぱいに敷き詰めたものがよく見受けられます。基本的な操作性はもちろんのこと、いかに美しく、ユニークに画像を並べるかによって他サービスとの差別化を図るかが、デザイナーならびにフロントエンドエンジニアの腕の見せ所といっても過言ではありません。Pinterestは、そうした写真共有SNSの1つです。高さが均一のグリッドが整然と
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
