ourworld_web/www_aibox
20
0
Fork 0
Code Pull Requests Activity

fix text animation

Browse Source
This commit is contained in:
sasha-astiadi 2025-02-27 20:51:03 +08:00
parent f077f3993a
commit 90f69f4808
2 changed files with 28 additions and 87 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
templates/partials/hero/aihero6.html
View File

@ -3,23 +3,25 @@
<div class="mx-auto max-w-7xl px-6 lg:flex lg:items-center lg:gap-x-15 lg:px-8 py-12"> <div class="mx-auto max-w-7xl px-6 lg:flex lg:items-center lg:gap-x-15 lg:px-8 py-12">
<div class="mx-auto max-w-2xl lg:mx-0 lg:flex-auto"> <div class="mx-auto max-w-2xl lg:mx-0 lg:flex-auto">
<!-- Typing Text --> <!-- Typing Text -->
<h1 class="fade-in mt-10 font-normal tracking-tight text-black lg:text-[6rem] text-[2.5rem]">What's Inside AIBox</h1> <h1 id="typing-text2" class="fade-in mt-10 font-normal tracking-tight text-black lg:text-[6rem] text-[2.5rem]">
</h1>
<!-- Specification List --> <!-- Specification List -->
<dl class="mt-10 px-10 max-w-xl lg:space-y-6 space-y-3 text-gray-900 lg:max-w-xl"> <dl class="mt-10 px-10 max-w-xl lg:space-y-6 space-y-3 text-gray-900 lg:max-w-xl">
<div class="relative pl-2"><dt class="fade-in-item font-light text-xl text-black">✓ ThreeFold Zero-OS</dt></div> <div class="relative pl-2 fade-in-item"><dt class="font-light text-xl text-black">✓ ThreeFold Zero-OS</dt></div>
<div class="relative pl-2"><dt class="fade-in-item font-light text-xl text-black">✓ ThreeFold Mycelium Network</dt></div> <div class="relative pl-2 fade-in-item"><dt class="font-light text-xl text-black">✓ ThreeFold Mycelium Network</dt></div>
<div class="relative pl-2"><dt class="fade-in-item font-light text-xl text-black">✓ Powefull AMD CPU</dt></div> <div class="relative pl-2 fade-in-item"><dt class="font-light text-xl text-black">✓ Powerful AMD CPU</dt></div>
<div class="relative pl-2"><dt class="fade-in-item font-light text-xl text-black">✓ 64-128 GB Memory</dt></div> <div class="relative pl-2 fade-in-item"><dt class="font-light text-xl text-black">✓ 64-128 GB Memory</dt></div>
<div class="relative pl-2"><dt class="fade-in-item font-light text-xl text-black">✓ 2 x 2 TB SSD</dt></div> <div class="relative pl-2 fade-in-item"><dt class="font-light text-xl text-black">✓ 2 x 2 TB SSD</dt></div>
<div class="relative pl-2"><dt class="fade-in-item font-light text-xl text-black">✓ 7800 XTX GPU</dt></div> <div class="relative pl-2 fade-in-item"><dt class="font-light text-xl text-black">✓ 7800 XTX GPU</dt></div>
<div class="relative pl-2"><dt class="fade-in-item font-light text-xl text-black">✓ Watercooled GPU/CPU</dt></div> <div class="relative pl-2 fade-in-item"><dt class="font-light text-xl text-black">✓ Watercooled GPU/CPU</dt></div>
<div class="relative pl-2"><dt class="fade-in-item font-light text-xl text-black">✓ High Quality motherboard & power supply</dt></div> <div class="relative pl-2 fade-in-item"><dt class="font-light text-xl text-black">✓ High Quality motherboard & power supply</dt></div>
</dl> </dl>
</div> </div>
<!-- Image Section --> <!-- Image Section -->
<div class="fade-in-image mt-8 lg:mt-24 lg:flex lg:justify-center lg:w-1/2"> <div class="fade-in-image mt-8 lg:mt-24 lg:flex lg:justify-center lg:w-1/2">
<img class="w-full max-w-lg h-auto object-cover rounded-xl" src="/images/aibox_spec.jpg" alt="Mobile App Screenshot"> <img class="w-full max-w-lg h-auto object-cover rounded-xl" src="/images/aibox_spec.jpg" alt="AIBox Specifications">
</div> </div>
</div> </div>
</div> </div>
@ -38,8 +40,6 @@
opacity: 1; opacity: 1;
transform: translateY(0); transform: translateY(0);
} }
</style> </style>
<!-- Script --> <!-- Script -->
@ -48,49 +48,33 @@
/*** Typing Effect ***/ /*** Typing Effect ***/
const text = "What's Inside AIBox"; const text = "What's Inside AIBox";
const textElement = document.getElementById("typing-text2"); const textElement = document.getElementById("typing-text2");
let loopCount = 0; let index = 0;
const maxLoops = 1;
function typeText(i, callback) { function typeText() {
if (i < text.length) { if (index < text.length) {
textElement.textContent += text.charAt(i); textElement.textContent += text.charAt(index);
setTimeout(() => typeText(i + 1), 100); index++;
} setTimeout(typeText, 100);
}
function loopTyping() {
if (loopCount < maxLoops) {
typeText(0, () => {
deleteText(() => {
loopCount++;
loopTyping();
});
});
} else {
typeText(0, () => {}); // Final typing with no delete
} }
} }
/*** Fade-in Items One by One ***/ /*** Fade-in Items One by One ***/
const items = document.querySelectorAll(".fade-in-item"); const items = document.querySelectorAll(".fade-in-item");
const image = document.querySelector(".fade-in-image"); const image = document.querySelector(".fade-in-image");
let index = 0; let itemIndex = 0;
function showNextItem() { function showNextItem() {
if (index < items.length) { if (itemIndex < items.length) {
items[index].classList.add("show"); items[itemIndex].classList.add("show");
index++; itemIndex++;
setTimeout(showNextItem, 1000); setTimeout(showNextItem, 300); // Faster fade-in
} else { } else {
image.classList.add("show"); image.classList.add("show");
} }
} }
/*** Initialize Everything ***/ /*** Initialize Everything ***/
loopTyping(); typeText();
showNextItem(); setTimeout(showNextItem, 1500); // Delay to ensure text is typed first
// Fade-in Image after text animations
setTimeout(() => image.classList.add("show"), 1000);
}); });
</script> </script>

