綺麗な動きになった！Web制作前に見ておきたいjQueryプラグインまとめ
作成：2014/12/8 Web制作 > 比較的最近のjQueryプラグインやプロフェッショナルな方々が作成されたスクリプトの中から、サイト制作時に取り入れてみたいエフェクトを厳選してご紹介。今風の見え方を実現できそうなものをチョイスしました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ ファーストビュー １．スライドを立体的に切り替え ２．クリックで滑らかにページ遷移させる ３．背景にスライド、フルスクリーンで固定させる ４．横に移動するフルスクリーンスライド ５．キューブ系のスライドを表示 ６．下方向へドラッグするとページを再読み込みする ７．要素を上下にフワフワ動かす ８．外部要素をクリックで表示 ９．タイピングエフェクト 動作 １０．サーチボックスを画面全体にオーバーレイさせる １１．デイトピッカー １２．ドラッグ＆ドロップ 画像をアップロードする
コンテンツをまるごとスライドさせるjQueryプラグイン「bxSlider」の使い方。 | k0u1.com
指定した要素をまるごとスライドさせるjQueryベースのプラグインがとっても使いやすかったので記事にしてみます。 コンテンツをまるごとスライドさせるjQueryプラグイン「bxSlider」。 タイトル通りコンテンツや画像をまるごとスライドさせるプラグインです。jQueryで出来ていてIEにも対応！何より導入が簡単すぎます！そしてなんとレスポンシブWebデザインにも対応してるじゃありませんか！ 僕が使った時はResponsiveなんて書いてなかったのに…。 でも時代のニーズに応えて改良をしてくれているところもかなり高評価ですね！ ダウンロード まずは例のごとくプラグインをダウンロードします。 ダウンロードはこちらから 外部ファイルを読み込む jQueryはグーグルのサーバーから、jsとcssは適宜パスを変更してください！ <!-- jQuery library (served fro
背景画像を画面いっぱいに表示させる「bgStretcher」の使い方。 | k0u1.com
バンド活動をしている友人のWebサイトを作ってるんですが、こういうビジュアルメインのサイトで活躍するプラグインを紹介します。 なんとこのプラグインはスライドショーだってできちゃいます!! jQueryでできているのでカスタムも簡単ですしjQueryがわからなくても使えちゃうかもしれません!! ダウンロードはこちらから デモページはこちらから ほんとに使い方が簡単なので本家のサイトを見てみるだけで気軽に使えると思いますが、日本でも人気なプラグインのようでわかりやすくまとめてくださっている記事もあります。 ダウンロード 1.まずはこちらからbgStretcherの本体をダウンロードします。ダウンロードしたフォルダにはすでに動作に必要なjQueryも入っています。 外部ファイルを読み込む 2.<head>…</head>の中でjQueryとbgStretcherのプラグイン本体とbgStre
【jQuery】スクロール時に指定位置で要素を固定させるscrollfix.js
スクロールしてもサイドバーの一部が消えずについてくるサイト、最近よく見掛けますよね。どうしても真似したくて当サイトでも導入しました。 左サイドバーの新着記事とサイト内検索のボックスがそうです。メニューや更新情報など、常に表示しておきたい要素に使うとより効果的ではないでしょうか。 設置の方法・手順はいたってシンプル。 まずはサンプルを参照いただいた上で以下をご覧ください。 まずはjQuery本体をhead内に設置 多様なjQueryの機能を利用するために必要な親玉？をサーバに設置するか、Google Developersから引っ張ってくる必要があります。VerUPのたびに削除したりするのは面倒なので個人的には後者をお勧めします。既にバリバリjQueryを使っている方はここは飛ばしてください。 <link href="//code.jquery.com/ui/1.10.3/themes/smo
レスポンシブに要素を消さずに変形するテーブル実装jQueryプラグイン「Basic Table」:phpspot開発日誌
Basic Table Demo レスポンシブに要素を消さずに変形するテーブル実装jQueryプラグイン「Basic Table」。 テーブルのレスポンシブ対応は厄介で色々な対応方法がありますが、なかなかスマートな対応ができるプラグイン。 次のように一見普通のテーブル。 ブラウザの幅を狭めると、次のように変形します。 テーブルにmaxHeightを設定して、縦に大きくなり過ぎないような配慮も出来ます。スマホなのでは縦に長すぎると困ることもあるので、便利ですね 関連エントリ インライン編集できるテーブル実装用jQueryプラグイン「editable-table」 HTML5＋JSONでインタラクティブなテーブルを作れる「Dynatable.js」 HTMLテーブルを JSON、XML、PNG、CSV、PDFなどあらゆる形式に変換できる「HTML table Export」 複数条件で結果を絞
[JS]最近のWebサイトで見かける面白い仕掛けや便利な機能を実装するスクリプトのまとめ
最近のWebサイトでよく見かける面白い仕掛けのコンテンツやエフェクト、便利な機能を実装できるjQueryのプラグインやスクリプトを紹介します。 Midnight デモページ ロゴやヘッダなどをスクロール時に固定表示し、スクロールして表示されたコンテンツに応じて、固定エレメントのスタイルシートを変更させて表示するjQueryのプラグイン。 デモでは、表示されているコンテンツに応じて、ロゴの背景色とカラーが変わります。 Off Canvas Menu Effects デモページ メニューをサイドやトップ・ボトムから気持ちいいアニメーションで表示させるOff Canvas Menuのかっこいいエフェクトのまとめ。アニメーションのバリエーションとして見るだけでも楽しいです。
![[JS]最近のWebサイトで見かける面白い仕掛けや便利な機能を実装するスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/eb35406166a9bab01fb02a6a7949249bd7191347/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014092904-01.png)
jQueryカウントダウンタイマー【デザイン自由自在版】 - Web制作・Webシステムの株式会社ワイワイエンジン
jQueryプラグイン「yycoutdown」は、現在日時または指定日時から指定終了日時までのカウントダウンを表示するjQueryプラグインです。誰でも簡単に使えます。 また、見た目は簡単にCSSで変更できますので、どのようなサイトでも利用しやすくなっています。
シンプルなツリービューを実現できるjQuery「Bonsai」:phpspot開発日誌
jQuery Bonsai by aexmachina シンプルなツリービューを実現できるjQuery「Bonsai」。 olなどで階層的にリストを定義して初期化すれば簡単にツリービューが作れます。 ツリーにチェックボックスをつけることも可能。シンプルなだけに使い勝手がよさそう シンプルなリスト チェックボックスありのリスト 関連エントリ キーボードでも操作できるツリービュー実装jQueryプラグイン「a11yTree」 OS標準のツリービューが実装できるjQueryプラグイン「fancytree」 ULリストをツリービュー状に開閉できるようにするjQueryプラグイン「Sapling」 階層データを複数選択できるUIを実装できるjQueryプラグイン「treeselect.js」
Web制作で使えた！jQueryプラグインまとめ＋起業しました
作成：2014/09/1 更新：2014/11/01 Web制作 > 報告が遅れましたが、5月に退社し6月に起業（株式会社コムテ）しました。今までブログにメモしておいたことが、起業や納品に役立った部分もあり、ブログを継続してよかったと思います。ブログを見てくださっている皆様、ご紹介させていただいたサイト運営者様、応援して下さっている皆様には心よりお礼申し上げます。経営や制作の部分ではまだまだ未熟ですが、今後ともご指導ご鞭撻のほど、よろしくお願いします。 今回は「Web制作で使いたい」jQueryプラグインやスクリプトなどをまとめました。WordPressテーマを作るときに使うもの、検索でヒットしにくいプラグインも多数ご紹介。 エンジニア速報は Twitter の@commteで配信しています。 もくじ 動画 １．動画をブラウザの背景全体に再生させる ２．動画を綺麗に表示させる WP管理画面
ブロック要素の高さをレスポンシブに揃えられる「jquery-match-height」:phpspot開発日誌
liabru/jquery-match-height GitHub ブロック要素の高さをレスポンシブに揃えられる「jquery-match-height」 以下のように、高さの異なるブロックも瞬時に同じ高さに揃えて統一感が出せます ブラウザのリサイズで要素もリサイズされるので便利。 関連エントリ レスポンシブで何でも埋め込めるLightBox実装jQueryプラグイン「VenoBox」 レスポンシブなギャラリー構築ができるLightBox実装jQueryプラグイン「lightGallery」 レスポンシブなタブを実装できるjQueryプラグイン「Responsive-Tabs」 フラットでレスポンシブなギャラリー実装jQueryプラグイン「lightGallery」 画像表示をレスポンシブ対応にするjQueryプラグイン「Data Img」 レスポンシブでタッチフレンドリな軽量LightB
任意の要素を3D回転させ、立体的に見せる国産のjQueryプラグイン・TURNBOX.js
任意の要素をアニメーションエフェクトで立体的に見せる、というスクリプト・TURNBOX.jsのご紹介。フラットなデザインと相性良さそうです。 要素に立体的なアニメーションエフェクトを与えて、3DなUIにする事ができます。フラットなデザインに使って欲しいとの事です。開発者さんはNOHTさんという日本の企業さんなので疑問があった場合でも連絡が取りやすいので安心ですね。 動作サンプルです 他にもアップロードのローディングに使えたりいろいろ応用幅が広い印象です。 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="turnBox.js"></script>↑ 本体とプラグインを読み込みます。 $(".foo").
Googleスプレッドシートに書いた内容をtableで実装するjQueryプラグイン・Sheetrock
Googleスプレッドシートに書いた内容をtableで実装するjQueryプラグインのご紹介です。データを手軽にWebサイトに表示出来るのは楽でいいですね。 Googleスプレッドシートをtableで表示するスクリプトです。以前にも似たスクリプトをご紹介しているので選択肢の一つとして。 空のtableにスプレッドシートに書かれた内容が挿入されています。 var mySpreadsheet = 'https://docs.google.com/spreadsheet/foo?key=bar#gid=0';読み込みたいスプレッドシートを指定します。 $('#hoge').sheetrock({ url: mySpreadsheet });tableをセレクタに設定してスプレッドシートを読み込みます。 <table id="hoge"></table>tableを用意すればOK。 手軽で良い感じ
フルスクリーンでかつスクロールする迫力あるギャラリー実装が可能になる「Intense Images」:phpspot開発日誌
Intense Images フルスクリーンでかつスクロールする迫力あるギャラリー実装が可能になる「Intense Images」 単なるフルスクリーンではなく横長の画像であればマウス位置に追従してスクロールするというカッコいいギャラリーが作れます。 写真メインのサイトではこれぐらい写真が大きいと見やすいな、というのが実感できます。 関連エントリ 新Flickr風のギャラリーが作れるjQueryプラグイン「Justified Gallery」 レスポンシブでPinterest風レイアウトのギャラリーが作れるjQueryプラグイン「Galereya」 レスポンシブ対応でCSS3アニメーションを使った超クールギャラリー実装プラグイン「S Gallery」 レスポンシブなギャラリー構築ができるLightBox実装jQueryプラグイン「lightGallery」
超カッコいいテキストアニメーション効果を作れるjQueryプラグイン「LetterFX」:phpspot開発日誌
LetterFX jQuery Plugin | TuxSudo Web Development 超カッコいいテキストアニメーション効果を作れるjQueryプラグイン「LetterFX」。 豊富なアニメーションを選んで、更にそれらをカスタマイズして動かせます。サイト上でパラメータをいじりながら遊んだりできます。 テキストを動かしてインパクトを与えたい場合に覚えておいて損はなさそう 関連エントリ Flashみたいに美しいCSSテキストアニメーションデモ CSS3による多彩なテキストアニメーションが実装できるjQueryプラグイン「Textillate.js」 面白いテキストアニメーションが作れるjQueryプラグイン「textualizer」
jquery 1.xと2.x の違い、さらに動作を高速にするための設定 | まとめーたー
photoBy: http://www.jose-aguilar.com/blog/wp-content/uploa…まずは jquery 1.x と 2.x の違い 1.x 系は IE8 以前をサポートするが遅い、重い 2.x 系は IE8 以前のサポートは捨てて、いるが軽い、早い アイルトン・セナじゃあるまいしそんなに早くしてどうすんの？Webページがたった1秒高速化するだけでECサイトなんか、売上が10％向上した事例もあります。 使い分ける対応していないIE8以下には古いjqueryを読み込ませます <!--[if lt IE 9]> <script src="jquery-1.9.1.js"></script> <![endif]--> <!--[if gte IE 9]><!--> <script src="jquery-2.0.0.js"></script> <script s
[JS]Lightboxの進化形！クリックでもタップでも快適動作の画像を拡大表示させる超軽量スクリプト -Intense Images
サムネイル真ん中の風景写真は縦長 Intense Imagesの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして記述します。 ※jQueryなど他のスクリプトは必要ありません。 <head> ... <script src='../intense.js'></script> </head> Step 2: HTML 画像は2種類の配置方法があります。 img要素はサムネイルと拡大時の画像を兼用し、data-image属性は拡大時に高解像度の画像を利用することができます。 <img src="./img/awesome-source.jpg" /> <!-- OR --> <div class="anything" data-image="./img/awesome-source.jpg" /> data-imageを使用する時は、サムネイルはCSSで背景画像として指定
初心者でも分かる！な、jQueryの「TOPへ戻るボタン」の作り方
ページをスクロールすると右下に出てくる「TOPへ戻るボタン」の作り方を、jQuery初心者にも分かるよう説明しています。
Web制作者が捗る！知識が増える2014年トレンドまとめ
作成：2014/06/9 Web制作 > トレンド感のある動きや、洗練された見え方を実現するために、知っておきたいことや方法など。Web制作の現場で知っておくべきことをまとめました。全部取り入れるのは無理ですが、押さえておくことで今以上に見栄えのするサイトを作れると思います。ここ最近のトレンドをおさらいしたいときに。 エンジニア速報は Twitter の@commteで配信しています。 もくじ ファーストビューで使いたいエフェクト １．ロングシャドウ ２．ポリゴン ３．ラージフォトスタイル ４．ブラーエフェクト ５．フルスクリーン動画 ６．画像シーケンス 脱ビットマップ画像 ７．SVG ８．Webフォントを円で囲む 配色・フォント ９．配色(フラットデザイン) １０．タイポグラフィ(フラットデザイン) １１．フォント(フラットデザイン) 効果 １２．Infinite Scroll(無限スク
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
1216彩票-官网平台
グルーピングや入れ子、RWDにも対応の、エレメントの高さを揃えるスクリプト・「jquery.matchHeight.js」
