Skip to content

Commit b69d566

Browse files
371tti371tti
committed
依存関係のバージョンを更新し、アニメーションスタイルを改善しました。また、新しいバックグラウンドエフェクトを追加し、スムーズスクロール機能を実装しました。不要なファイルを削除しました。
1 parent aef5534 commit b69d566

File tree

10 files changed

+285
-128
lines changed

10 files changed

+285
-128
lines changed

‎Cargo.lock‎

Lines changed: 10 additions & 10 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Cargo.toml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ edition = "2024"
66
[dependencies]
77
env_logger = "0.11.8"
88
chrono = "0.4.41"
9-
kurosabi = "0.3.11"
10-
tokio = { version = "1.45.0", features = ["full"] }
9+
kurosabi = "0.3.13"
10+
tokio = { version = "1.45.1", features = ["full"] }
1111
serde_json = "1.0.140"
1212
serde = { version = "1.0.219", features = ["derive"] }
1313
dashmap = "6.1.0"

‎data/pages/index/back.html‎

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
<!DOCTYPE html>
2+
<html lang="ja">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width,initial-scale=1" />
6+
<title>Tech Dark Background</title>
7+
<style>
8+
:root{
9+
--color-bg-0:#000;
10+
--color-bg-1:#232323;
11+
--color-bg-2:#875e46;
12+
--color-text-0:#d1d1d1;
13+
--color-text-1:#fff;
14+
--color-accent-0:#815a44;
15+
--color-accent-1:#e8af7f;
16+
17+
/* スクロール→JS で更新されるオフセット(px) */
18+
--scrollOffset:0px;
19+
}
20+
21+
/* -------------------------------- ベース */
22+
html{background:#000;margin:0;padding:0;}
23+
24+
.backwapper{
25+
position:fixed;
26+
inset:0;
27+
z-index:-999;
28+
overflow:hidden;
29+
30+
/* ── グリッド／ドット／右下グラデーション ───────── */
31+
background:
32+
linear-gradient(color-mix(in srgb,var(--color-accent-0) 10%,transparent) 1px,transparent 1px),
33+
linear-gradient(90deg,color-mix(in srgb,var(--color-accent-0) 10%,transparent) 1px,transparent 1px),
34+
radial-gradient(circle at 0 0,var(--color-accent-1) 1px,transparent 1px),
35+
radial-gradient(ellipse at bottom right,
36+
color-mix(in srgb,var(--color-accent-0) 30%,transparent) 0%,
37+
var(--color-bg-0) 60%);
38+
background-size:40px 40px,40px 40px,80px 80px,100% 100%;
39+
40+
/* ▼ここが “スクロール × 0.3” で常に変わる */
41+
background-position:
42+
0 calc(-1 * var(--scrollOffset)),
43+
0 calc(-1 * var(--scrollOffset)),
44+
0 calc(-1 * var(--scrollOffset)),
45+
0 0;
46+
47+
/* ── 200 ms で滑らかに補間させる ─────────────── */
48+
transition:background-position 1000ms ease-out;
49+
will-change:background-position;
50+
51+
/* ── マスク（光が走るアニメ） ────────────── */
52+
mask-image:repeating-linear-gradient(
53+
120deg,
54+
transparent 0%, transparent 8%,
55+
color-mix(in srgb,var(--color-bg-0) 20%,transparent) 12%,
56+
color-mix(in srgb,var(--color-bg-0) 50%,transparent) 16%,
57+
color-mix(in srgb,var(--color-bg-0) 80%,transparent) 20%,
58+
black 24%, black 36%,
59+
color-mix(in srgb,var(--color-bg-0) 80%,transparent) 40%,
60+
color-mix(in srgb,var(--color-bg-0) 50%,transparent) 44%,
61+
color-mix(in srgb,var(--color-bg-0) 20%,transparent) 48%,
62+
transparent 52%, transparent 58%,
63+
color-mix(in srgb,var(--color-bg-0) 20%,transparent) 62%,
64+
color-mix(in srgb,var(--color-bg-0) 50%,transparent) 66%,
65+
color-mix(in srgb,var(--color-bg-0) 80%,transparent) 70%,
66+
black 74%, black 86%,
67+
color-mix(in srgb,var(--color-bg-0) 80%,transparent) 90%,
68+
color-mix(in srgb,var(--color-bg-0) 50%,transparent) 94%,
69+
color-mix(in srgb,var(--color-bg-0) 20%,transparent) 98%,
70+
transparent 100%
71+
);
72+
-webkit-mask-image:repeating-linear-gradient(120deg,transparent 0%,transparent 8%,color-mix(in srgb,var(--color-bg-0) 20%,transparent) 12%,color-mix(in srgb,var(--color-bg-0) 50%,transparent) 16%,color-mix(in srgb,var(--color-bg-0) 80%,transparent) 20%,black 24%,black 36%,color-mix(in srgb,var(--color-bg-0) 80%,transparent) 40%,color-mix(in srgb,var(--color-bg-0) 50%,transparent) 44%,color-mix(in srgb,var(--color-bg-0) 20%,transparent) 48%,transparent 52%,transparent 58%,color-mix(in srgb,var(--color-bg-0) 20%,transparent) 62%,color-mix(in srgb,var(--color-bg-0) 50%,transparent) 66%,color-mix(in srgb,var(--color-bg-0) 80%,transparent) 70%,black 74%,black 86%,color-mix(in srgb,var(--color-bg-0) 80%,transparent) 90%,color-mix(in srgb,var(--color-bg-0) 50%,transparent) 94%,color-mix(in srgb,var(--color-bg-0) 20%,transparent) 98%,transparent 100%);
73+
mask-size:200% 200%;
74+
mask-repeat:no-repeat;
75+
animation:flowMask 12s linear infinite;
76+
}
77+
78+
@keyframes flowMask{
79+
0% {mask-position:0% 0%;}
80+
100% {mask-position:100% 100%;}
81+
}
82+
83+
/* ---------- DEMO 用本文 ---------- */
84+
main{
85+
max-width:54rem;
86+
margin:auto;
87+
padding:8rem 2rem;
88+
line-height:1.7;
89+
color:var(--color-text-0);
90+
font-family:system-ui,Helvetica,Arial,sans-serif;
91+
}
92+
p{margin:0 0 2rem;}
93+
</style>
94+
</head>
95+
<body>
96+
97+
<div class="backwapper"></div>
98+
99+
<main>
100+
<h1>スクロールテスト</h1>
101+
<p>ページをスクロールすると、グリッドが 0.3&times; の速度で、200&nbsp;ms の滑らかさで追従します。</p>
102+
<script>
103+
for(let i=0;i<120;i++){
104+
document.write(`<p>ダミーテキスト ${i+1}</p>`);
105+
}
106+
</script>
107+
</main>
108+
109+
<script>
110+
/* =====================================================
111+
スクロール基準を「読み込み時の位置 = 0」にする版
112+
===================================================== */
113+
const root = document.documentElement;
114+
const baseScroll = root.scrollTop || window.scrollY; // ←★ ここが基準
115+
116+
let ticking = false;
117+
118+
/* rAF で 1 frame に 1 回だけ更新 */
119+
function sync(){
120+
const current = root.scrollTop || window.scrollY;
121+
const offsetPx = (current - baseScroll) * 0.1; // ← 差分 × 0.3
122+
root.style.setProperty('--scrollOffset', offsetPx.toFixed(1)+'px');
123+
ticking = false;
124+
}
125+
126+
addEventListener('scroll', ()=>{
127+
if(!ticking){ requestAnimationFrame(sync); ticking = true; }
128+
},{passive:true});
129+
130+
sync(); // 初期描画（ページを開いた時点の位置 = 0）
131+
</script>
132+
133+
134+
</body>
135+
</html>

‎data/pages/index/backwapper.css‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
.backwapper{
2+
position:fixed;
3+
inset:0;
4+
z-index:-999;
5+
overflow:hidden;
6+
7+
/* ── グリッド／ドット／右下グラデーション ───────── */
8+
background:
9+
linear-gradient(color-mix(in srgb,var(--color-accent-0) 10%,transparent) 1px,transparent 1px),
10+
linear-gradient(90deg,color-mix(in srgb,var(--color-accent-0) 10%,transparent) 1px,transparent 1px),
11+
radial-gradient(circle at 0 0,var(--color-accent-1) 1px,transparent 1px),
12+
radial-gradient(ellipse at bottom right,
13+
color-mix(in srgb,var(--color-accent-0) 30%,transparent) 0%,
14+
var(--color-bg-0) 60%);
15+
background-size:40px 40px,40px 40px,80px 80px,100% 100%;
16+
17+
/* ▼ここが "スクロール × 0.3" で常に変わる */
18+
background-position:
19+
calc(-1 * var(--scrollOffsetX)) calc(-1 * var(--scrollOffsetY)),
20+
calc(-1 * var(--scrollOffsetX)) calc(-1 * var(--scrollOffsetY)),
21+
calc(-1 * var(--scrollOffsetX)) calc(-1 * var(--scrollOffsetY)),
22+
0 0;
23+
24+
/* ── 200 ms で滑らかに補間させる ─────────────── */
25+
transition:background-position 1600ms ease-out;
26+
will-change:background-position;
27+
28+
/* ── マスク（光が走るアニメ） ────────────── */
29+
mask-image:repeating-linear-gradient(
30+
120deg,
31+
transparent 0%, transparent 8%,
32+
color-mix(in srgb,var(--color-bg-0) 20%,transparent) 12%,
33+
color-mix(in srgb,var(--color-bg-0) 50%,transparent) 16%,
34+
color-mix(in srgb,var(--color-bg-0) 80%,transparent) 20%,
35+
black 24%, black 36%,
36+
color-mix(in srgb,var(--color-bg-0) 80%,transparent) 40%,
37+
color-mix(in srgb,var(--color-bg-0) 50%,transparent) 44%,
38+
color-mix(in srgb,var(--color-bg-0) 20%,transparent) 48%,
39+
transparent 52%, transparent 58%,
40+
color-mix(in srgb,var(--color-bg-0) 20%,transparent) 62%,
41+
color-mix(in srgb,var(--color-bg-0) 50%,transparent) 66%,
42+
color-mix(in srgb,var(--color-bg-0) 80%,transparent) 70%,
43+
black 74%, black 86%,
44+
color-mix(in srgb,var(--color-bg-0) 80%,transparent) 90%,
45+
color-mix(in srgb,var(--color-bg-0) 50%,transparent) 94%,
46+
color-mix(in srgb,var(--color-bg-0) 20%,transparent) 98%,
47+
transparent 100%
48+
);
49+
-webkit-mask-image:repeating-linear-gradient(120deg,transparent 0%,transparent 8%,color-mix(in srgb,var(--color-bg-0) 20%,transparent) 12%,color-mix(in srgb,var(--color-bg-0) 50%,transparent) 16%,color-mix(in srgb,var(--color-bg-0) 80%,transparent) 20%,black 24%,black 36%,color-mix(in srgb,var(--color-bg-0) 80%,transparent) 40%,color-mix(in srgb,var(--color-bg-0) 50%,transparent) 44%,color-mix(in srgb,var(--color-bg-0) 20%,transparent) 48%,transparent 52%,transparent 58%,color-mix(in srgb,var(--color-bg-0) 20%,transparent) 62%,color-mix(in srgb,var(--color-bg-0) 50%,transparent) 66%,color-mix(in srgb,var(--color-bg-0) 80%,transparent) 70%,black 74%,black 86%,color-mix(in srgb,var(--color-bg-0) 80%,transparent) 90%,color-mix(in srgb,var(--color-bg-0) 50%,transparent) 94%,color-mix(in srgb,var(--color-bg-0) 20%,transparent) 98%,transparent 100%);
50+
mask-size:200% 200%;
51+
mask-repeat:no-repeat;
52+
animation:flowMask 12s linear infinite;
53+
}
54+
55+
@keyframes flowMask{
56+
0% {mask-position:0% 0%;}
57+
100% {mask-position:100% 100%;}
58+
}

‎data/pages/index/backwapper.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
// File: data/pages/index/backwapper.js
2+
window.addEventListener('load', () => {
3+
/* ===== ここから ".main のスクロール ×0.3" 処理 ===== */
4+
const root = document.documentElement;
5+
const scroller = document.querySelector('.main');
6+
if (!scroller) {
7+
console.warn('.main 要素が見つかりません');
8+
return;
9+
}
10+
11+
const base = scroller.scrollTop; // 読み込み時の位置を 0
12+
let ticking = false;
13+
14+
function sync() {
15+
const offsetY = (scroller.scrollTop - base) * 0.1;
16+
const offsetX = (scroller.scrollTop - base) * 0.05; // X軸方向にも移動
17+
root.style.setProperty('--scrollOffsetX', offsetX.toFixed(1) + 'px');
18+
root.style.setProperty('--scrollOffsetY', offsetY.toFixed(1) + 'px');
19+
ticking = false;
20+
}
21+
22+
scroller.addEventListener('scroll', () => {
23+
if (!ticking) {
24+
requestAnimationFrame(sync);
25+
ticking = true;
26+
}
27+
}, { passive: true });
28+
29+
sync(); // 初回反映
30+
});

‎data/pages/index/box-load-anime.js‎

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,11 @@ const hideBoxAndAllChildren = (box) => {
55

66
// 各要素に対してアニメーション初期スタイルを設定
77
elements.forEach((el, index) => {
8+
// 左から右に表示されるような初期状態
89
el.style.opacity = '0';
9-
el.style.transform = 'translateY(20px) scale(0.95)';
10-
el.style.transition = `opacity 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
11-
transform 0.4s cubic-bezier(0.25, 0.1, 0.25, 1.1)`;
12-
// 深さに応じて遅延を増やす（同じ階層の要素は同じ遅延を持つ）
13-
const depth = getElementDepth(el, box);
14-
el.style.transitionDelay = `${depth * 0.1}s`;
10+
el.style.transform = 'translateX(-30px)';
11+
el.style.transition = `opacity 0.4s cubic-bezier(0.25, 0.1, 0.25, 1),
12+
transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1)`;
1513
});
1614
};
1715

@@ -44,17 +42,18 @@ document.querySelectorAll('.box').forEach(hideBoxAndAllChildren);
4442
const observer = new IntersectionObserver((entries) => {
4543
entries.forEach(entry => {
4644
if (entry.isIntersecting) {
47-
// フェードインスタイルを適用（対象と全ての子要素）
45+
// 左から右に覆いを取るようなフェードインスタイルを適用
4846
const box = entry.target;
4947
const elements = [box, ...Array.from(box.querySelectorAll('*'))];
5048

51-
elements.forEach((el) => {
52-
// 階層の深さに基づいた遅延を設定
53-
const depth = getElementDepth(el, box);
49+
elements.forEach((el, index) => {
50+
// 段階的に表示するための遅延
51+
const delay = index * 16; // 16msずつ遅延
52+
5453
setTimeout(() => {
5554
el.style.opacity = '1';
56-
el.style.transform = 'translateY(0) scale(1)';
57-
}, depth * 100);
55+
el.style.transform = 'translateX(0)';
56+
}, delay);
5857
});
5958

6059
observer.unobserve(entry.target); // 一度監視したら解除

0 commit comments

Comments
 (0)