ページを読み込む時のちょっとした演出として、任意の要素を順番にフェードさせながら表示させてみる。 要素については 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> 仕組みとしては、クラス
おさらいの中での個人的なメモ 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
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とは 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を使って要素のリサイズが出来る関数を作ってみた。 ついでにクッキーに保存して後でまた使えるようにしてみた。 /** * 指定した要素の幅をリサイズする関数 * リサイズした幅はクッキーに保存する */ 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 });
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
ウインドウのリサイズイベントでページの再読み込みをしたくて以下のコードを書いた。 $.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();うごかない }) } これと同じだと思う。 それぞれの
今回は、CSSアニメーションを使って、ちょっとしたスライドショーを作ります。 (第10回のつづき、アニメーション実装です。) サンプルを見る 今回のサンプルは、setIntervalを使って、画像をローテーションさせ、アニメーションをtransitionで定義しています。 ※今回も、CSS3の「transitionプロパティ」に対応した「Firefox」「Chrome」「Safari」でしか動作しません。残念ながら現時点ではIEは「transitionプロパティ」には対応していません。 座標の移動 前回、「popメソッド」と「unshiftメソッド」を利用して、配列の並びを変える処理を解説しましたが、実際にそれだけでは配置されている座標は変更されません。 「transitionプロパティ」の特性として、値が変更されたらアニメーションを実行するので、言ってしまえば座標さえ変更すればアニメーシ
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
Webサイトやブログなどで、コンテンツを分かりやすく、見やすく表示する方法のひとつとして、垂直/水平方向に分割するガイドラインを使ったグリッドシステムがあります。 このグリッドに、Webデザイントレンドでもあるレスポンシブデザインを加えることで、より動きのある、ダイナミックなサイトを制作することができます。 海外デザインブログWPdressingで、グリッドシステムを利用したWordPressプレミアムテーマを30個まとめたエントリー「30+ Grid-Based WordPress Themes with Responsive Layout」が公開されていたので、今回はご紹介します。 パソコンだけでなく、iPhoneやiPadなどさまざまなデバイスに応じて、レイアウトを変化させながら、グリッドレイアウトを保つユニークなWordPressテーマ素材が多くまとめられています。 詳細は以下から
前回の続きです transitionでアニメーションした後に 何か処理をしたい場合には webkitTransitionEndイベントを使います 書くほどでもないですが、ソースです。
どうもこんばんは。今回は【簡単にモーダルウィンドウを実装する方法 (プラグイン不要)】というネタです。モーダルウィンドウ?という方もいるかと思いますので別の言い方をするとポップアップで小窓が出てくる表現の事を指します。実装方法はとても簡単ですので機会がありましたらお試しください。 コード(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
Categories HTML/(X)HTML (33) HTML5 (26) CSS (122) CSS3 (82) 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サービス (52) WebサイトGallery (17) Web素材 (44) Web開発用ツール (28) Web情報 etc… (8) リリース情報(その他) (17)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く