From b30e6a4a27a5fcc5bfd9e0e3c2a6792a6d93ebc6 Mon Sep 17 00:00:00 2001 From: Orestis Herodotou Date: Tue, 15 Oct 2024 04:57:11 -0700 Subject: [PATCH] feat(docs): Cube Hover effects & ice movement (#251) * Add animation to icecubes * hover effects for cube --- docs/docs/assets/hero/hero-bottom-dark.svg | 82 +-- docs/docs/assets/hero/hero-bottom.svg | 80 +-- docs/docs/assets/hero/ice-1-dark.svg | 79 +++ docs/docs/assets/hero/ice-1.svg | 76 +++ docs/docs/stylesheets/homepage.css | 151 ++++- docs/overrides/home.html | 9 +- docs/overrides/partials/cube.html | 700 +++++++++++++++++++-- 7 files changed, 974 insertions(+), 203 deletions(-) create mode 100644 docs/docs/assets/hero/ice-1-dark.svg create mode 100644 docs/docs/assets/hero/ice-1.svg diff --git a/docs/docs/assets/hero/hero-bottom-dark.svg b/docs/docs/assets/hero/hero-bottom-dark.svg index 9c61b5dd..862f7fde 100644 --- a/docs/docs/assets/hero/hero-bottom-dark.svg +++ b/docs/docs/assets/hero/hero-bottom-dark.svg @@ -15,7 +15,7 @@ xmlns:svg="http://www.w3.org/2000/svg"> - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + diff --git a/docs/docs/assets/hero/ice-1.svg b/docs/docs/assets/hero/ice-1.svg new file mode 100644 index 00000000..c35b6e2b --- /dev/null +++ b/docs/docs/assets/hero/ice-1.svg @@ -0,0 +1,76 @@ + + + + + + + + + + + + + + + + + + diff --git a/docs/docs/stylesheets/homepage.css b/docs/docs/stylesheets/homepage.css index 8699079c..009f938b 100644 --- a/docs/docs/stylesheets/homepage.css +++ b/docs/docs/stylesheets/homepage.css @@ -9,6 +9,8 @@ .md-main__inner { margin: 0; max-width: 100%; + position: relative; + z-index:1; } /* Hide breadcrumb in content */ @@ -101,14 +103,14 @@ h3.hero-subtitle { justify-content: center; display: flex; align-items: center; - gap: 10px; + gap: 20px; } .by-line { display: flex; align-items: center; - gap: 10px; + gap: 20px; text-shadow: 3px 3px 0px rgba(0,0,0,0.2); } @@ -117,29 +119,140 @@ h3.hero-subtitle { display:block; padding-top:15px; } + +@keyframes heart-beat { + 0% { transform: scale(1); } + 50% { transform: scale(1.5); } + 100% { transform: scale(1); } +} + .heart-image { width: 40px; min-width: 40px; height: auto; + + animation-name: heart-beat; + animation-timeline: scroll(root); + animation-timing-function: ease-in; + animation-fill-mode: forwards; + animation-range: entry 10% cover 50%; } .earthmover-wordmark { width: 260px; } + /* ice */ .ice-container { height: var(--ice-height); width: 100%; - overflow:hidden; - background-image: url('../assets/hero/hero-bottom.svg'); - background-repeat: no-repeat; - background-position: bottom center; + margin: 0 auto; + max-width: 1745px; + overflow: hidden; + position:relative; + + -ms-overflow-style: none; /* IE and Edge */ + scrollbar-width: none; /* Firefox */ +} + +.ice-container::-webkit-scrollbar { + display:none; +} + +.ice-image { + width: 1745px; + position:relative; +} + +.ice-shore { + height: var(--ice-height); + width: 1745px; + margin:0 auto; + background-image: url('../assets/hero/hero-bottom.svg'); + background-repeat: no-repeat; + background-position: bottom center; + z-index:1; + position:relative; +} + +.ice-cube { + height: 182px; + width: 140px; + background-image: url('../assets/hero/ice-1.svg'); + background-repeat: no-repeat; + background-position: top left; + position: absolute; + + z-index:0; + + animation-name: ice-parallax; + animation-timeline: scroll(root); + animation-timing-function: ease-in; + animation-fill-mode: forwards; +} + +@keyframes ice-parallax-1 { + from { transform: translateY(0px); } + to { transform: translateY(-220px); } +} + +#ice-1 { + animation-name: ice-parallax-1; + animation-range: entry 20% cover 60%; + + bottom:-29px; + right:421px; +} + +@keyframes ice-parallax-2 { + from { transform: translateY(0px) scale(1.5); } + to { transform: translateY(-200px) scale(1.5); } } +#ice-2 { + transform: scale(1.5); + animation-name: ice-parallax-2; + animation-range: entry 30% cover 70%; + + + bottom:-45px; + left:350px; +} + +@keyframes ice-parallax-3 { + from { transform: translateY(0px) scale(0.8); } + to { transform: translateY(-260px) scale(0.8); } +} + +#ice-3 { + transform: scale(0.8); + animation-name: ice-parallax-3; + animation-range: entry 0% cover 40%; + + bottom:-36px; + left:640px; +} + +/* Dark theme */ +[data-md-color-scheme="slate"]{ + .ice-shore { + background-image: url('../assets/hero/hero-bottom-dark.svg'); + } + .ice-cube { + background-image: url('../assets/hero/ice-1-dark.svg'); + + } +} + + /* Mobile */ @media screen and (max-width: 60em) { + .ice-image { + transform:translateX(-56%); + } + #hero-image { min-width: 200px; } @@ -174,12 +287,6 @@ h3.hero-subtitle { } } -/* Dark theme */ -[data-md-color-scheme="slate"]{ - .ice-container { - background-image: url('../assets/hero/hero-bottom-dark.svg'); - } -} /* Logo */ @@ -235,4 +342,22 @@ h3.hero-subtitle { #ripple-1-back, #ripple-2-back { transform-origin: center top; -} \ No newline at end of file +} + +.no-pointer { + pointer-events: none; +} + + +.small-cube path { + transition: filter 4s ease-in-out; + transform-box: fill-box; + transform-origin: center center; +} + + +.small-cube:hover path { + filter: hue-rotate(620deg) saturate(2000%) invert(70%); + transition: all 0s ease-in-out; + +} diff --git a/docs/overrides/home.html b/docs/overrides/home.html index 72dc5b1b..d6b2e83c 100644 --- a/docs/overrides/home.html +++ b/docs/overrides/home.html @@ -52,7 +52,14 @@

{{ config.site_description }}

-
+
+
+
+
+
+
+
+
{% endblock %} diff --git a/docs/overrides/partials/cube.html b/docs/overrides/partials/cube.html index 528922e2..b2756cc9 100644 --- a/docs/overrides/partials/cube.html +++ b/docs/overrides/partials/cube.html @@ -21,14 +21,14 @@ inkscape:deskcolor="#d1d1d1" inkscape:document-units="px" inkscape:zoom="10.295388" - inkscape:cx="64.68916" + inkscape:cx="64.640594" inkscape:cy="88.923312" inkscape:window-width="2560" inkscape:window-height="2091" inkscape:window-x="2240" inkscape:window-y="32" inkscape:window-maximized="0" - inkscape:current-layer="cube-logo" + inkscape:current-layer="g110-0" showgrid="true"> + sodipodi:nodetypes="ccccc" + class="no-pointer" /> + sodipodi:nodetypes="ccccc" + class="no-pointer" /> + sodipodi:nodetypes="ccccc" + class="no-pointer" /> + inkscape:label="water-top-back" + class="no-pointer" /> + inkscape:label="ripple-2-front" + class="no-pointer" /> + inkscape:label="ripple-1-front" + class="no-pointer" /> + transform="translate(27.772249,29.348577)" + style="display:inline"> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + transform="translate(17.584829,21.826753)" + class="small-cube"> + transform="translate(17.584829,21.826753)" + class="small-cube"> + transform="translate(17.584829,21.826753)" + class="small-cube"> + transform="translate(17.584829,21.826753)" + class="small-cube"> + transform="translate(17.584829,21.826753)" + class="small-cube"> + transform="translate(17.584829,21.826753)" + class="small-cube"> + transform="translate(17.584829,21.826753)" + class="small-cube"> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + transform="translate(17.584829,21.826753)" + class="small-cube"> + transform="translate(17.584829,21.826753)" + class="small-cube"> + transform="translate(17.584829,21.826753)" + class="small-cube"> + transform="translate(17.584829,21.826753)" + class="small-cube"> + transform="translate(17.584829,21.826753)" + class="small-cube"> + transform="translate(17.584829,21.826753)" + class="small-cube"> + transform="translate(17.584829,21.826753)" + class="small-cube"> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + transform="translate(17.584829,21.826753)" + class="small-cube"> + transform="translate(17.584829,21.826753)" + class="small-cube"> + transform="translate(17.584829,21.826753)" + class="small-cube"> + transform="translate(17.584829,21.826753)" + class="small-cube"> + transform="translate(17.584829,21.826753)" + class="small-cube"> + transform="translate(17.584829,21.826753)" + class="small-cube"> + transform="translate(17.584829,21.826753)" + class="small-cube"> + inkscape:label="top-ice" + class="no-pointer" + style="display:inline"> + transform="translate(27.772249,27.348574)" + class="no-pointer"> + inkscape:label="water-top-front" + class="no-pointer" /> + sodipodi:nodetypes="ccc" + class="no-pointer" /> + sodipodi:nodetypes="ccc" + class="no-pointer" />