-
15:16
-
"
);
}
+ var phoneCardsEl = document.getElementById("phone-cards");
var laptopCardsEl = document.getElementById("laptop-cards");
- if (laptopCardsEl) {
- for (var ci = 0; ci < cardData.length; ci++) {
- laptopCardsEl.innerHTML += makeCardHTML(cardData[ci], false);
- }
+ for (var ci = 0; ci < cardData.length; ci++) {
+ if (ci < 6) phoneCardsEl.innerHTML += makeCardHTML(cardData[ci], true);
+ laptopCardsEl.innerHTML += makeCardHTML(cardData[ci], false);
}
var phoneTex = new THREE.CanvasTexture(capPhoneCvs);
@@ -651,23 +656,24 @@
function render() {
var d = S.drift;
- // ── Animate live HTML content ──
- var ptEl = document.getElementById("phone-title");
- if (ptEl) ptEl.style.opacity = S.titleFade;
- var ltEl = document.getElementById("laptop-title");
- if (ltEl) ltEl.style.opacity = S.titleFade;
- var pcEl = document.getElementById("phone-count");
- if (pcEl) pcEl.textContent = "Catalog " + Math.round(S.counter);
- var lcEl = document.getElementById("laptop-count");
- if (lcEl) lcEl.textContent = "Catalog " + Math.round(S.counter);
+ // ── Animate live HTML content (captured to texture every frame) ──
+ // Title fade-in
+ document.getElementById("phone-title").style.opacity = S.titleFade;
+ document.getElementById("laptop-title").style.opacity = S.titleFade;
+ // Counter
+ var cnt = Math.round(S.counter);
+ document.getElementById("phone-count").textContent = "Catalog " + cnt;
+ document.getElementById("laptop-count").textContent = "Catalog " + cnt;
+ // Staggered card reveal
var allCards = document.querySelectorAll(".anim-card");
for (var ci2 = 0; ci2 < allCards.length; ci2++) {
var cardProgress = Math.max(0, Math.min(1, (S.cardReveal * allCards.length - ci2) * 1.5));
allCards[ci2].style.opacity = cardProgress;
allCards[ci2].style.transform = "translateY(" + (1 - cardProgress) * 15 + "px)";
}
- if (phoneScrollEl) phoneScrollEl.style.transform = "translateY(-" + S.scroll * 500 + "px)";
- if (lapScrollEl) lapScrollEl.style.transform = "translateY(-" + S.scroll * 300 + "px)";
+ // Scroll
+ phoneScrollEl.style.transform = "translateY(-" + S.scroll * 500 + "px)";
+ lapScrollEl.style.transform = "translateY(-" + S.scroll * 300 + "px)";
// Re-capture HTML to texture
captureScreens();