綺麗な動きになった！Web制作前に見ておきたいjQueryプラグインまとめ
作成：2014/12/8 Web制作 > 比較的最近のjQueryプラグインやプロフェッショナルな方々が作成されたスクリプトの中から、サイト制作時に取り入れてみたいエフェクトを厳選してご紹介。今風の見え方を実現できそうなものをチョイスしました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ ファーストビュー １．スライドを立体的に切り替え ２．クリックで滑らかにページ遷移させる ３．背景にスライド、フルスクリーンで固定させる ４．横に移動するフルスクリーンスライド ５．キューブ系のスライドを表示 ６．下方向へドラッグするとページを再読み込みする ７．要素を上下にフワフワ動かす ８．外部要素をクリックで表示 ９．タイピングエフェクト 動作 １０．サーチボックスを画面全体にオーバーレイさせる １１．デイトピッカー １２．ドラッグ＆ドロップ 画像をアップロードする
pjax こそが pushState + Ajax の本命 - punitan (a.k.a. punytan) のメモ
pjaxの前にpushStateとは AjaxとjQueryの説明は不要として、pushStateとはなんぞや。 pushStateを使ってブラウザの履歴に対する操作をし、HTMLの一部のみを書き換える動作でもブラウザの戻る／進む機能を実現できる方法のひとつ。Ajaxなページを再現し、かつURLを見慣れた方法で自然にpermalinkを表現できる。 有名なところではGitHubで使われてるアレ。 hash fragment (/#!/) ブラウザの履歴を機能させるため、URL の fragment (#) を使ってAjaxなページを実現する方法。一時期もてはやされた感があるが、さらなる「#!」URL批判 - karasuyamatenguの日記 など合理的な反論があり、これから導入するのはためらわれるところ。 有名なところではTwitterで使われているあの厄介者。 pjaxとは pjax
Pjax に挑戦したら思っていた以上に苦労した話 - present
GitHub が採用している、非同期でぬるぬる動く画面遷移、これ pushState と Ajax を組み合わせたテクニックで実現されているんですね。その名も Pjax。 HTML5 の history.pushState を使うからブラウザの履歴にも対応でき、しかも URL がキレイ。Pjax についての詳細な説明は下記のエントリが参考になりました。 pjax こそが pushState + Ajax の本命 - punitan (a.k.a. punytan) のメモ Pjax 始まったな。 |i ＼ |.| ﾄ＼ /| ﾄ | ﾄヽ / | | ﾄ | | ﾄヽ＼/| | | ﾄ ／ | | | ト＼≧三ミゞ=イ/ ム彡''´￣￣ ￣ ヽ{__.. / Ｖ´ ﾉ ＿＿ ', ,. =＝ y￣, __､＼＿
自分で育む快適英語生活！
英語のドキュメントを日々閲覧するギークにとって、英和・和英辞書は手放せない。より快適に英語の文章を読んだり翻訳したりするため、Webページ内で文章を選択するとポップアップして辞書へのリンクを表示してくれるChrome拡張を作成した。ポップアップには選択した文章を「英辞郎 on the WEB」で検索するためのリンクと、Google Translateによる訳が表示されるようになっている。 即興で作ったのであんまり凝ったことはしていないが、次のようなところにこだわってみた。 ポップアップ表示、非表示時のアニメーション。 テキスト選択領域の近くにポップアップを表示。 AJAXを使って非同期にGoogle Translateの情報を取得。（backgroundページを活用） 随所でjQueryを使いまくったが、やはりjQueryは便利過ぎると思った。今回、特定のページ（jQuery 1.4.2を
[JS]HTMLのコンテンツを3Dに回転させるスクリプト -rotate3Di
rotate3Di - Flip HTML content in 3D デモ [ad#ad-2] rotate3Diの対応ブラウザ Firefox 3.5+ Chrome Safari IE 9(pre7+) 多分、Operaも大丈夫とのことです。 ※Opera 10で動作しました。 rotate3Diの実装 rotate3DiはjQueryのプラグインのため、実装にはjquery.jsが必要です。 外部ファイル JSファイルを外部ファイルとして記述します。 <script type="text/javascript" src="jquery-1.4.4.min.js"></script> <script type="text/javascript" src="rotate3Di/jquery-css-transform/jquery-css-transform.js"></script>
jQueryプラグインのベストトレンド総まとめ2010*ホームページを作る人のネタ帳
もはやこの業界ではかなり浸透しつつあるjQuery。 今回はそんなjQueryにスポットを当て、本年度紹介された中でも、ホットなトレンドプラグインをご紹介します。 ※プラグインつかってないのもあります。 １）3D表示プラグイン サンプルデモ 今年のトレンドと言えば3D。 というわけでこちら。まずはサンプルデモを確認。 触ってわかる通りですが、2枚の画像が3D表示されます。 呼び出す $(function() { $('#mindscape').smart3d(); }); HTML <ul id="mindscape"> <li><img src=".../mindscape1.png" /></li> <li><img src=".../mindscape2.png" /></li> </ul> CSS #mindscape { width: 720px; height: 170px;
Ajax - jQueryでjQueryを内観する : 404 Blog Not Found
2010年08月25日06:30 カテゴリLightweight Languages Ajax - jQueryでjQueryを内観する jQueryは使っても楽しいのですが、ソースを読むのはもっと楽しかったりします。 いっそjQuery自身にjQueryを読ませたら読むのも楽になるのでは? jQuery Source Browser というわけでこさえたのがこちらです。 Open in New Window select from the menu on the left こんなのがあっという魔に作れるところも、jQueryの魅力です。 で、実際にソースを見てみると、白魔術も黒魔術も使いまくりですね。 たとえばjQuery.isType()。toString.call(obj)とはね。 たとえばjQuery.globalEval()はeval()を全く使っていないし。 あとこれ書いて気づ
$(DHTMLcoders).read(this) || throw your.job - 書評 - jQueryクックブック : 404 Blog Not Found
2010年08月19日01:00 カテゴリ書評/画評/品評Lightweight Languages $(DHTMLcoders).read(this) || throw your.job - 書評 - jQueryクックブック オライリー矢野様より献本御礼。 jQueryクックブック jQuery Community Experts / 株式会社クイープ訳 [原著:jQuery Cookbook] これでなくなった。 jQueryを使わない理由が。 DHTMLを利用する全ての人、必携。 特にHTMLやCSSを書いても、JavaScriptはそれほど書かない人。これであなたにも書けるようになります。 本書「jQueryクックブック」は、今や最重要のJavaScript Libraryといっても過言ではないjQueryの手引書。 目次 まえがき - John Resig はじめに jQuer
onehackoranother.com | Default Web Site Page
SORRY! If you are the owner of this website, please contact your hosting provider: webmaster@onehackoranother.com It is possible you have reached this page because: The IP address for this domain may have changed recently. Check your DNS settings to verify that the domain is set up correctly. It may take 8-24 hours for DNS changes to propagate. It may be possible to restore access to this site by
サクサク作成、書いて貼ってポイできるjQuery付箋プラグイン
手軽・それでいて使い易い ただまぁ、ブログや一般のwebサイト使えるような代物でもないので、こんなのがあるよー程度に覚えておくといいかもしれない。 メモ帳は手軽にD&Dが出来ます。 新規作成も手軽。 一度作ったメモ帳はダブルクリックで編集可能。左上の×ボタンでメモを破棄します。 フィールドサイズは以下で指定。 <div id="notes" style="width:800px;height:600px;"> </div> 導入はヘッダーで行います。 <html> <head> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="jquery.ui-1.7.2.custom.min.js"></script> <script type="
PHP、Perl、Ruby、C、C++等40以上の言語をブラウザで実行できるようになるjQueryプラグイン「Run This」:phpspot開発日誌
PHP、Perl、Ruby、C、C++等40以上の言語をブラウザで実行できるようになるjQueryプラグイン「Run This」 2010年03月11日- Run This! PHP、Perl、Ruby、C、C++等40以上の言語をブラウザで実行できるようになるjQueryプラグイン「Run This」。 ブラウザ内の<pre>コードで記述した部分を、その場でそのまま動かすことができ、うまくサイトに組み込めばより訪問者にとってわかりやすいページを作ることが出来そうです。 例えば、PHPの入門サイトなんかでは挙動を一瞬で確認できてしまいます。 具体的には以下の言語に対応しています。 Ada, Assembler, AWK, Bash, bc, Brainf**k, C, C#, C++, CLIPS, Clojure, COBOL, Common Lisp, D, Erlang, Forth
第4回 メニューを彩るプラグイン（1） | gihyo.jp
はじめに 第4回はサイト（ページ）には必ず用意されているメニュー、それに関するプラグインについて紹介していきます。 プラグインを使うことで、サイトを差別化するための機能的／デザイン的なメニューをシンプルなHTMLから簡単に作成することができます。 お薦めメニュー系プラグイン メニューに関するjQueryプラグインもLightbox系のもの同様、様々なものが多数存在しています。今回も特徴的なもの3点をピックアップし、今回と次回、2回にわたり解説していきます。 Kwicks Kwicksはメニューの領域を、マウスオーバー／マウスアウトなどのイベントで収縮させるプラグインです。横方向のメニューだけでなく、縦方向のメニューにも利用することができ、収縮アニメーションのイージングや時間間隔も調整することができます（デモはこちらで確認できます）。 図1 Kwicks jQuery Multi Lev
37 More Shocking jQuery Plugins - noupe
It’s really amazing to see what one can create using jQuery. Developers just don't stop making incredibly interactive web applications every now and then. This post just demonstrates excellent examples of some of the best jQuery plugins out there. You can also take a look at the other jQuery Plugins in this series : 45+ Fresh Out of the oven jQuery Plugins 50+ Amazing Jquery Examples- Part1 So let
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
5509.me
IDEA * IDEA
https://atmarkit.itmedia.co.jp/ait/subtop/features/da/dt_jqueryref_index.html
http://moto-mono.net/2010/03/09/jquery1-4-plus-alpha.html
IDEA * IDEA
IDEA * IDEA
jQueryでweb制作をする時にキープしておきたい30リストまとめ*ホームページを作る人のネタ帳
