お客様の声

2025.02.24

じゃらん
での口コミ評価

楽天トラベル
での口コミ

一休.com
での口コミ

宿泊されたお客様のブログ

/** * アップロードされた画像を 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);