jQuery jQueryとCSSで簡単！WEBサイトの背景色や文字色（デイorナイト モード）の切り替え方法
ユーザーが背景色を選択できるWEBサイトもたまに見かけます。 今回は背景色をデイモードorナイトモードに選択できるように実装してみたところ、案外簡単にできました。 この記事ではその方法についてご紹介いたしますので、ご参考になれば幸いです。
jQuery 
IT 簡単にパララックスを実現！JSライブラリ ScrollReveal 使用方法・オプションの説明 動作確認
以前使用し使いやすかったので、もう少し掘り下げてオプション等調べてみました。 codepenで動作確認できます。 JSファイルは必要ですが、使いこなせると都度jQueryでコードを書くより随分と楽になります！
jQuery サイトにアナログ時計表示 JavaScriptで時間取得し、jQueryで時計針の角度を計算 CSSで円形の時計に
前回、デジタル時計をサイトに表示させてみました。 序にアナログ時計も作成してみました。 JavaScriptで現在時間を取得し、jQueryのcssメソッドを使い、transformプロパティで時計の短針と長針の角度を変更していきます。
jQuery WEBサイトにデジタル時計を表示 オブジェクトに関数を渡してループ処理、CSSで数字毎にバーを表示
JavaScriptで現在時間を取得し、jQueryとCSSでWEBサイト上に時刻をデジタル表示してみました。 単に時刻を表示するだけのバージョンと、時計に見立てたバージョンを作成しました。 時刻をWEBサイトに表示する機会は少ないかもと思いますが。
HTML＆CSS マウスオーバーで透け感ありのガラス風の両開き扉が開き、背面の画像を表示! CSSのみで実装
マウスオーバーすると、ガラス風に見立てた両開き扉が手前に開くものと、スライドで開くものを作成しました。 扉が開くと下の画像が表示されます。ガラス風扉の利点を活かして、うっすらと下の画像が見えるところがポイントです。
HTML＆CSS WEB制作に役立つ、もうCSSで迷わない、時間節約にも！CSS関連ジェネレーター他13選
CSSだけでもアニメーションから3Dまで、たくさんのことが実装できリッチなサイトを制作できます。 ただ、プロパティやその値も多く、時間を浪費してしまいます。 CSSを簡単に作成してくれるジェネレーターを中心に役立つツールをご紹介いたします。
HTML＆CSS 回転する３D立体ボックスに画像を表示し、スライダー風に！ CSSのみで簡単に実装した アレンジバージョン
立体ボックスの一面に画像を貼付けて回転させ、スライダー風に画像を表示。 画像をマウスオーバーした時、画像が上にスライドして下に隠れていたテキストが表示、画像が回転して裏面のテキストが表示さ、画像が上へ押し開きされるアニメーションを実装。
HTML＆CSS 回転する3D立体ボックスに画像を貼りスライダー替わりに！ CSSのみで簡単に実装でき、一時停止も可能
立体ボックスを構成する一面に画像を貼り付けて回転することにより、スライダー風に画像を表示できるのでは？と思い作成してみました。 用途としては、1つの商品の視点を変えた画像を4面に貼り付け、商品（立体ボックス）を並べるというのはありかも。
HTML＆CSS 3D回転するユニークなヘッダー！ かつ多階層メニュー 第2階層はスライドダウンで開閉、第3階層はアコーディオン開閉
メニューそれぞれを立体的な面（四角柱の一面）ととらえ、かつ四角柱をＹ軸を軸として回転させるアニメーションを作成しました（CSSで回転を実現しています）。 第2階層をスライドダウン、第3階層をアコーディオン... 省スペースが可能です。
jQuery グローバルメニューを多階層メニューに 第2階層をスライドダウン、第3階層をアイコンでアコーディオン開閉の併用
第1階層のメニューをマウスオーバーすると第2階層メニューがスライドダウンし、第２階層メニューのアイコンクリックで、第2階層メニュー自体のリンクに遷移することなく、第３階層メニューをアコーディオン開閉する、多階層メニューを作成しました。