CSSでhoverアニメーションの実行をPCのみに制御する｜BLACKFLAG

2021/11/10 5 users iPhone メディアクエリー CSS デバイス 支障

iPhoneやAndroidのスマホやタブレットなどのタッチデバイスでCSSのhoverアニメーションをつけていると、タップ（クリック）動作にいろいろと支障がでることがあります。 CSSで指定するhover動作をPCのみに実行させるために、JavaScriptでデバイスの判定をしたりすることもありますが、CSSのメディアクエリーだけでも制御... 続きを読む

CSSアニメーションの終了イベントを取得してくれるJavaScript「Detecting CSS Animation and Transition End with JavaScript」 | BlackFlag

2015/09/29 51 users jQuery CSSアニメーション アニメーション 処理

jQueryなどでアニメーションを実装した際には アニメーション終了時に処理を実行させるのは比較的簡単なのですが CSSアニメーション制御の場合は少々面倒だったりします。 そんなCSSアニメーションの終了イベントを取得してくれるJavaScript 「Detecting CSS Animation and Transition End with JavaScript」が とても便利そうだったのでご... 続きを読む

jQueryでスクロールすると表示するページトップへ戻るボタンをシンプルに実装する方法 | BlackFlag

2015/08/25 39 users jQuery フェードイン 縮小 主流 アウト

今やWebサイトを作る際にはほぼ必須アイテムとなっている ページの最上部に戻るための「ページトップへ」ボタン。 最近ではページ内をある程度スクロールするとボタンが出現するタイプが主流になっています。 そんな「ページトップへ」ボタンの出現方法を フェードイン／アウト、下方向からスライドイン／アウト、ボタン要素を拡大／縮小、 の3つパターンで実装する方法を紹介してみます。 【フェードイン／アウト】 j... 続きを読む

テーブルをレスポンシブに対応させるのに便利なjQueryプラグインまとめ | BlackFlag

2015/07/21 170 users BASIC CSS jQueryプラグイン レイアウト 表組み

レスポンシブWebデザインのサイトでテーブル（表組み）を組み込む際に 要素量の多いテーブルの場合、CSSでレイアウトを無理やり調整したり、 スマホレイアウト時はテーブル全体を横スクロールさせるようにしたりと レイアウトに苦労することがよくあります。 そんなテーブルをレスポンシブ対応させる際に いろいろと便利に使えそうなjQueryプラグインを まとめて自分用メモとして紹介してみます。 Basic ... 続きを読む

jQueryで特定の要素がアニメーション実行中かそうでないかを判別する処理まとめ | BlackFlag

2015/05/26 30 users jQuery 特定 判別 スクリプト ＩＳ

jQueryを使ってイベント処理と合わせてアニメーション処理をスクリプトを組む際に、 指定する要素がアニメーション実行中かそうでないか判別をする場面がよくあります。 アニメーションの実行判別方法はいろいろなやり方があり 使用する場面によって使い分けるのですが、たまに書き方を忘れてしまうので いくつかの判別パターンをまとめてみます。 【.is(‘:animated’)】 jQueryで特定の要素がア... 続きを読む

HTML5アニメーションを簡単に作成できるツール「Google Web Designer」＆「HTML5 MAKER」 | BlackFlag

2014/08/26 74 users HTML5 MAKER HTML5アニメーション

Webページ上にアニメーション演出を組み込もうとする場合、 今ではJavaScript（jQuery）やCSS3など、実装方法がいくつかありますが HTML5でのアニメーション動作を簡単に作成することができる 気になる便利ツールが2点ほどあったので自分用メモとして紹介してみます。 Google Web Designer Google Web Designer 言わずと知れたGoogleさんから公開... 続きを読む

jQueryでレスポンシブ対応した1行ごとに要素の高さを揃える方法 | BlackFlag

2014/06/10 78 users jQuery ウインドウサイズ レスポンシブ 要素 1行ごと

Webページ内に並べられた要素の高さを揃えるスクリプトサンプルや jQueryプラグインを今までもいくつか紹介してきましたが、 並べられた要素をレスポンシブ対応かつ1行ごとに高さを揃える形での スクリプトサンプルを試しに作ってみたので紹介してみます。 jQueryでレスポンシブ対応した1行ごとに要素の高さを揃える方法 まずは動作サンプルから。 サンプル画面でウィンドウサイズを伸縮させてみてください... 続きを読む

jQueryで1ページごとにスクロールして画面遷移させるUIを実装する方法 | BlackFlag

2014/05/27 212 users jQuery skrollr jQueryプラ 画面遷 方法

以前、iPhone5sのプロダクトページがリリースした頃に 『簡単にパララックス実装可能な軽量スクリプト「skrollr」＆コンテンツごとにページスクロールするjQueryプラグイン「fullPage.js」「One Page Scroll」』と題して 1ページをフルスクリーン表示にして、画面全体をスクロールさせることで 1ページ分（1コンテンツ分）を画面遷移させるUIを実装できるjQueryプラ... 続きを読む

