Something went wrong. Try again.
[READ-ONLY] Mirror of https://github.com/jhroemer/jhroemer.github.io. My personal website jensroemer.com
Something went wrong. Try again.
2.2 kB · 109 lines
Astro
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110---
---
<script> const checkbox = document.querySelector("#explode-checkbox");
checkbox?.addEventListener("change", ({ target }) => { const outer = document.querySelector(".outer"); if (target instanceof HTMLInputElement && target?.checked) { outer?.classList.add("explode"); } else { outer?.classList.remove("explode"); } });</script>
<style> .container { display: flex; align-items: center; justify-content: center; gap: 2rem; padding: 4rem 2rem; }
.checkbox-container { display: flex; align-items: center; gap: 2px; }
.outer { /* Basic styling */ background-color: rgb(0, 0, 0); width: 10em; height: 10em; border-radius: 8px;
/* 3D exploding styling */ transition: transform 1.2s cubic-bezier(0.15, 0.75, 0.27, 0.89); transform-style: preserve-3d;
&.explode { transform: rotateX(60deg) rotateZ(25deg);
&:after { opacity: 1; }
.inner { transform: translate3d(0, 0, -100px); transition-delay: 1.4s; &:after { opacity: 1; } } }
&:not(.explode) { transition-delay: 1.4s; }
/* Annotation */ &:after { transition: opacity 2s 1s cubic-bezier(0.15, 0.75, 0.27, 0.89); opacity: 0; position: absolute; content: "Outer"; right: -30%; top: 40%; } }
.inner { inset: -5px; border-radius: 12px; background: linear-gradient( 60deg, rgb(26, 231, 177), rgb(255, 214, 221), rgb(242, 140, 39) ); position: absolute; transform: translate3d(0, 0, -1px); transition: transform 1.5s cubic-bezier(0.2, 0.71, 0.16, 0.92);
/* Annotation */ &:after { transition: opacity 2s 1s cubic-bezier(0.15, 0.75, 0.27, 0.89); opacity: 0; position: absolute; content: "Inner"; right: -30%; top: 40%; } }</style>
<div class="container"> <div class="checkbox-container"> <input type="checkbox" id="explode-checkbox" /> <label for="explode-checkbox">Explode</label><br /> </div>
<div class="outer"> <div class="inner"></div> </div></div>