SEO対策に強いホームページ制作|BringFlower
「JavaScript」カテゴリーのBringFlower記事一覧
-
JavaScript
スクロールに応じた視差(パララックス)効果のある動きをJavaScriptライブラリなしで実装
スクロールしたとき、普通なら画面全体が同じように動きますが、部分的に他とは違う動きをつけると、視差効果で奥行きが感じられ、デザインとして深みを感じてもらえるようになると思います。ライブラリもありますが…<続きをみる>
-
JavaScript
素のJavaScriptでタブパネルを作る方法
タブパネルを素のJavaScriptを使って(jQueryなしで)作成する方法についてご紹介します。 デモ/タブパネルとは タブパネルは、次のデモのようにタブで中身を切り替えられるユーザーインタフェー…<続きをみる>
-
JavaScript
document.querySelectorAllで取得した要素をforEachで回す
JavaScriptで、document.querySelectorAllで取得した要素をforEachで回す方法をコピペ用に残します。他にも方法はありますが、IEのサポートを考えなくてよければfor…<続きをみる>
-
UXJavaScript
桁数チェックが容易なテキストボックスのUI
金額が大きくなればなるほど、桁数を1桁間違えれば大きく違ってきます。 1,0001,000,0001,000,000,000 この「カンマ」で示される形だと私が数えやすいのは、1万までです(苦笑)。 …<続きをみる>
-
JavaScript
素のJavaScriptでモーダルウィンドウ(ダイアログ/ポップアップ/ライトボックス)
jQueryも他のライブラリもなしで、素のJavaScriptだけでモーダルウィンドウを表示する方法をご紹介します。 jQueryの利用有無でLighthouseのパフォーマンス点数が10点ぐらい違う…<続きをみる>
-
JavaScript
Googleマップに複数のピンを一括表示、全てが表示される縮尺にする
Googleマップに複数の住所を一括でプロット、かつ全てが表示される縮尺にする方法をご紹介します。事前に全ての住所が分かっている場合はコードの中でそれら住所を指定すればよいですが、そうもいかない場合も…<続きをみる>
-
JavaScript
一文字ずつのテキストアニメーションを途中にタグがあってもJavaScriptとCSSで実装
長いタイトルですみません。しかしながらもう一度(※)、さらに補足も加えて言うと、 「凝ったテキストアニメーションのために1文字ずつspanで囲むことを、途中にHTMLのタグがあってもJavaScrip…<続きをみる>
-
JavaScript
素のJavaScriptでカルーセルスライダーを作る選択肢とswiperの使い方
フリックすると左右に画像が切り替わるカルーセルスライダーを作る方法について、現況における選択肢をまずご説明した上で、最適だと私が思う方法をご紹介します。 結論としては、ライブラリは利用。ライブラリの中…<続きをみる>
-
JavaScript
Googleマップをグレースケールにする/航空写真ボタンなどを非表示にするなどのカスタマイズ方法
Googleマップをグレースケールにしたり、航空写真などのボタンを非表示にするなどの各種カスタマイズ方法をご紹介します。 事前準備 以下を事前に行う必要があります。事前準備の方法はこちらでご案内してい…<続きをみる>
-
JavaScript
Googleマップでピンのアイコン(マーカー)をオリジナルに変更して表示する
Googleマップのピンのアイコン、マーカーを変更してお店などのロゴを表示する方法をご説明します。 GoogleのAPIを有効にする 以下2つのAPIを有効にする必要があります。 Maps JavaS…<続きをみる>