プログラミング

時間とともに風景画像の色を変化させるサンプルページを作りました

投稿日:2017年8月3日 更新日:

時間とともに風景画像の色を変化させるサンプルページを作りました。

夕方や夜に変化する効果を狙っています。

1. スクリーンショット

スクリーンショット

2. デモ

以下のURLでデモを見ることができます。

リンク先のページに、いろいろ説明が書いてあります。

3. ソースコード

4. メモ

このサイトのヘッダにある風景画像にも適用してみました。

  • アクセスする時間帯によって色が変わります。
  • ずっと開いたままにしておくと、だんだん色が変わってきます。

📂-プログラミング
-

執筆者:labo


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

webpack Bootstrap

Webpack 4 (もしくは 3) で Bootstrap v4.0 を利用するサンプルコード

目次1. はじめに2. サンプルコード3. 想定する環境OSその他4. 今回のディレクトリ構造5. 動作させるための手順1. 今回作業するプロジェクトのディレクトリに移動します2. npm のパッケー …

Web Storage を使ったサンプルページを作りました

Web Storage を使ったサンプルページを作りました。 目次1. スクリーンショット2. デモページ3. 動作4. ソースコード5. 参考情報 1. スクリーンショット スクリーンショット 2. …

Babel とは?

目次1. Babel とは?2. JavaScript のバージョン3. プラグイン (plugins)4. プリセット (preset)5. 基本的な使い方6. Babel のイメージ 1. Bab …

web development

Resource Timing API を使って、リソースの読み込みに掛かった時間を計測する

目次1. Resource Timing API について2. サンプルコード3. PerformanceResourceTiming インターフェイス4. デモページ5. 参考仕様MDNブラウザの対 …

Web Programming

History API のメモ

History API についての簡単な説明を書きました。 「History API の概要を思い出したくなった時に、ざっと眺める」というのがこのページの主な目的です。 目次1. History AP …