パンフレットPamphlet 日本語・英語・中国語・韓国語
/**
* アップロードされた画像を data-file-name 属性に基づいて表示する
* 画像の遅延読み込みとフェードイン効果を追加
*/
const fileMap = {
"store-logo": "uploaded:store-logo-8eb176ca-2ede-43ac-b75f-8fb030d25d60",
"therapist.jpg": "uploaded:therapist.jpg-0429ab59-8ff9-4425-be09-fd2023a7604d",
"directions.jpg": "uploaded:directions.jpg-21082c97-4136-48a6-b453-89450882e7c3",
"exterior.jpg": "uploaded:exterior.jpg-91400deb-74e5-45bd-9dce-31015ca288b1"
};
document.querySelectorAll('img[data-file-name]').forEach(img => {
const fileName = img.getAttribute('data-file-name');
const contentFetchId = fileMap[fileName];
if (contentFetchId) {
// ファイルIDを使って画像URLを生成（プレビュー環境でのみ動作）
const imageUrl = `/__file_content/${contentFetchId}`;
// 画像がロードされたらフェードインさせる
img.onload = () => {
img.classList.add('loaded');
};
// srcを設定
img.src = imageUrl;
} else {
console.error(`File ID not found for: ${fileName}`);
}
});
// ----------------------------------------------------
// パララックス実装
// ----------------------------------------------------
const parallaxTarget = document.getElementById('hero-image');
const parallaxContainer = document.querySelector('.parallax-container');
const speed = 0.2; // スクロールスピードの20%で画像を動かす
/**
* スクロール位置に基づいてパララックス効果を適用する
*/
function applyParallax() {
if (!parallaxTarget || !parallaxContainer) return;
// 1. 要素の表示領域内でのY座標（ビューポート上端からの距離）を取得
const rect = parallaxContainer.getBoundingClientRect();
// 2. スクロール量に連動して移動量を計算
// ここでは、コンテナがビューポートに入った時を基準に移動量を計算します
const scrollPosition = rect.top;
// 3. 移動量を適用 (スクロール量 * 速度)
// スクロールダウン(rect.topが減少)すると、画像はゆっくり上に移動(translateYが減少)
const movement = scrollPosition * speed;
// CSSのtransformを更新
parallaxTarget.style.transform = `translateY(${movement}px)`;
}
// 初期ロード時とスクロール時にパララックスを適用
window.addEventListener('scroll', applyParallax);
window.addEventListener('resize', applyParallax);
window.addEventListener('load', applyParallax);
