jQuery CSS 文字（数字）を円形に配置してアナログ時計作成 jQueryで自動配置も可能
数字を円形に配置、アナログ時計を作成する方法を紹介いたします。文字の円形配置方法、時計針の角度変更方法を解説します。jQueryで不特定文字数を円形に配置することも可能です。文字の向きも水平方向、内向き方向、外向き方向のパターンを紹介しています。
プログラミング
jQuery 
HTML＆CSS 円グラフを扇形グラデーションで HTMLテキストをグラフに反映も
円グラフをCSSの関数conic-gradient() で作成します。色の開始点と停止点を指定することで、色の境界線は明確に分かれグラデーションにはなりません。HTMLの％の数字を取得し、グラデーションの角度を変更することも可能です。
jQuery jQuery モーダルを一定時間経過後に表示（背景固定） キャンペーンや広告等に モーダル解除後は背景は元の位置に
サイトを開いてから一定時間経過したら、キャンペーンや広告等をモーダルで表示させる方法。 モーダル表示中は、背景は固定しスクロールもできない状態に。モーダル非表示後は、ページのスクロール位置は元位置に戻る。モーダル系プラグインなし。
jQuery jQueryでWEBサイトの記事文字数をカウントし、冒頭に読み終わる時間を表示！ WordPress等のプラグインなし
jQueryのlengthメソッドを使って、記事内の改行や空白を除く（正規表現を使用）文字数をカウント。1分間で読める時間に計算した後「この記事は●●分で読めます」と表示させます。1分間に読める文字数は400～600文字程と言われています。
jQuery WEBサイトの入力日付を受取り、現在日までの日数を計算し表示 JavaScriptとjQuery Datepicker
jQuery DatepickerとJavaScriptで、ユーザーが入力した日付から現在日までの日数を計算し表示。 現在日から特定の過去の日を引き算。 生まれた日からの計算をしたり、ダイエット期間を計算したり等に使用可能だと思います。
jQuery jQuery UI Datepicker（日付選択カレンダー） の使用方法、テーマ・オプションの種類・変更方法を解説
Datepickerのテーマやオプション使用方法を紹介。 テーマのスクショもあり。 機能しないと混乱を招きやすい「Today」ボタンについても説明あり。 テーマの選択方法はオプション追加とは異なり、Datepickerの読み込み時で行う。
jQuery 期間限定日までの残り日数と時間をWEBサイトに表示 javascriptで将来日時から現在日時を引き算・繰り返す方法
「あと何時間で今日中にお届けします。」「キャンペーン終了日まであと何日です。」といった、期限日までの残り日数・時間を表示するための方法。 時間の取得はJavaScriptで行い、jQueryのtextメソッドで要素の数字を更新しています。
HTML＆CSS AOSで簡単にパララックス効果！ jQuery不要のライブラリ 使用方法やオプション説明、実装確認
先日はScrollReveal を紹介、今回はAOSを調査。 使用方法、オプション等を説明し、デフォルト及びオプション追加の実装の確認が可能。 デフォルトでも満足できます。要素毎のデフォルトのdistance値の変更方法もご紹介。
jQuery jQueryだけでスクロール量に応じてボックス内の要素を移動させ錯覚効果も実現、透明度の変化も可能
単色カラーのボックスで、スクロール量に応じてボックス内の要素をX方向へ移動することで、普通にY方向の上にだけ移動するボックスまで斜め上に上がるような錯覚を生み出します。 透明度の変化もスクロール量に応じて、要素を自然とフェードイン可能です。
HTML＆CSS CSSでガラス風のプレートを作成 文字を彫ったように表示したり、取得した時刻をデジタル表示したり
CSSで透け感のあるガラスやアクリル板のようなプレートを作成し壁に取る付けてあるかのように。文字を彫ったように表示させるものと、時刻をデジタル表示させるもの2つ作成しています。 デジタル時計表示の記事の紹介もあります。
IT Simple Parallax Scrolling JSライブラリでパララックス効果 使用方法、オプション、動作を確認
パララックス効果を実現するJSライブラリSimple Parallax Scrolling について使用方法やオプションについてまとめてみました。 実際にcodepenでご確認いただけます。 都度jQueryでコードを書くより随分と楽に。
IT rellax.jsでパララックス効果を実現！JSライブラリ 使用方法・オプションを調査 実際の動作確認
スクロールによって前の画像に後の画像が被っていったり、要素によって上がってくる速度が異なっていたり、なんてことがあります。 これを実現できそうなrellax.jsの使用方法やオプションを調べ、codepenで動作確認できます。