視界がモノクロになる〜.js
@ngnchiikawa
https://gyazo.com/301479a1534a47c63e6c59b12910cd57
只今開発中
code:s1.js
const gettingMonochrome = () => {
// 30秒間で徐々にモノクロに変化する処理
const startTime = Date.now();
const duration = 10000; // 30秒
const initialGrayscale = 0; // 初期のモノクロ度(0から1の範囲)
const targetGrayscale = 1; // 目標のモノクロ度
function changeGrayscale() {
const currentTime = Date.now();
const elapsed = currentTime - startTime;
const progress = Math.min(elapsed / duration, 1); // 進行度を計算
const currentGrayscale = initialGrayscale + (targetGrayscale - initialGrayscale) * progress;
document.body.style.filter = grayscale(${currentGrayscale * 100}%);
if (progress < 1) {
requestAnimationFrame(changeGrayscale); // アニメーションを続行
}
}
// ページ遷移後、アニメーションを開始
setTimeout(changeGrayscale, 0); // すぐに実行
}
// gettingMonochrome関数を呼び出して処理を開始
gettingMonochrome();
読むcFQ2f7LRuLYP.icon
const gettingMonochrome = () => {
gettingMonochromeの定数宣言
他にも定数を宣言する
1. const startTime = Date.now();
2. const duration = 30000; // 30秒
durationは「間隔」
3. const initialGrayscale = 0; // 初期のモノクロ度(0から1の範囲)
4. const targetGrayscale = 1; // 目標のモノクロ度
function changeGrayscale() {
function宣言は関数を定義する
ここではchangeGrayscale()について定義
関数で使用する定数などを宣言する
1. const currentTime = Date.now();
2. const elapsed = currentTime - startTime;
currentTime - startTimeから引いた値を代入
3. const progress = Math.min(elapsed / duration, 1); // 進行度を計算
elapsed / duration と 1を比較して低い値となる
計算結果は最大1となる
例:仮に1秒経過していたとしたら1/30となる
elasped = 1000 - 0 = 1000
progress = Math.min(1000/30000, 1) = 1/30
4. const currentGrayscale = initialGrayscale + (targetGrayscale - initialGrayscale) * progress;
currentGrayscaleに代入する値を計算する
冒頭で定義したinitialGrayscaleに、(targetGrayscale - initialGrayscale) * progressを足す
例:仮に1秒経過していたら
0 + (1 - 0)*1/30 = 1/30
5. document.body.style.filter = grayscale(${currentGrayscale * 100}%);
6. if (progress < 1) {requestAnimationFrame(changeGrayscale); // アニメーションを続行}
{}を変な書き方にしてしまったが一行に納めるためである
code:script.js
const gettingMonochrome = () => {
// 30秒間で徐々にモノクロに変化する処理
const startTime = Date.now();
const duration = 10000; // 30秒
const initialGrayscale = 0; // 初期のモノクロ度(0から1の範囲)
const targetGrayscale = 1; // 目標のモノクロ度
function changeGrayscale() {
const currentTime = Date.now();
const elapsed = currentTime - startTime;
const progress = Math.min(elapsed / duration, 1); // 進行度を計算
const currentGrayscale = initialGrayscale + (targetGrayscale - initialGrayscale) * progress;
document.body.style.filter = grayscale(${currentGrayscale * 100}%);
if (progress < 1) {
requestAnimationFrame(changeGrayscale); // アニメーションを続行
}
}
// ページ遷移後、アニメーションを開始
setTimeout(changeGrayscale, 0); // すぐに実行
// ページ遷移時の処理
function restoreColor() {
const startTime = Date.now();
const duration = 3000; // 3秒間でカラーに戻すアニメーション
const initialGrayscale = 1; // 初期のモノクロ度(カラーに戻すためには1)
const targetGrayscale = 0; // 目標のモノクロ度(0から1の範囲)
function changeGrayscale() {
const currentTime = Date.now();
const elapsed = currentTime - startTime;
const progress = Math.min(elapsed / duration, 1);
const currentGrayscale = initialGrayscale - (initialGrayscale - targetGrayscale) * progress;
document.body.style.filter = grayscale(${currentGrayscale * 100}%);
if (progress < 1) {
requestAnimationFrame(changeGrayscale);
}
}
changeGrayscale(); // カラーに戻すアニメーションを開始
}
// ページ遷移後にカラーに戻すアニメーションを実行
window.addEventListener('unload', restoreColor);
};
// gettingMonochrome関数を呼び出して処理を開始
gettingMonochrome();