Render bubbles without inline SVG, try a more fluid animation
This commit is contained in:
Jason Zimdars
@@ -29,14 +29,16 @@
|
||||
75% { transform: translateX(1rem); }
|
||||
}
|
||||
|
||||
@keyframes shimmy {
|
||||
0% { transform: translateX(-0.5rem); }
|
||||
25% { transform: translateX(0.5rem); }
|
||||
50% { transform: translateX(-0.2rem); }
|
||||
75% { transform: translateX(0.2rem); }
|
||||
}
|
||||
|
||||
@keyframes appear-then-fade {
|
||||
0%,100% { opacity: 0; }
|
||||
5%,60% { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes wobble {
|
||||
15% { border-radius: 66% 34% 72% 28% / 39% 63% 37% 61%; }
|
||||
25% { border-radius: 55% 47% 62% 40% / 58% 50% 52% 44%; }
|
||||
33% { border-radius: 46% 54% 61% 39% / 50% 51% 49% 50%; }
|
||||
50% { border-radius: 54% 46% 61% 39% / 57% 49% 51% 43%; }
|
||||
75% { border-radius: 53% 45% 60% 38% / 56% 48% 50% 42%; }
|
||||
100% { transform: rotate(180deg); }
|
||||
}
|
||||
|
||||
@@ -5,6 +5,7 @@
|
||||
--bubble-size-four: 20cqi;
|
||||
--bubble-size-five: 22cqi;
|
||||
--bubble-shift: 10deg;
|
||||
--bubble-shape: 54% 46% 61% 39% / 57% 49% 51% 43%;
|
||||
}
|
||||
|
||||
.windshield {
|
||||
@@ -30,7 +31,7 @@
|
||||
max-inline-size: 100%;
|
||||
place-items: center;
|
||||
position: relative;
|
||||
transition: all 0.2s ease;
|
||||
transition: 0.2s ease;
|
||||
|
||||
&:nth-child(1) { order: 5; }
|
||||
&:nth-child(2) { order: 3; }
|
||||
@@ -43,19 +44,6 @@
|
||||
&:nth-child(9) { order: 3; }
|
||||
&:nth-child(10) { order: 7; }
|
||||
|
||||
.windshield & {
|
||||
animation: float-up-left 400ms normal forwards ease-out;
|
||||
|
||||
&:nth-of-type(2n+1) {
|
||||
animation-delay: 50ms;
|
||||
animation: float-down-right 400ms normal forwards ease-out;
|
||||
}
|
||||
|
||||
&:nth-of-type(3n+1) {
|
||||
animation-delay: 150ms;
|
||||
}
|
||||
}
|
||||
|
||||
.windshield &:nth-of-type(n+6) {
|
||||
align-self: start;
|
||||
}
|
||||
@@ -64,16 +52,8 @@
|
||||
|
||||
@media (hover: hover) {
|
||||
.windshield &:hover {
|
||||
animation: shimmy 400ms normal forwards ease-out;
|
||||
scale: 1.1;
|
||||
z-index: 999;
|
||||
|
||||
.bubble__svg {
|
||||
transform: rotate(calc(var(--bubble-rotate) + var(--bubble-shift)));
|
||||
}
|
||||
|
||||
.bubble__image {
|
||||
transform: rotate(calc(var(--bubble-rotate) + var(--bubble-shift)));
|
||||
.bubble__shape {
|
||||
animation: wobble 1200ms normal forwards ease-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -92,7 +72,7 @@
|
||||
.bubble__bubble {
|
||||
background-color: var(--color-bg);
|
||||
border: max(3px, 0.2em) solid var(--bubble-color);
|
||||
border-radius: 50%;
|
||||
border-radius: var(--bubble-shape);
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
|
||||
@@ -335,19 +315,18 @@
|
||||
}
|
||||
|
||||
.bubble__image {
|
||||
mask-image: url(blob.svg);
|
||||
mask-position: center;
|
||||
mask-repeat: no-repeat;
|
||||
|
||||
border: none;
|
||||
border-radius: var(--bubble-shape);
|
||||
block-size: 100cqi;
|
||||
inline-size: 100cqi;
|
||||
overflow: clip;
|
||||
pointer-events: none;
|
||||
transform: rotate(var(--bubble-rotate));
|
||||
transition: all 0.2s ease;
|
||||
transform: rotate(var(--bubble-rotate)) scale(0.9);
|
||||
transition: 0.2s ease;
|
||||
|
||||
@media (hover: hover) {
|
||||
.windshield .bubble:hover & {
|
||||
transform: rotate(calc(var(--bubble-rotate) + var(--bubble-shift)));
|
||||
transform: rotate(calc(var(--bubble-rotate) + var(--bubble-shift))) scale(0.9);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -356,6 +335,10 @@
|
||||
inline-size: 100cqi;
|
||||
object-fit: cover;
|
||||
transform: rotate(calc(var(--bubble-rotate) * -1));
|
||||
|
||||
&:is([src=""]) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -375,31 +358,6 @@
|
||||
max-inline-size: 100%;
|
||||
}
|
||||
|
||||
.bubble__svg {
|
||||
fill: color(from var(--bubble-color) srgb r g b / 0.15);
|
||||
pointer-events: none;
|
||||
position: relative;
|
||||
scale: 1.1;
|
||||
stroke: var(--bubble-color);
|
||||
stroke-width: 1.1em;
|
||||
transform: rotate(var(--bubble-rotate));
|
||||
transition: all 200ms ease-out;
|
||||
|
||||
.bubble:has(.bubble__link) & {
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.bubble__perma & {
|
||||
stroke-width: 0.6em;
|
||||
}
|
||||
}
|
||||
|
||||
.bubble__svg--popped {
|
||||
.bubble:has(.bubble__link) & {
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
.bubble__title {
|
||||
-webkit-line-clamp: var(--lines, 5);
|
||||
-webkit-box-orient: vertical;
|
||||
@@ -471,8 +429,9 @@
|
||||
border: 0;
|
||||
border-radius: 0.6em;
|
||||
|
||||
.bubble__svg {
|
||||
transform: rotate(calc(var(--bubble-rotate) + var(--bubble-shift))) scale(1.2);
|
||||
.bubble__shape {
|
||||
animation: wobble 1200ms normal forwards ease-out;
|
||||
transform: rotate(var(--bubble-rotate)) scale(1.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -511,3 +470,29 @@
|
||||
border-radius: 4px;
|
||||
transform: rotate(-35deg) translate(-25%, -50%);
|
||||
}
|
||||
|
||||
.bubble__shape {
|
||||
background-color: var(--bubble-color);
|
||||
block-size: 1.2em;
|
||||
border-radius: var(--bubble-shape);
|
||||
inline-size: 1.2em;
|
||||
pointer-events: none;
|
||||
position: relative;
|
||||
transform: rotate(var(--bubble-rotate));
|
||||
transition: 200ms ease-out;
|
||||
|
||||
.bubble & {
|
||||
background-color: color(from var(--bubble-color) srgb r g b / 0.15);
|
||||
border: 0.2em solid var(--bubble-color);
|
||||
block-size: 100%;
|
||||
inline-size: 100%;
|
||||
}
|
||||
|
||||
.bubble:has(.bubble__link) & {
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.bubble__perma & {
|
||||
stroke-width: 0.6em;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,10 +9,7 @@
|
||||
<% end %>
|
||||
</h1>
|
||||
|
||||
<svg class="bubble__svg" viewBox="0 0 990 990" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="m0 0h990v990h-990z" fill="none" stroke="none" />
|
||||
<path d="m391.65 879.47c-110.52-15.95-212.21-91.86-255.92-191.23-66.78-143.65-41.62-347.61 48.08-481.17 368.33-516.3 1252.97 520.2 451.03 660.78-44.07 8.84-88.98 13.49-133.01 15.68-36.69 2-73.37 1.91-109.99-4.03z"/>
|
||||
</svg>
|
||||
<div class="bubble__shape"></div>
|
||||
|
||||
<%= link_to bucket_bubble_path(bubble.bucket, bubble), class: "bubble__link" do %>
|
||||
<span class="for-screen-reader"><%= bubble.title %></span>
|
||||
|
||||
@@ -1,10 +1,5 @@
|
||||
<li class="flex align-center gap margin-none" style="--bubble-color: <%= bubble.color %>; <%= bubble_rotation(bubble) %>">
|
||||
<div class="bubble">
|
||||
<svg class="bubble__svg" style="fill: <%= bubble.color %>; stroke: <%= bubble.color %>;" viewBox="0 0 990 990" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="m0 0h990v990h-990z" fill="none" stroke="none" />
|
||||
<path d="m391.65 879.47c-110.52-15.95-212.21-91.86-255.92-191.23-66.78-143.65-41.62-347.61 48.08-481.17 368.33-516.3 1252.97 520.2 451.03 660.78-44.07 8.84-88.98 13.49-133.01 15.68-36.69 2-73.37 1.91-109.99-4.03z"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="bubble__shape"></div>
|
||||
|
||||
<%= link_to bucket_bubble_path(bubble.bucket, bubble), class: "bubble__title-link flex align-center gap flex-item-grow min-width" do %>
|
||||
<strong class="bubble__title-text flex--inline gap-half overflow-ellipsis"><%= bubble.title %></strong>
|
||||
|
||||
Reference in New Issue
Block a user