jQueryでアニメーション処理（「.animate()」）完了後に別の処理を実行させる方法｜BLACKFLAG
jQueryでアニメーションを実行させる「.animate()」。 一つのfunctionの中で複数実行させることも可能だったりするのですが、 アニメーション実行後、実行したアニメーション処理が完了した時点で別の処理を実行させたい、 という場合がたまにあったりするのですが、その記述方法をつい忘れてしまうことがあるので、 ここにメモ書きがてら紹介してみます。 jQueryでアニメーション処理完了後に別の処理を実行 $(function(){ $(セレクタ).stop().animate({アニメーション処理},1000,function(){ ～ここに処理を記載～ }); }); 例えば、画像にマウスオーバーした際に、 画像をアニメーション拡大させ、 拡大処理完了後に影を付ける（CSS3で）場合は。 $(function(){ $('img').hover(function(){ $(thi
HTML5アニメーションを簡単に作成できるツール「Google Web Designer」＆「HTML5 MAKER」｜BLACKFLAG
Webページ上にアニメーション演出を組み込もうとする場合、 今ではJavaScript（jQuery）やCSS3など、実装方法がいくつかありますが HTML5でのアニメーション動作を簡単に作成することができる 気になる便利ツールが2点ほどあったので自分用メモとして紹介してみます。 Google Web Designer 言わずと知れたGoogleさんから公開している HTML5アニメーションをつけた広告を制作できるツール「Google Web Designer」。 ツールは無料でダウンロードすることができます。 この「Google Web Designer」では広告バナーのみならず 画像ギャラリーなども簡単に作れるようになっており 操作も直感的に制作できるようになっています。 作成したデータは一式ダウンロードすることができ 組み込みも簡単にできます。 試しに作成してみたサンプルはこちら。
CSSのopacityで透明度／透過度を指定する方法｜BLACKFLAG
今さらながら、Webページ内の要素に対して、要素の透明度／透過度をCSSのみで指定する方法について。 久々にCSSのみで透明度の指定が必要になる場面があったのですが、記述方法をすっかり忘れていたのでここにメモとして残しておきます。 CSSで透明度を指定するには「opacity」というプロパティを使用しますが、ブラウザによって記述が変わるので下記の様な形になります。 ◆CSS div { filter:alpha(opacity=50); -moz-opacity: 0.5; opacity: 0.5; } 『filter:alpha(opacity=50);』 これはIE向けの指定。 “50”というのは透明度が“50%”ということ。 透過無しの状態“100%”を指定する際は「filter:alpha(opacity=100);」。 『-moz-opacity: 0.5;』 これはFiref
jQueryで「もっと見る」ボタンで画像を順々に読み込むUIの実験｜BLACKFLAG
TwitterやFacebookなどで使われている コンテンツ要素をある一定の数表示（読み込み）しておいて 続きは「もっと見る」や「MORE」といったリンクやボタンをクリックすることで 要素を順々に読み込んでいくUI。 このUIを実装する際、使いやすいjQueryプラグインがなかなか見当たらなかったりするので、 同様のUIを実装する為の実験的スクリプトを作ってみたので簡単に紹介してみます。 今回の実験では＜a＞リンクを張った＜img＞画像タグを ＜span＞タグで囲った構成のまとまり ———————————————————- ＜span＞＜a＞＜img＞＜/a＞＜/span＞ ———————————————————- 上記のセットを順々に追加していく構成になっています。 併せて、画像を格納するディレクトリ名と画像ファイル名には命名規則を付けます。 ———————————————————-
レスポンシブWebデザインを構築する際に役立つ「This Is Responsive.」＆「RESPONSIVATOR」｜BLACKFLAG
今やサイト設計の際に必ずと言っていいほど考慮しなくてはならないレスポンシブWebデザイン。 実装する際には通常のPCサイトを制作するのに比べて 設計部分でいろいろと考慮しなくてはいけない部分が多くなりますが そんなレスポンシブWebデザインのサイト設計の際に役立つWebサイトを２つほど紹介してみます。 This Is Responsive | Tips, Resources and Patterns for Responsive Web Design レスポンシブWebデザインを設計する上での ナビゲーション・フォーム関連・画像配置などを踏まえたレイアウトパターンから 各種リソース集などの役立つ情報やツールも紹介しているサイトです。 メニューは —————————– ・Patterns ・Resources ・News —————————– と分かれており、「Patterns」のコンテンツ
jQueryでサムネイル付きスライドショーをシンプルに作成する方法｜BLACKFLAG
以前にここで「jQueryでシンプルなサムネイル付き画像ビューアーを作成する方法」と題して、 jQueryでの画像切替ビューアーを紹介しましたが、 これを応用して、自動で画像エリアが切り替わる シンプルな画像スライドショーを作ってみたのでご紹介。 まずは動作のサンプルから。 ※全体構成は以前の記事の物と同じにしてあります。 jQuery SIMPLE SLIDESHOW【SAMPLE1】 4枚の画像が自動でクロスフェードしてスライドショーとして切り替わり、 下部に並べてあるサムネイルをクリックすることで 特定のビジュアルに切り替えることも出来ます。 全体構成についてHTMLから。 ◆HTML <div id="slideshow"> <div> <div><a href="#1"><img src="img/photo01.jpg" width="400" height="300" alt
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
