JQueryの覚え書き / 要素を順番にフェードしながら表示 | 気分はいつでも日曜日
ページを読み込む時のちょっとした演出として、任意の要素を順番にフェードさせながら表示させてみる。 要素については div でも良いのだけれど、今回は li を使って、上から順番にフェードインするようにしてみた。 <ul class="fadeInItems"> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> <li>10</li> <li>11</li> <li>12</li> <li>13</li> <li>14</li> <li>15</li> <li>16</li> <li>17</li> <li>18</li> <li>19</li> <li>20</li> <!-- /fadeInItems --></ul> 仕組みとしては、クラス
WEBフロントエンドエンジニア向け勉強会 – Frontrend vol.4に参加してきました · STUDIO KINGDOM
おさらいの中での個人的なメモ Command + O : js / cssファイル検索 Command + Shift + O : 関数選択 Command + L : 行指定 Command + Option + F : js全体の検索 ChromeのProfileは下記の画像のように関数のボトルネックなんかを調べることが出来る。Profileは全然使ってなかったのでこの情報は大変ありがたかったです。自分のローカル開発のスクリーンショットを撮ってみました。 Charles http://www.charlesproxy.com/ デバッグ用Proxyで有償$50(試用期間30日) 多機能で全部紹介しきれないので、厳選して2つの機能だけ紹介してくれました。 MapLocal リモートのWebサイトのファイルの一部(CSSファイル等)をローカルのファイルを差し替えることが出来る。 デモではC
[JS]jQueryのプラグインを利用する時に、アイデアを加えてかっこいいエフェクトを実装する -jQuery Visible
Slide in box -YouTube 実装 使用するプラグイン「jQuery Visible」は、非常にシンプルです。 (function($){ /** * Copyright 2012, Digital Fusion * Licensed under the MIT license. * http://teamdf.com/jquery-plugins/license/ * * @author Sam Sehnert * @desc A small plugin that checks whether elements are within * the user visible viewport of a web browser. * only accounts for vertical position, not horizontal. */ $.fn.visible = fu
jQuery - 実践するWEBサイト制作 | webnote
jQueryとは JavaScriptのライブラリのひとつ ブラウザ依存を気にしなくてよい DOMの操作が簡単 記述の仕方は、CSSに似ている write less, do more. オープンソース（MITライセンス+GPLライセンス） e-Wods jQuery公式 Minified とは改行が除かれた圧縮版 jQuery head内に記述 記述内容 <script src="js/jquery.js"></script> CDNを利用する Content Delivery Network ネットワーク経由でコンテンツを提供するサービス jQuery CDN 記述内容 http://code.jquery.com/jquery-1.8.3.min.js Google Ajax API CDN 記述内容 http://ajax.googleapis.com/ajax/libs/jquer
jQueryを使ってドラッグ＆ドロップでリサイズできる関数を作る - Qiita
jQueryを使って要素のリサイズが出来る関数を作ってみた。 ついでにクッキーに保存して後でまた使えるようにしてみた。 /** * 指定した要素の幅をリサイズする関数 * リサイズした幅はクッキーに保存する */ function initTableResizer(targetId){ var target = null; var width; //指定した要素外にマウスをドラッグした場合の処理 $(window).mousemove(function(e){ if (target != null) { width = e.clientX - parseInt ($('#' + targetId).offset().left); $('#' + targetId).css ({ width: width + 'px' }); return false; } return false });
jQuery - tabメニュー - 求職者支援訓練 Webデザインの勉強講師記録 | 初心者がWebのプロになる勉強
JavaScriptjQuery UIタブメニューページを遷移させず複数のコンテンツを見せたい場合に利用するtab html lang="ja"> head> meta charset="UTF-8"> title>jQuery Tabtitle> link href="css/ui-lightness/jquery-ui-1.8.21.custom.css" rel="stylesheet"> link href="css/style.css" rel="stylesheet"> script type="text/javascript" src="js/jquery-1.7.2.min.js">script> script type="text/javascript" src="js/jquery-ui-1.8.21.custom.min.js">script> script typ
jQueryのresize()を実行後にページを再読み込みしたい - hateka’s blog
ウインドウのリサイズイベントでページの再読み込みをしたくて以下のコードを書いた。 $.fn.reload = function(){ $(window).resize(function(){ location.reload(); }) } 試しにウインドウサイズを変更したけどなぜか無反応。 でもこっちは動く。 $.fn.reload = function(){ $(window).resize(function(){ location.href = location.href; }) } ちなみにbindも同じ。 $.fn.reload = function(){ $(window).bind('resize',function(){ location.href = location.href; //location.reload();うごかない }) } これと同じだと思う。 それぞれの
クリエイターのためのWebテク講座 -スライドショーを作ろう。Vol.2
今回は、CSSアニメーションを使って、ちょっとしたスライドショーを作ります。 (第10回のつづき、アニメーション実装です。) サンプルを見る 今回のサンプルは、setIntervalを使って、画像をローテーションさせ、アニメーションをtransitionで定義しています。 ※今回も、CSS3の「transitionプロパティ」に対応した「Firefox」「Chrome」「Safari」でしか動作しません。残念ながら現時点ではIEは「transitionプロパティ」には対応していません。 座標の移動 前回、「popメソッド」と「unshiftメソッド」を利用して、配列の並びを変える処理を解説しましたが、実際にそれだけでは配置されている座標は変更されません。 「transitionプロパティ」の特性として、値が変更されたらアニメーションを実行するので、言ってしまえば座標さえ変更すればアニメーシ
Nick Jones - Freelance Design, Prototype and Code
This portfolio is a glimpse at the way I design and prototype in code. Design something familiar, program it to do something unexpected, make sure people feel something. Available for the right project. The set of book covers Tyler Thompson designed for Stripe Press are among my favorite design artifacts. Bringing the books to life in 3d with him and Stripe friends was some of the purest joy of my
グリッド＆レスポンシブデザインの組合わせ、ユニークなWordPressテーマ素材30個まとめ - PhotoshopVIP
Webサイトやブログなどで、コンテンツを分かりやすく、見やすく表示する方法のひとつとして、垂直/水平方向に分割するガイドラインを使ったグリッドシステムがあります。 このグリッドに、Webデザイントレンドでもあるレスポンシブデザインを加えることで、より動きのある、ダイナミックなサイトを制作することができます。 海外デザインブログWPdressingで、グリッドシステムを利用したWordPressプレミアムテーマを３０個まとめたエントリー「30+ Grid-Based WordPress Themes with Responsive Layout」が公開されていたので、今回はご紹介します。 パソコンだけでなく、iPhoneやiPadなどさまざまなデバイスに応じて、レイアウトを変化させながら、グリッドレイアウトを保つユニークなWordPressテーマ素材が多くまとめられています。 詳細は以下から
CSS3 webkitTransitionEnd - スタジオ・アルカナ技術ブログ
前回の続きです transitionでアニメーションした後に 何か処理をしたい場合には webkitTransitionEndイベントを使います 書くほどでもないですが、ソースです。
jQuery 簡単にモーダルウィンドウを実装する方法 (プラグイン不要) | Stronghold Archive
どうもこんばんは。今回は【簡単にモーダルウィンドウを実装する方法 (プラグイン不要)】というネタです。モーダルウィンドウ？という方もいるかと思いますので別の言い方をするとポップアップで小窓が出てくる表現の事を指します。実装方法はとても簡単ですので機会がありましたらお試しください。 コード（2013/4/11更新しました） 基本的には下図の用な仕様になっております。表示するコンテンツを増やす場合にはコピー&ペーストでwd2,wd3…と任意の数にしてください。 $(function(){ $(‘.btns’).click(function(){ wn = ‘.’ + $(this).data(‘tgt’); var mW = $(wn).find(‘.modalBody’).innerWidth() / 2; var mH = $(wn).find(‘.modalBody’).innerHei
BlackFlag - Web Development Technical | jQuery,HTML,CSS,iPhone,iPad,Twitter etc...
Categories HTML／(X)HTML (33) HTML5 (26) CSS (120) CSS3 (80) jQuery (334) TIPS (157) プラグイン (147) プラグイン集 (39) ライブラリ情報 (2) JavaScript (31) Mootools (8) iPhone／iPad／iPod／Android (26) Twitter (6) Facebook (2) IE (17) Firefox (6) SEO (10) Flash (2) WordPress (3) Silverlight (3) Webサービス (51) WebサイトGallery (17) Web素材 (43) Web開発用ツール (27) Web情報 etc… (8) リリース情報（その他） (17)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
https://depthcode.com/jquery/tab_img/index2.html
http://www.koutaro-funahashi.com/demo/grid.html
fujitaiju.com
hp-kyoto
Preview機能付クリック型ギャラリー｜フォトギャラリー設置方法 Tips【myisland】
https://atmarkit.itmedia.co.jp/ait/subtop/features/da/dt_jqueryref_index.html
アイテムをドラッグ＆ドロップで画面レイアウト出来るjQueryプラグイン「gridster.js」:phpspot開発日誌