45
templates/partials/hero/aihero9.html
View File

@ -1,6 +1,6 @@
<div class="bg-white"> <div class="bg-white">
<div class="mx-auto max-w-4xl px-6 max-lg:text-center lg:max-w-7xl lg:px-8"> <div class="mx-auto max-w-4xl px-6 max-lg:text-center lg:max-w-7xl lg:px-8">
<h2 id="typing-text2" class="fade-in text-balance font-normal tracking-tight text-black lg:text-[6rem] text-[2.5rem]">{{ section.extra.title | default(value="Pre-order Your AIBox") }}</h2> <h2 class="fade-in text-balance font-normal tracking-tight text-black lg:text-[6rem] text-[2.5rem]">{{ section.extra.title | default(value="Pre-order Your AIBox") }}</h2>
<p class="mt-6 max-w-2xl text-lg font-light text-pretty text-black max-lg:mx-auto sm:text-xl/8">{{ section.extra.subtitle | default(value="Choose the box that's packed with the best features for your computing needs.") }}</p> <p class="mt-6 max-w-2xl text-lg font-light text-pretty text-black max-lg:mx-auto sm:text-xl/8">{{ section.extra.subtitle | default(value="Choose the box that's packed with the best features for your computing needs.") }}</p>
<p class="mt-6 max-w-2xl text-lg font-light text-pretty text-black max-lg:mx-auto sm:text-xl/10">{{ section.extra.subtitle2}}</p> <p class="mt-6 max-w-2xl text-lg font-light text-pretty text-black max-lg:mx-auto sm:text-xl/10">{{ section.extra.subtitle2}}</p>
</div> </div>
@ -79,46 +79,3 @@
} }
} }
</style> </style>
<script>
document.addEventListener("DOMContentLoaded", function () {
const text = "";
const textElement = document.getElementById("typing-text2");
let loopCount = 0;
const maxLoops = 5;
function typeText(i, callback) {
if (i < text.length) {
textElement.textContent += text.charAt(i);
setTimeout(() => typeText(i + 1, callback), 100);
} else {
setTimeout(callback, 1000);
}
}
function deleteText(callback) {
let currentText = textElement.textContent;
if (currentText.length > 0) {
textElement.textContent = currentText.substring(0, currentText.length - 1);
setTimeout(() => deleteText(callback), 50);
} else {
setTimeout(callback, 100);
}
}
function loopTyping() {
if (loopCount < maxLoops) {
typeText(0, () => {
deleteText(() => {
loopCount++;
loopTyping();
});
});
} else {
typeText(0, () => {}); // Final typing with no delete
}
}
loopTyping();
});
</script>