jQueryでレスポンシブ対応のシンプルなクロスフェードビューアーを作る方法 | BlackFlag

2013/12/17 33 users jQuery レスポンシブ サムネイル レスポンシブ対応 要望

jQueryを使ってのレスポンシブに対応したスライドショーを実装する いくつかのパターンを紹介してきましたが、 サムネイルも何もなしでただ画像（コンテンツ要素）がクロスフェードするだけのシンプルな スライドショーのレスポンシブに対応したパターンの要望を多くいただいたので 試しに作ってみたのを紹介してみます。 jQueryでレスポンシブ対応のシンプルなクロスフェードビューアーを作る方法 レスポンシブ... 続きを読む

簡単にパララックス実装可能な軽量スクリプト「skrollr」＆コンテンツごとにページスクロールするjQueryプラグイン「fullPage.js」「One Page Scroll」 | BlackFlag

2013/10/08 179 users skrollr jQueryプラグイン 軽量スクリプト

最近でもよく見かけるWebページ内をスクロールしてコンテンツを効果的に魅せる技法として パララックス（少々今さら感も感じますが・・・）効果に加えて最近では コンテンツ全体をフルスクリーン表示にして、 スクロールすることで1コンテンツ分が自動でスクロールされ 次画面へ遷移するさせる技法がよく見られます。 そんなＷｅｂページ内でスクロール効果を使った動作を実装する際に役立ちそうな JSスクリプト＆jQ... 続きを読む

パララックス制作などで使えるスクロールして特定の位置でアニメーションなどの処理を実行させることが出来るjQueryプラグイン「jquery-peekaboo」「jQuery Waypoints」 | BlackFlag

2013/01/30 130 users 使い道 スクロール位置 アクション メモ書き アニメーション

パララックスサイト制作の際などで活用できる ページ内の特定のスクロール位置でアニメーションなど何か処理を実行させることが出来る jQueryプラグインがいろいろ使い道がありそうだったので 自分用のメモ書きとして紹介してみます。 jquery-peekaboo uniba/jquery-peekaboo・GitHub 使い方はとても簡単で ページをスクロールしてアクションを実行させるポイントになる箇... 続きを読む

jQueryで文字列を特定の文字数でカットして末尾に「…」などを追加する方法 | BlackFlag

2012/10/10 295 users jQuery 末尾 スクリプト レイアウト 特定

Webサイトのトップページで表示するお知らせ情報など レイアウトの都合上、長い文字列を特定の文字数でカットしたいことはよくあることかと思います。 そんな際にjQueryを使って文字列を任意の文字数でカットして 末尾に「…」などの追記情報（これも任意の文字列）を追加するやり方を シンプルなスクリプトで実装する方法をご紹介してみます。 【テキストのみ】jQueryで文字列を特定の文字数でカットして末尾... 続きを読む

jQueryでRetinaディスプレイを判別して処理を変える方法 | BlackFlag

2012/08/29 170 users iPhone jQuery Retinaディスプレイ 従来

iPhoneなどApple製品に使われているRetinaディスプレイ。 従来のディスプレイよりも高解像度（1ピクセルの幅が78ミクロン）であることから Retinaディスプレイで画像を綺麗に表示するには、表示する倍のサイズで作成する必要があったり 特別な対処をする必要がでてきたりします。 そんなRetinaディスプレイに対して、jQuery（JavaScript）を使って判別し 個別に処理させる方... 続きを読む

jQueryで背景に動画をフルスクリーンで表示する方法 | BlackFlag

2012/07/18 41 users YouTube jQuery jQueryプラグイン 手法

海外のサイトなどで最近たまに見かける、背景に動画をフルスクリーン表示して見せる手法。 背景全面に動画が流れることでページの演出をかなりダイナミックに見せることが出来ます。 この背景動画を簡単に実装できるjQueryプラグインもありますが YouTubeにアップされている動画が対象だったりで、 任意の動画ファイルを簡単に流すことができるものが見当たらなかったので 簡単に実験的に作ってみたのを紹介して... 続きを読む

背景画像のスライド切り替え演出が綺麗なjQueryメニュープラグイン「Sliding Background Image Menu with jQuery」 | BlackFlag

2011/07/06 11 users ナビゲーションメニュー Codrops デモ 演出 背景画像

全体の動きが凝った演出になっているわけではないのですが、 ナビゲーションメニューと連動して背景画像がスライドして切り替わる動きが綺麗な 「Sliding Background Image Menu with jQuery」のご紹介。 ≫Sliding Background Image Menu with jQuery | Codrops ≫デモはこちら：Sliding Background Ima... 続きを読む