+
+
+ 
+ 
+ 
+
+
+
+
+
+ {
- 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");
})
-);
\ No newline at end of file
+);
+
+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});
\ No newline at end of file
diff --git a/source/green/styles.css b/source/green/styles.css
index 485696947a6..88209b31d8a 100644
--- a/source/green/styles.css
+++ b/source/green/styles.css
@@ -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;
diff --git a/source/images/green/ha-green-exploded-view-1-p-500.png b/source/images/green/ha-green-exploded-view-1-p-500.png
new file mode 100644
index 00000000000..f056187f3c4
Binary files /dev/null and b/source/images/green/ha-green-exploded-view-1-p-500.png differ
diff --git a/source/images/green/ha-green-exploded-view-1-p-800.png b/source/images/green/ha-green-exploded-view-1-p-800.png
new file mode 100644
index 00000000000..f9f8d3b0a41
Binary files /dev/null and b/source/images/green/ha-green-exploded-view-1-p-800.png differ
diff --git a/source/images/green/ha-green-exploded-view-1.png b/source/images/green/ha-green-exploded-view-1.png
new file mode 100644
index 00000000000..e9a4a97fe9c
Binary files /dev/null and b/source/images/green/ha-green-exploded-view-1.png differ
diff --git a/source/images/green/ha-green-exploded-view-2-p-500.png b/source/images/green/ha-green-exploded-view-2-p-500.png
new file mode 100644
index 00000000000..c92d6c4a8c0
Binary files /dev/null and b/source/images/green/ha-green-exploded-view-2-p-500.png differ
diff --git a/source/images/green/ha-green-exploded-view-2-p-800.png b/source/images/green/ha-green-exploded-view-2-p-800.png
new file mode 100644
index 00000000000..6c2d4b9b496
Binary files /dev/null and b/source/images/green/ha-green-exploded-view-2-p-800.png differ
diff --git a/source/images/green/ha-green-exploded-view-2.png b/source/images/green/ha-green-exploded-view-2.png
new file mode 100644
index 00000000000..b7f1333cd38
Binary files /dev/null and b/source/images/green/ha-green-exploded-view-2.png differ
diff --git a/source/images/green/ha-green-exploded-view-3-p-500.png b/source/images/green/ha-green-exploded-view-3-p-500.png
new file mode 100644
index 00000000000..6f5e6c24f42
Binary files /dev/null and b/source/images/green/ha-green-exploded-view-3-p-500.png differ
diff --git a/source/images/green/ha-green-exploded-view-3-p-800.png b/source/images/green/ha-green-exploded-view-3-p-800.png
new file mode 100644
index 00000000000..f213aefb4d3
Binary files /dev/null and b/source/images/green/ha-green-exploded-view-3-p-800.png differ
diff --git a/source/images/green/ha-green-exploded-view-3.png b/source/images/green/ha-green-exploded-view-3.png
new file mode 100644
index 00000000000..691154daa6c
Binary files /dev/null and b/source/images/green/ha-green-exploded-view-3.png differ