jQuery

jQuery

今日の年月日をスロット風アニメーションで表示 jQuery $.each()とfor()

Adobe XDの無料キットに数字をスロット風に回転して表示させるNumber counterというものがあったので、これを日付に変えて実装してみました。今日の日付を取得し、jQuery $.each()メソッドとfor()文でDOMに数字を追加します。
jQuery

サムネイル画像をクリックしてふわっと画像を切り替える方法

サムネイル画像をクリックして、メイン画像をふわっと切り替える方法です。imgタグにsrc属性の値をセットしフェードインすると、ふわっとならなかったり、一瞬画像が見えてフェードインしたりすることがあります。対象要素を分けて実装します。
jQuery

文字を円形状に自動で並べ3D回転する(水平・垂直・斜め)方法 CSSとjQueryで実現

文字を円形に並べ3D回転する方法を紹介しています。jQueryで計算し文字を円形に配置する為、文字数による手計算は不要です。3D円形は水平、垂直、斜め方向のパターンがあります。3D上の手前文字と背面文字が重なり見えづらくならない工夫をしています。
jQuery

文字を円形や半円状に自動で並べる方法 CSSとjQueryで文字数による計算不要

テキストを円形に配置する方法を紹介します。テキストを1つずつspanタグで囲ったり、文字数を数え角度計算することなく、CSSとjQueryで自動で円または半円状に配置する方法です。円形に配置すれば回転アニメーションも可能になります。
jQuery

CSS 文字(数字)を円形に配置してアナログ時計作成 jQueryで自動配置も可能

数字を円形に配置、アナログ時計を作成する方法を紹介いたします。文字の円形配置方法、時計針の角度変更方法を解説します。jQueryで不特定文字数を円形に配置することも可能です。文字の向きも水平方向、内向き方向、外向き方向のパターンを紹介しています。
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メソッドで要素の数字を更新しています。
jQuery

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

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

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

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