Animate green exploded view (#28973)

This commit is contained in:
Bram Kragten 2023-09-21 18:30:20 +02:00 committed by GitHub
parent 3ba0b6c1b2
commit 915fd8c4c7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 114 additions and 18 deletions

View File

@ -1069,20 +1069,64 @@ frontpage_image: /images/frontpage/green-frontpage.png
<h4 class="heading-small">eMMC&nbsp;Storage</h4>
</div>
</div>
<div id="w-node-_79ece5a2-49d8-dc2f-c851-03631dc2bea1-3f61e7c1">
<img
src="/images/green/ha-green-exploded-view.png"
loading="lazy"
width="640"
sizes="(max-width: 479px) 87vw, (max-width: 767px) 89vw, 640px"
alt="Exploded view of Home Assistant Green"
srcset="
/images/green/ha-green-exploded-view-p-500.png 500w,
/images/green/ha-green-exploded-view-p-800.png 800w,
/images/green/ha-green-exploded-view.png 961w
"
class="image-product-mobile"
/>
<div
id="w-node-_79ece5a2-49d8-dc2f-c851-03631dc2bea1-3f61e7c1"
>
<div
class="exploded-view-animation animate-in" data-threshold=".9"
>
<img
src="/images/green/ha-green-exploded-view-3.png"
loading="lazy"
sizes="(max-width: 479px) 87vw, (max-width: 767px) 89vw, 640px"
alt=""
srcset="
/images/green/ha-green-exploded-view-3-p-500.png 500w,
/images/green/ha-green-exploded-view-3-p-800.png 800w,
/images/green/ha-green-exploded-view-3.png 961w
"
class="image-product-mobile exploded-part"
/>
<img
src="/images/green/ha-green-exploded-view-2.png"
loading="lazy"
sizes="(max-width: 479px) 87vw, (max-width: 767px) 89vw, 640px"
alt=""
srcset="
/images/green/ha-green-exploded-view-2-p-500.png 500w,
/images/green/ha-green-exploded-view-2-p-800.png 800w,
/images/green/ha-green-exploded-view-2.png 961w
"
class="image-product-mobile exploded-part"
style="top: 22%"
/>
<img
src="/images/green/ha-green-exploded-view-1.png"
loading="lazy"
sizes="(max-width: 479px) 87vw, (max-width: 767px) 89vw, 640px"
alt=""
srcset="
/images/green/ha-green-exploded-view-1-p-500.png 500w,
/images/green/ha-green-exploded-view-1-p-800.png 800w,
/images/green/ha-green-exploded-view-1.png 961w
"
class="image-product-mobile exploded-part"
style="top: 44%"
/>
<img
src="/images/green/ha-green-exploded-view.png"
loading="lazy"
sizes="(max-width: 479px) 87vw, (max-width: 767px) 89vw, 640px"
alt="Exploded view of Home Assistant Green"
srcset="
/images/green/ha-green-exploded-view-p-500.png 500w,
/images/green/ha-green-exploded-view-p-800.png 800w,
/images/green/ha-green-exploded-view.png 961w
"
class="image-product-mobile exploded-view-rendered"
style="opacity: 0;"
/>
</div>
</div>
<div
id="w-node-_79ece5a2-49d8-dc2f-c851-03631dc2bea3-3f61e7c1"

View File

@ -1,8 +1,9 @@
let observer;
function createObserver(elements) {
let observer;
let options = {
threshold: .3,
threshold: [.3, .9],
};
observer = new IntersectionObserver(handleIntersect, options);
@ -13,7 +14,8 @@ function createObserver(elements) {
function handleIntersect(entries, _observer) {
entries.forEach((entry) => {
if (entry.intersectionRatio > 0) {
const threshold = entry.target.dataset.threshold || 0;
if (entry.intersectionRatio >= Number(threshold)) {
entry.target.classList.add("show");
} else {
entry.target.classList.remove("show");
@ -115,4 +117,14 @@ mobileMenuLinks.forEach((link) =>
mobileMenu.classList.remove("open");
menuMobileBtn.classList.remove("open");
})
);
);
const rendering = document.querySelector(".exploded-view-rendered");
rendering.addEventListener("animationend", () => {
rendering.style.opacity = 1;
observer.unobserve(rendering.parentElement);
rendering.parentElement.classList.add("show");
document.querySelectorAll(".exploded-part").forEach((part) => {
part.remove();
});
}, {once: true});

View File

@ -81,6 +81,46 @@ article.page h3 {
}
}
.exploded-view-animation {
position: relative;
max-width: 640px;
margin: auto;
}
.exploded-view-animation > .exploded-part {
transition: top 0.5s ease-out;
position: absolute;
}
.exploded-view-animation.show > .exploded-part {
top: 0 !important;
}
.exploded-view-animation.show > .exploded-view-rendered {
animation: fade-in 1s ease-out;
animation-delay: 0.5s;
}
.exploded-view-animation.show > .exploded-part {
animation: fade-in 0.5s ease-out;
animation-direction: reverse;
animation-delay: 1s;
}
.exploded-view-rendered {
position: relative;
z-index: 10;
}
@keyframes fade-in {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.main-spin {
animation: rotation 30s infinite linear;
will-change: transform;

Binary file not shown.

After

Width:  |  Height:  |  Size: 153 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 358 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 460 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 92 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 206 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 246 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 84 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 195 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 205 KiB