45 lines
1.9 KiB
HTML
45 lines
1.9 KiB
HTML
<div class="bg-transparent pb-24 pt-24">
|
|
<div class="mx-auto max-w-7xl px-6 lg:px-8">
|
|
<dl class="grid grid-cols-1 gap-x-8 gap-y-16 text-center lg:grid-cols-3">
|
|
<div class="mx-auto flex max-w-xs flex-col gap-y-4">
|
|
<dd class="fade-in order-first text-3xl font-semibold tracking-tight text-black sm:text-4xl opacity-0 transition-opacity duration-1000" data-observer>
|
|
Open Source.
|
|
</dd>
|
|
</div>
|
|
<div class="mx-auto flex max-w-xs flex-col gap-y-4">
|
|
<dd class="fade-in order-first text-3xl font-semibold tracking-tight text-black sm:text-4xl opacity-0 transition-opacity duration-1000" data-observer>
|
|
Authenticity.
|
|
</dd>
|
|
</div>
|
|
<div class="mx-auto flex max-w-xs flex-col gap-y-4">
|
|
<dd class="fade-in order-first text-3xl font-semibold tracking-tight text-black sm:text-4xl opacity-0 transition-opacity duration-1000" data-observer>
|
|
Simplicity.
|
|
</dd>
|
|
</div>
|
|
</dl>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
// JavaScript to handle Intersection Observer
|
|
document.addEventListener("DOMContentLoaded", () => {
|
|
const elementsToObserve = document.querySelectorAll("[data-observer]");
|
|
const observerOptions = {
|
|
root: null, // Observes relative to the viewport
|
|
threshold: 0.1, // Trigger when 10% of the element is visible
|
|
};
|
|
|
|
const observerCallback = (entries, observer) => {
|
|
entries.forEach((entry) => {
|
|
if (entry.isIntersecting) {
|
|
entry.target.classList.add("opacity-100"); // Make element fully visible
|
|
observer.unobserve(entry.target); // Stop observing once it's visible
|
|
}
|
|
});
|
|
};
|
|
|
|
const observer = new IntersectionObserver(observerCallback, observerOptions);
|
|
elementsToObserve.forEach((el) => observer.observe(el));
|
|
});
|
|
</script>
|
|
|