Three.js（WebGL）3Dアニメーションの背景を作成できる「Vanta.js」｜BLACKFLAG
Webサイト上でも3Dを使った表現が最近とても増えてきている中、Webページの背景として設置する3Dアニメーションを簡単に作成できる「Vanta.js」が便利だったので、自分用のメモ書きとして紹介してみます。 Vanta.js – Animated 3D Backgrounds For Your Website Vanta.js 「Vanta.js」はThree.jsを使ったWebGLの3Dアニメーションを作成できるJavaScriptライブラリです。 使用方法はとても簡単で、Three.jsとVanta.jsを読み込んで「Vanta.js」サイトのプレビューで設定した値をコピペするだけで設置することができます。 3Dエフェクトは「Birds」「Clouds」「Dots」「Rings」など13種類。 （2022年1月現在） ライブラリファイルは各エフェクトごとに用意されています。 試しに「
jQueryでマウス動作が止まった時点で展開するドロップダウンメニューを実装する方法｜BLACKFLAG
以前「jQueryでマウス動作がストップした時を判別して処理する方法」と題して、jQueryでマウス動作がストップした時を判別して処理する方法を紹介しましたが、それを利用してドロップダウンメニューのロールオーバー動作をマウス動作がストップしたときに発動させるUI改善について紹介してみます。 「jQueryでマウス動作が止まった時点で展開するドロップダウンメニューを実装する方法」サンプルを別枠で表示 ※上記のサンプルでは「WORKS」「PRODUCT」「RECRUIT」の3つのボタンのみにドロップダウンメニュー動作を実装しています。 ドロップダウンメニューのようなロールオーバーの状態を判別して処理するメニューUIでは、ボタンにロールオーバーをして表示されたメニューエリアにマウスカーソルを持って行く際に誤って隣のボタンに少しでも触れてしまうと表示されていたメニューエリアの内容が入れ替わってしま
マテリアルデザイン風ボタンをjQueryとCSSで実装する方法｜BLACKFLAG
Webサイト上の要素の動きや操作によってユーザーに「触覚」を生み出すマテリアルデザイン。 そんなマテリアルデザインの一種として ボタンをクリックした際に、そのクリックしたポイントから波動を出す動作があります。 その動作をjQueryとCSSを使って実装する マテリアルデザイン風ボタンを作ってみたので紹介してみます。 「マテリアルデザイン風ボタンをjQueryとCSSで実装する方法」サンプルを別枠で表示 画面上にあるボタンをクリックすると そのクリックしたところをポイントとして 円形の波動が広がるアニメーションを実行させます。 クリックしたポイントからアニメーションを実装することで 「ボタンをクリックした」ということと クリックした場所が視覚的に明確に分かるようになる効果があります。 このボタン動作の全体構成について まずはHTMLから。 ◆HTML <div id="linkArea">
jQueryで横スクロールのパララックスサイトを作成する方法｜BLACKFLAG
マウスホイールを使ってスクロールした際に 縦にスクロールするのではなく、画面全体を横（水平）にスクロールさせることで ページ全体に流れるような演出を加えているWebサイトを最近よく見かけます。 そんなマウスホイールでの横スクロールに加えて ページ上の要素をレイヤー状に重ね合わせて、 奥行のあるパララックス効果もつけてスクロールさせる動作を jQueryを使ってシンプルに実装するサンプルを作ってみたので紹介してみます。 「jQueryで横スクロールのパララックスサイトを作成する方法」サンプルを別枠で表示 サンプルではページ上に3つのブロック要素をレイヤー状に重ね合わせて 画面上をマウスホイールでスクロールさせることで 各レイヤーを左右に水平スクロールします。 ※レイヤー状に重ね合わせているブロック要素を「パネル要素」とします。 マウスホイールでスクロールする距離を 各レイヤーによって制御する
jQueryでレスポンシブメニューを横スライドタイプでシンプルに実装する方法｜BLACKFLAG
少し前に「jQueryでレスポンシブメニューをアコーディオンタイプでシンプルに実装する方法」と題して、スマートフォン向けレイアウト時ではメニューをアコーディオン動作で展開するレスポンシブナビゲーションUIを紹介しました。 レスポンシブナビゲーションUIのパターンとしてはアコーディオン動作ではなく ハンバーガーメニューボタンを使って、画面のサイドからメニューボタンを スライドさせて表示させるタイプもあります。 今回はその画面横からスライドさせて メニューボタンを展開するタイプのレスポンシブメニューUIを jQueryを使ってできるだけシンプルな構成で作ってみたのでご紹介してみます。 「jQueryでレスポンシブメニューを横スライドタイプでシンプルに実装する方法」サンプルを別枠で表示 サンプルでは前回同様に ウィンドウサイズが768px以上ならばPC向けナビゲーション、 768px以下だったら
ブラウザのウィンドウサイズを取得する際のjQueryとJavaScriptとCSSメディアクエリの違い｜BLACKFLAG
レスポンシブサイトではウィンドウの幅（画面解像度）によって、レイアウトの調整や動作処理の制御を行います。 ウィンドウサイズ（画面幅／高さ）の取得方法に関しては、スクリプト制御ではjQueryの「.width()」メソッドのほか、JavaScriptの「.innerWidth」メソッドや「.matchMedia」メソッドを使用する方法などがあり、CSSメディアクエリでは「@media only screen and (max-width:○○px)」などといった手法でウィンドウサイズを取得することが可能になります。 それぞれの取得する方法によってすこし厄介なのは、ページ内にスクロールバーがある時とない時で取得する値が変わってくるというもの。 さまざまな場面でウィンドウサイズを取得する機会が増えてきているので、上記のそれぞれ取得方法について比較してみました。 まずは各スクリプト処理とCSSメデ
ブラウザウィンドウをリサイズした際のコールバックを設定可能にするjQueryプラグイン「ResizeEnd」｜BLACKFLAG
jQueryではブラウザウィンドウをリサイズした際に発生するイベント情報は取得できますが リサイズ動作完了時のコールバックの設定は用意されていません。 そのリサイズイベントのコールバック処理を可能にしてくれる jQueryプラグイン「ResizeEnd」が便利そうだったので自分用メモとしてご紹介。 Resize End | Github Pages | A jQuery Plugin by Erik Nielsen Resize End | Github Pages | A jQuery Plugin by Erik Nielsen 使い方もとても簡単で、 プラグインファイル「jquery.resizeend.js」を読み込んだ後、 「.resizeend()」メソッドにてリサイズイベントのコールバック設定が可能になります。 ◆SCRIPT $(window).resizeend(func
テーブルをレスポンシブに対応させるのに便利なjQueryプラグインまとめ｜BLACKFLAG
レスポンシブWebデザインのサイトでテーブル（表組み）を組み込む際に 要素量の多いテーブルの場合、CSSでレイアウトを無理やり調整したり、 スマホレイアウト時はテーブル全体を横スクロールさせるようにしたりと レイアウトに苦労することがよくあります。 そんなテーブルをレスポンシブ対応させる際に いろいろと便利に使えそうなjQueryプラグインを まとめて自分用メモとして紹介してみます。 Basic Table (jQuery Responsive Tables) Basic Table (jQuery Responsive Tables) デモページはこちら まず最初は「Basic Table」。 画面幅に応じて見出し要素を複製するかたちで テーブルを項目の並びを整えて収めてくれます。 様々なレイアウトパターンが用意されていて テーブルが長くなる場合にはスクロール制御する機能もあり、 いろい
jQueryで要素がアニメーション実行中かそうでないかを判別する処理まとめ｜BLACKFLAG
jQueryを使ってイベント処理と合わせてアニメーション処理をスクリプトを組む際に、 指定する要素がアニメーション実行中かそうでないか判別をする場面がよくあります。 アニメーションの実行判別方法はいろいろなやり方があり 使用する場面によって使い分けるのですが、たまに書き方を忘れてしまうので いくつかの判別パターンをまとめてみます。 【.is(‘:animated’)】 jQueryで要素がアニメーション実行中かそうでないかを判別する処理 いろいろある判別処理の中で扱いやすかったものとして まず、if文と「.is(‘:animated’)」を使っての判別について。 「.is(‘:animated’)」を使って 要素がアニメーション実行中の場合の処理は以下のようになります。 ◆SCRIPT if($('セレクタ').is(':animated')){ ～ ここにセレクタ要素がアニメーション実行
jQueryでページの最上部に位置固定したフルスクリーンスライダーを設置する方法｜BLACKFLAG
少し前に「jQueryでページの最上部に位置固定した、フルスクリーンスライドショー（クロスフェード）を設置する方法」と題して、ページ最上部に位置固定したクロスフェードスライドショーのサンプルを紹介しましたが、同様の形でクロスフェードではなくフルスクリーンの状態で画像全体が横スライドして見せるスクリプトサンプルを作ってみたので紹介してみます。 言葉では少々説明しずらいのでまず動作サンプルから。 「jQueryでページの最上部に位置固定したフルスクリーンスライダーを設置する方法」サンプルを別枠で表示 ページ最上部に位置固定したフルスクリーンサイズでのスライドショーを設置します。 ※画像全体は横スライドして切り替え ページをスクロールさせるとフルスクリーンスライドショーはページ上部に固定されたままになり、下からコンテンツ要素が出現してきます。 スライドショー全体はブラウザサイズを変化させてもウィ
jQueryでスマートフォンとタブレットでviewportを切り替える実験（iPhone6 Plus対応）｜BLACKFLAG
Webサイトを作る際、最近では様々な画面サイズ（解像度）のデバイスが増えていることから レスポンシブで構築する際のviewport設定に迷うことがあります。 すべてのデバイスで画面幅に合わせて綺麗に表示させるには viewportの値を切り替えてしまった方が楽な場合もあったので スマートフォン［iPhone/Android］とタブレット［iPad/Android］それぞれで jQueryを使って、viewportを切り替えるサンプルを作ってみたので紹介してみます。 まずは別枠で動作サンプルから。 ※サンプル画面はスマートフォンまたはタブレットでご確認ください。 「jQueryでスマートフォンとタブレットでviewportを切り替える実験」サンプルを別枠で表示 見た目上は分かりませんが スマートフォン［iPhone/Android mobile］とタブレット［iPad/Android］で そ
jQueryでページの最上部に位置固定したフルスクリーンスライドショー（クロスフェード）を設置する方法｜BLACKFLAG
最近のWebサイトでは写真をフルスクリーンでダイナミックに見せる技法や演出が多く見られます。 背景画像のフルスクリーン表示やフルスクリーンのスライドショーなど様々ありますが、jQueryを使って、ページ最上部（ページヘッダー）にフルスクリーンでのスライドショーを設置し、スクロールすると下から通常のコンテンツが表示される、というページ構成を実装するスクリプトを作ってみたので紹介してみます。 少々言葉では説明しずらいのでまず動作サンプルから。 「jQueryでページ上部にフルスクリーンスライドショーを設置する方法」サンプルを別枠で表示 ページの最上部にフルスクリーンサイズにて画像がクロスフェードで切り替わるスライドショーを設置し、ページをスクロールさせるとページ上部にフルスクリーンスライドショーが固定されたまま下からコンテンツ要素が出現します。 スライドショー全体はブラウザサイズを変化させても
jQueryでフレームアニメーション（パラパラアニメ）を実装するプラグイン「jquery.frameAnimation.js」｜BLACKFLAG
これらのオプション値の設定は 個別に変更させることも可能です。 そして実行スクリプトは以下の様になります。 ◆SCRIPT <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="js/jquery.frameAnimation.js"></script> <script> $(function(){ $('.frame1').frameAnimation(); }); </script> 実行スクリプトにオプション値を記述する場合は 以下の様な記述になります。 ◆SCRIPT <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></scr
jQueryでレスポンシブ対応した1行ごとに要素の高さを揃える方法｜BLACKFLAG
Webページ内に並べられた要素の高さを揃えるスクリプトサンプルや jQueryプラグインを今までもいくつか紹介してきましたが、 並べられた要素をレスポンシブ対応かつ1行ごとに高さを揃える形での スクリプトサンプルを試しに作ってみたので紹介してみます。 まずは動作サンプルから。 サンプル画面でウィンドウサイズを伸縮させてみてください。 「jQueryでレスポンシブ対応した1行ごとに要素の高さを揃える方法」サンプルを別枠で表示 MediaQueriesでウィンドウサイズによって1行ごとに並ぶ要素数を変えてありますが それぞれ1行ごとの最大の高さに要素の高さが揃うようになっています。 全体構成についてまずはHTMLから。 ◆HTML <div class="listarea"> <ul> <li>このテキストはサンプル用のダミーテキストです。このテキストはサンプル用のダミーテキストです。このテキ
jQueryで1ページごとにスクロールして画面遷移させるUIを実装する方法｜BLACKFLAG
以前、iPhone5sのプロダクトページがリリースした頃に『簡単にパララックス実装可能な軽量スクリプト「skrollr」＆コンテンツごとにページスクロールするjQueryプラグイン「fullPage.js」「One Page Scroll」』と題して1ページをフルスクリーン表示にして、画面全体をスクロールさせることで、1ページ分（1コンテンツ分）を画面遷移させるUIを実装できるjQueryプラグインを紹介しましたが、自分なりにもっと使いやすい形で実現できないかやってみた実験をご紹介してみます。 【2014/08/05 追記】 各ブロック内での横スライド機能を追加しました。 まずは動作サンプルから。 下記のサンプル画面でマウスホイールスクロールもしくは画面右側のナビゲーションボタン等を使って画面（ページ）を切り替えてみてください。 「jQueryで1ページごとにスクロールして画面遷移させるU
jQueryでインライン要素をHTML内で改行すると発生する空白を削除する実験｜BLACKFLAG
Webページ制作時において、＜li＞や＜img＞などのインライン要素に対して HTMLソース上でタグ間を改行させると半角スペースほどの空白（余白）が発生してしまい 扱いに困ることがあったりするので、この空白をjQuery使って強引に削除する実験をしてみました。 まず単純に＜li＞をインライン要素として 下記の様にHTML上に記載すると・・・ ◆HTML <ul> <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> </ul> これをこのままブラウザで実行させると 下記の様に数字の間に半角スペースほどの空白が発生します。 ※空白が分かりやすいように各数字にはCSSでボーダーをつけてあります。 この空白は＜li＞～＜/li＞の
様々な形状のハイクオリティなアイコンを簡単に作成できるツール「Iconion : Free Icon Maker」｜BLACKFLAG
今までもハイクオリティなフリーアイコン素材など何度か紹介してきましたが、 フラットなものやロングシャドウ等々、様々な種類の中からデザインを選択し とても簡単にカスタマイズしながらアイコンを作成することができるツール 「Iconion : Free Icon Maker」がとても便利だったので自分用メモとして紹介してみます。 Iconion : Free Icon Maker 「Iconion」はインストールタイプのツールになっており Webサイト上にはWindows版とMac版の両方用意されているので 環境に合わせてダウンロードします。 起動すると以下のような画面が表示されます。 まず、画面右上の「Add Style」からアイコンの形状（デザイン）を選択します。 その後、選択エリア下にあるオプションパネルにて アイコンの背景色や角丸の角度など、 細かな設定をすることが可能になっています。
jQueryでマウスホイールの上下イベントを取得 ＋ 余韻をつけたイージングスクロールを実装する実験｜BLACKFLAG
最近Webサイト上のUIにおいて、マウスホイールイベントを使って処理する機会が多くあり その都度「jquery.mousewheel.js」などのプラグインを使って処理していたのですが jQueryファイルのみでマウスホイール上下イベントの取得方法を掲載している記事を見つけ 自分でもいろいろと試してみたので実験内容と併せて紹介してみます。 今回のjQueryを使ってのマウスホイールのイベント処理は 「Web制作 W3G」さんの記事を参考にさせていただいてます。 【参考記事】ホイール系イベント2014年版クロスブラウザ｜Web制作 W3G jQueryだけでなくネイティブJavaScriptでの取得方法や ホイール関連の処理について詳しく紹介されています。 記事によるとjQueryを使ってのマウスホイール処理方法は 以下のようなスクリプト記述で取得可能となります。 ◆SCRIPT <scri
jQueryで文章などのテキストに対して一文字ずつ個別に装飾を変える実験｜BLACKFLAG
先日、AllAboutさんの記事でWebページ上のテキストに対して 「1文字ずつ色を変えるなど、文字単位で装飾する方法 [ホームページ作成] All About」と題した jQuery＋CSS3を使って1文字ずつ装飾を変える方法を解説していましたが これをCSS3未対応ブラウザでも実装できるように jQueryのみで文字単体に個別で指定を与える実験をしてみたので紹介してみます。 jQueryでテキストを一文字ずつ装飾を変える実験 まずはHTML上に下記の様な段落テキストを配置します。 ◆HTML <p class="split">jQueryでテキストを一文字ずつカットするサンプルテキストです。</p> そしてこのテキストに対して、jQueryを使って一文字ずつ個別に 任意のクラスの付けたinline要素（＜span＞）で囲うようにします。 スクリプトの記述は以下の様になります。 ◆SCR
jQueryでパララックスサイトの様にスクロールして要素が出現した時点でアニメーション等のイベント処理を実行させる実験｜BLACKFLAG
パララックスサイトやAppleのプロダクトページの様な動きを付ける為の スクロールして特定の位置でアニメーション等の処理を実行させることができる jQueryプラグイン等をここでも何度か紹介しましたが プラグインのバージョンによって動作仕様が変わってしまっていたり 上からのスクロールと、下からのスクロールの判断が微妙だったりしたので なんとか簡単にスクロールの上下を判別させて、 なにか処理を実行させるスクリプトができないものか 試しに作ってみたので紹介してみます。 まずはサンプルから。 下記の画面をスクロールするとコンテンツ要素が順々にフェードインします。 「jQueryでパララックスサイトの様にスクロールして要素が出現した時点でアニメーション処理実行させる実験」サンプルを別枠で表示 上記サンプルでは6つコンテンツエリアを縦に配置してあります。 上からスクロール（ダウン）してそれぞれのコン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
