HTML＆CSS bubbly-bg.js JSライブラリ 使用方法・オプション・canvas指定・角度を解説 雪降るイメージ実装あり
簡単に美しい泡のアニメーションを実装してくれるjQuery非依存のライブラリ。 オプションで悩むことはほとんどありませんが、オプションを調査し、あわせて実際にCODEPENで雪降るイメージを作成。canvas指定・角度も解説。
HTML＆CSS 
jQuery jQueryでWEBサイトの記事文字数をカウントし、冒頭に読み終わる時間を表示！ WordPress等のプラグインなし
jQueryのlengthメソッドを使って、記事内の改行や空白を除く（正規表現を使用）文字数をカウント。1分間で読める時間に計算した後「この記事は●●分で読めます」と表示させます。1分間に読める文字数は400～600文字程と言われています。
HTML＆CSS デフォルトの入力フォーム・ボタンデザインを、ニューモーフィズムへ、背景色・キャレット色変更や入力後ラベルにアイコン追加
デフォルトの入力フォームを Neumorphism デザインへ変更。入力フォームの背景色・文字色・キャレット（フォーカスした時の入力位置に表示される縦棒）色の変更。また、jQueryを使って、入力または更新後に、ラベルにアイコンを追加。
jQuery WEBサイトの入力日付を受取り、現在日までの日数を計算し表示 JavaScriptとjQuery Datepicker
jQuery DatepickerとJavaScriptで、ユーザーが入力した日付から現在日までの日数を計算し表示。 現在日から特定の過去の日を引き算。 生まれた日からの計算をしたり、ダイエット期間を計算したり等に使用可能だと思います。
jQuery jQuery UI Datepicker（日付選択カレンダー） の使用方法、テーマ・オプションの種類・変更方法を解説
Datepickerのテーマやオプション使用方法を紹介。 テーマのスクショもあり。 機能しないと混乱を招きやすい「Today」ボタンについても説明あり。 テーマの選択方法はオプション追加とは異なり、Datepickerの読み込み時で行う。
jQuery 期間限定日までの残り日数と時間をWEBサイトに表示 javascriptで将来日時から現在日時を引き算・繰り返す方法
「あと何時間で今日中にお届けします。」「キャンペーン終了日まであと何日です。」といった、期限日までの残り日数・時間を表示するための方法。 時間の取得はJavaScriptで行い、jQueryのtextメソッドで要素の数字を更新しています。
HTML＆CSS CSSのみで簡単に実装！JSライブラリ不要 グラデーションを時間の経過とともに自然と変化させる
要素の背景をグラデーションにし、時間経過とともに自然とグラデーションを変化させていきます。 CSSの@keyframesを使うことで簡単にできます。 グラデーション自体も、参考サイトやジェネレーターを利用すれば、時間節約も可能です。
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で動作確認できます。