Animate green exploded view (#28973)
@ -1069,20 +1069,64 @@ frontpage_image: /images/frontpage/green-frontpage.png
|
||||
<h4 class="heading-small">eMMC 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"
|
||||
|
@ -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});
|
@ -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;
|
||||
|
BIN
source/images/green/ha-green-exploded-view-1-p-500.png
Normal file
After Width: | Height: | Size: 153 KiB |
BIN
source/images/green/ha-green-exploded-view-1-p-800.png
Normal file
After Width: | Height: | Size: 358 KiB |
BIN
source/images/green/ha-green-exploded-view-1.png
Normal file
After Width: | Height: | Size: 460 KiB |
BIN
source/images/green/ha-green-exploded-view-2-p-500.png
Normal file
After Width: | Height: | Size: 92 KiB |
BIN
source/images/green/ha-green-exploded-view-2-p-800.png
Normal file
After Width: | Height: | Size: 206 KiB |
BIN
source/images/green/ha-green-exploded-view-2.png
Normal file
After Width: | Height: | Size: 246 KiB |
BIN
source/images/green/ha-green-exploded-view-3-p-500.png
Normal file
After Width: | Height: | Size: 84 KiB |
BIN
source/images/green/ha-green-exploded-view-3-p-800.png
Normal file
After Width: | Height: | Size: 195 KiB |
BIN
source/images/green/ha-green-exploded-view-3.png
Normal file
After Width: | Height: | Size: 205 KiB |