jQuery

jQueryでWEBサイトの記事文字数をカウントし、冒頭に読み終わる時間を表示! WordPress等のプラグインなし

jQueryのlengthメソッドを使って、記事内の改行や空白を除く(正規表現を使用)文字数をカウント。1分間で読める時間に計算した後「この記事は●●分で読めます」と表示させます。1分間に読める文字数は400~600文字程と言われています。
2021.12.02
HTML&CSS

デフォルトの入力フォーム・ボタンデザインを、ニューモーフィズムへ、背景色・キャレット色変更や入力後ラベルにアイコン追加

デフォルトの入力フォームを Neumorphism デザインへ変更。入力フォームの背景色・文字色・キャレット(フォーカスした時の入力位置に表示される縦棒)色の変更。また、jQueryを使って、入力または更新後に、ラベルにアイコンを追加。
2021.12.01
jQuery

WEBサイトの入力日付を受取り、現在日までの日数を計算し表示 JavaScriptとjQuery Datepicker

jQuery DatepickerとJavaScriptで、ユーザーが入力した日付から現在日までの日数を計算し表示。 現在日から特定の過去の日を引き算。 生まれた日からの計算をしたり、ダイエット期間を計算したり等に使用可能だと思います。
2021.12.02
jQuery

jQuery UI Datepicker(日付選択カレンダー) の使用方法、テーマ・オプションの種類・変更方法を解説

Datepickerのテーマやオプション使用方法を紹介。 テーマのスクショもあり。 機能しないと混乱を招きやすい「Today」ボタンについても説明あり。 テーマの選択方法はオプション追加とは異なり、Datepickerの読み込み時で行う。
2021.12.01
jQuery

期間限定日までの残り日数と時間をWEBサイトに表示 javascriptで将来日時から現在日時を引き算・繰り返す方法

「あと何時間で今日中にお届けします。」「キャンペーン終了日まであと何日です。」といった、期限日までの残り日数・時間を表示するための方法。 時間の取得はJavaScriptで行い、jQueryのtextメソッドで要素の数字を更新しています。
2021.12.09
HTML&CSS

CSSのみで簡単に実装!JSライブラリ不要 グラデーションを時間の経過とともに自然と変化させる

要素の背景をグラデーションにし、時間経過とともに自然とグラデーションを変化させていきます。 CSSの@keyframesを使うことで簡単にできます。 グラデーション自体も、参考サイトやジェネレーターを利用すれば、時間節約も可能です。
2021.12.01
HTML&CSS

AOSで簡単にパララックス効果! jQuery不要のライブラリ 使用方法やオプション説明、実装確認

先日はScrollReveal を紹介、今回はAOSを調査。 使用方法、オプション等を説明し、デフォルト及びオプション追加の実装の確認が可能。 デフォルトでも満足できます。要素毎のデフォルトのdistance値の変更方法もご紹介。
2021.12.01
jQuery

jQueryだけでスクロール量に応じてボックス内の要素を移動させ錯覚効果も実現、透明度の変化も可能

単色カラーのボックスで、スクロール量に応じてボックス内の要素をX方向へ移動することで、普通にY方向の上にだけ移動するボックスまで斜め上に上がるような錯覚を生み出します。 透明度の変化もスクロール量に応じて、要素を自然とフェードイン可能です。
2021.12.02
HTML&CSS

CSSでガラス風のプレートを作成 文字を彫ったように表示したり、取得した時刻をデジタル表示したり

CSSで透け感のあるガラスやアクリル板のようなプレートを作成し壁に取る付けてあるかのように。文字を彫ったように表示させるものと、時刻をデジタル表示させるもの2つ作成しています。 デジタル時計表示の記事の紹介もあります。
2021.12.16
IT

Simple Parallax Scrolling JSライブラリでパララックス効果 使用方法、オプション、動作を確認

パララックス効果を実現するJSライブラリSimple Parallax Scrolling について使用方法やオプションについてまとめてみました。 実際にcodepenでご確認いただけます。 都度jQueryでコードを書くより随分と楽に。
2021.12.02
IT

rellax.jsでパララックス効果を実現!JSライブラリ 使用方法・オプションを調査 実際の動作確認

スクロールによって前の画像に後の画像が被っていったり、要素によって上がってくる速度が異なっていたり、なんてことがあります。 これを実現できそうなrellax.jsの使用方法やオプションを調べ、codepenで動作確認できます。
2021.12.01
jQuery

jQueryとCSSで簡単!WEBサイトの背景色や文字色(デイorナイト モード)の切り替え方法

ユーザーが背景色を選択できるWEBサイトもたまに見かけます。 今回は背景色をデイモードorナイトモードに選択できるように実装してみたところ、案外簡単にできました。 この記事ではその方法についてご紹介いたしますので、ご参考になれば幸いです。
2022.01.11
スポンサーリンク
タイトルとURLをコピーしました