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

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

@ -1,25 +1,27 @@
<div class="fade-in">
<div class="relative isolate">
<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">
<!-- 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 -->
<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"><dt class="fade-in-item 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"><dt class="fade-in-item 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"><dt class="fade-in-item 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"><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">✓ ThreeFold Zero-OS</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 fade-in-item"><dt class="font-light text-xl text-black">✓ Powerful AMD CPU</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 fade-in-item"><dt class="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">✓ 7800 XTX GPU</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 fade-in-item"><dt class="font-light text-xl text-black">✓ High Quality motherboard & power supply</dt></div>
</dl>
</div>
<!-- Image Section -->
<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>
@ -38,8 +40,6 @@
opacity: 1;
transform: translateY(0);
}
</style>
<!-- Script -->
@ -48,49 +48,33 @@
/*** Typing Effect ***/
const text = "What's Inside AIBox";
const textElement = document.getElementById("typing-text2");
let loopCount = 0;
const maxLoops = 1;
let index = 0;
function typeText(i, callback) {
if (i < text.length) {
textElement.textContent += text.charAt(i);
setTimeout(() => typeText(i + 1), 100);
}
}
function loopTyping() {
if (loopCount < maxLoops) {
typeText(0, () => {
deleteText(() => {
loopCount++;
loopTyping();
});
});
} else {
typeText(0, () => {}); // Final typing with no delete
function typeText() {
if (index < text.length) {
textElement.textContent += text.charAt(index);
index++;
setTimeout(typeText, 100);
}
}
/*** Fade-in Items One by One ***/
const items = document.querySelectorAll(".fade-in-item");
const image = document.querySelector(".fade-in-image");
let index = 0;
let itemIndex = 0;
function showNextItem() {
if (index < items.length) {
items[index].classList.add("show");
index++;
setTimeout(showNextItem, 1000);
if (itemIndex < items.length) {
items[itemIndex].classList.add("show");
itemIndex++;
setTimeout(showNextItem, 300); // Faster fade-in
} else {
image.classList.add("show");
}
}
/*** Initialize Everything ***/
loopTyping();
showNextItem();
// Fade-in Image after text animations
setTimeout(() => image.classList.add("show"), 1000);
typeText();
setTimeout(showNextItem, 1500); // Delay to ensure text is typed first
});
</script>

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

@ -1,6 +1,6 @@
<div class="bg-white">
<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/10">{{ section.extra.subtitle2}}</p>
</div>
@ -79,46 +79,3 @@
}
}
</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>