Fancy Inputテキスト入力時にアニメーシ... / Hook.js下にひっぱるとリロードするjQue... / Kontext CSS3を使った3Dなページ切り...他...全17件
![これからのWeb制作に使える、面白いUIを実装できるjQuery・CSS集](https://cdn-ak-scissors.b.st-hatena.com/image/square/a46460e8153402c7956cc93657c0c829f9543bce/height=288;version=1;width=512/http%3A%2F%2Fw3q.jp%2Fupload%2F2013%2F3%2F4%2Fl_2013-3-4_0b0a2cb64255beb391306bb654381a62.jpg)
どうも、はやちです_(:3」∠)_ スマホに使うとよりサイトが見やすくなるjQueryをまとめてみました。 アコーディオン アコーディオンみたく開閉式のメニューが実装できるjsです。 記事の多いコンテンツをまとめるのに便利ですね。 ■動きをみる HTML <dl class="acordion"> <dt class="trigger">アコーディオンメニュー<span class="open-close">open</span></dt> <dd class="acordion_tree">テキストテキストテキストテキストテキストテキストテキストテキスト</dd> <dd class="acordion_tree">テキストテキストテキストテキスト テキストテキストテキストテキスト</dd> <dd class="acordion_tree">テキストテキストテキストテキストテキストテキ
40 Cool jQuery Animation Tutorials and Plugins by Sonny M. Day | Last updated Jun 24, 2013 | jQuery Plugin Collections | 12 comments Since its arrival, jQuery has caught the web by storm and now it is one of the preferred solutions in creating fancy animations on web pages. jQuery provides great cross browser support, it is lightweight and easy to use. Right now, you can see jQuery effects applied
jQuery has become one of the most accepted JavaScript library that has been used all over the world. For this reason, many people all around the world are interested in learning this wonderful creation of the technology. Tutorials is the best thing on the internet to learn from. This time, we are specifically presenting some fresh tutorials that were recently released. These tutorials will cover d
jQuery has totally revolutionized the way web developing was done. It has enabled developers to create extremely impressive, beautiful and interactive websites and web applications, and that too quite easily. The thing that makes jQuery really handy and makes it every developer’s preferred choice is the availability of plugins. jQuery plugins are really useful and helpful for developers. So to hel
Navigation menu is the crucial role playing item in any web design. Never mistake by ignoring your website navigations because none of design can attract that smartly but a stylish looking navigation menu can do the smart work. Are you one who looking for some simplest solution of how to make a jQuery drop down menu? If yes! Luckily you’re at the right place. Our this tutorial will help newbies to
結構良かったのでご紹介。ECサイトとか で見かける、マウス乗せると画像が拡大 するやつです。拡大鏡とか言えばいいん でしょうか?ニーズはそこそこありそう ですし、かなり軽量で導入も簡単なので 覚えておくと工数減らせるかもですね。 いわゆるルーペ的なものを作れるライブラリで、プラグイン名もまんま「ルーペ」です。2KBとかなり軽量で、圧縮すると1KBちょっと。導入するとクライアントさんもユーザーさんも喜びそうですし、うまく使えばプロダクトの訴求力も上げられるのではないでしょうか。 こういうやつ。個人的にはこれ付けてくれるとかなり購買意欲湧きます。ECサイトでは現物見れないので写真は大事ですね。 オークションなんかは傷や汚れの関係でトラブルになりやすいので導入してくれるといいんですけどねー。 因みに周りにテキストがあってもそれは拡大しないです。 やっぱりjQuery。IE6でも大丈夫。やっぱりイ
入力フォームの上にあらかじめ入力例や注意書きを表示する「プレースホルダ(placeholder)」。 入力する際の注意書きや入力例などを予め表示しておくことで、ユーザーに優しいUIにすることができます。 HTML5ではplaceholder属性という、新たな属性として簡単にプレースホルダを表示できるようになっていますが HTML5に対応していないブラウザではJSなどを使って実装しなくてはいけません。 このプレースホルダを表示するjQueryプラグインも多々ありますが シンプルなスクリプト構成で実装できないか、試しにやってみたので紹介してみます。 まずは実装サンプルから。 下記の入力フォーム(INPUTテキスト、パスワード、テキストエリア)にフォーカスすると 表示されているテキストが消えます。 入力フォームからフォーカスが外れた際に、 フォーム内に何か任意のテキストが入力されていると プレー
30以上のアニメーションにプログレスバーの追加など多機能スライドショーSkitterが本当にすごい!導入方法など 公開日:2012年3月19日 カテゴリ:Web制作が捗るツール ぱくたそのトップページでも利用しているjQueryスライドショー"Skitter"が新しくなりましたよ。30種類以上のアニメーションにプログレスバーまで実装され『もうFLASHやめてこれでいいんじゃね?』的な高機能っぷりです。今回は導入方法とアニメーションのサンプルを動画にてUPしておきました。参考になったらGrow!してね。w Skitter - Slideshow for anytime! Skitterを導入してWEBサイトをカッコよく魅せよう どこのWEBサイトもトップページに綺麗な写真をスライドショーさせるスタイルは定着しているけれど、未だにFlash使っていたり、フェードだけの画像切り替えで動きがなかっ
80 Useful (Free) jQuery Plugins to Enrich Your Site’s User Experience Most of you already aware that jQuery is a lightweight JavaScript library that emphasizes interaction between JavaScript and HTML. it’s also known for fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. Or in developer’s words “
Posted: 2012.03.30 / Category: javascript / Tag: jQuery 以前、PHPでページャーを作成しましたが、それのjQuery版を作成しました。 あまり用途ないかもしれませんが、Ajaxでいろいろしたい場合Javascriptで表示できた方が便利かなとか。 プラグイン的な使い方 divに適当にidを割り当てます。 出力されるタグは最近流行の Twitter Bootstrap を基本としてますので「class="pagination"」としておくといい感じになります。 自分でカスタマイズする場合は59~77行目あたりを修正してください。 html <div id="pager" class="pagination"></div> jQueryの実行部分では最低限「totalRec(トータルレコード数)」オプションを指定します。 html <sc
If you are familiar with web design for the last 12 months or more then you might just heard of responsive web design.Well,responsive web design or mobile friendly web design is basically the concept of building a website that allows the layout and elements adapt itself according to the device people are viewing. In today’s post we have gathered jQuery plugins for responsive web design.I know you
15 Stunning jQuery Lightbox Plug-ins for Your Upcoming Designs If you see a website built on jQuery using images, they must have played with a lightbox in that context. That’s the power of the lightbox, it can transform any simple image library into an attractive and effective gallery. It’s an important and popular contribution from the jQuery side to the design community. Thanks to the awesome jQ
ブラウザの幅にあわせてフォントサイズを拡大・縮小するjQueryプラグイン「FitText」を紹介します。 FitText ウェブサイトをPC・スマホ・タブレットなど色々なサイズのディスプレイに対応させるときに便利そうです。 1.サンプル 上記の配布サイト自体がサンプルになっていますが、ためしに作ってみました。 サンプル ブラウザの幅を変更するとタイトルの「FitTextサンプル」の部分が拡大・縮小します。 以下、具体的な設定方法です。 2.FitTextのダウンロード 「FitText」のページにある、「Download on Github」をクリック。 「ZIP」をクリック。これでダウンロードが開始します。 ダウンロードしたアーカイブを展開した中にあるjquery.fittext.jsを任意の位置にアップロードします。 3.FitTextの設定 次のHTMLを拡大・縮小の対象にしてみま
Home - Tooltip your images - iPicture jQuery Plugin 写真上にコメントが載せられるjQueryプラグイン「iPicture」 写真の上に+のアイコンをオーバーレイでき、マウスオーバーでコメントが表示されます。 写真上でそこまで邪魔にならないけどそれなりに目立ち、説明を読んでもらいたいような場合に使えそうです コメント表示例。半透明なのでそれほど嫌な感じでは無いですね 商品の説明等に使うと分かりやすい商品説明ページが作れるかもしれませんね 関連エントリ Flickrみたいに写真内に枠を作ってコメントできるようにするjQueryプラグイン CSSのみで画像に違和感なく注釈を入れるサンプル
jQueryは、非常に人気と歴史のあるJavaScriptライブラリです。jQueryを利用すれば、直感的なコードで、思い通りのUI処理を容易に実現できます。この記事では2回にわたり、jQueryの基本を説明するとともに、実際にサンプルを作成しながらjQueryプログラミングの要諦を紹介します。 jQueryを利用する際の開発環境ですが、jQueryではコードを非常にコンパクトにできるため、普通のテキストエディタでもプログラミングを行うのはそれほど難しいことではありません。しかし、Dreamweaver CS5.5にはjQuery開発を支援する様々な機能が用意されており、Dreamweaver CS5.5を使えば、開発に必要な時間をさらに短縮することができます。 jQueryは、手軽に「DOM(Document Object Model)」を操作できるようにするライブラリです。DOMという
Posted: 2012.04.10 / Category: javascript / Tag: jQuery ブラウザ標準のチェックボックス&ラジオボタンのデザインだと俺のクールなサイトには合わん。 といったときの為にボタン風なオリジナルデザインにする方法をご紹介します。 cssオンリーの場合 まずはcssのみでやってみます。 隣接セレクターやcheckedセレクターを使用している関係でieでは動きません。 <div class="check-group clearfix"> <div> <input id="checkbox1" type="checkbox" name="check[]" value="c1" /> <label for="checkbox1">Checkbox 1</label> </div> <div> <input id="checkbox2" type="ch
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く