Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix Safari CPU on homepage #75

Draft
wants to merge 3 commits into
base: master
Choose a base branch
from
Draft

Fix Safari CPU on homepage #75

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
28c3b9b
Agh demo-page-loadings may have to be CSS-driven
tigt Jun 24, 2022
fa29d95
Merge branch 'master' into fix-animation-cpu
tigt Jul 12, 2022
adc269f
Merge branch 'master' into fix-animation-cpu
tigt Aug 23, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
119 changes: 74 additions & 45 deletions src/pages/index/components/home-demo-page/index.marko
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,11 @@ style {
position:absolute;
top:0;
left:0;
right:0;
height:0.5em;
background: linear-gradient(90deg, #25dbd2, #33d5f4, #039fea);
transform-origin: 0 0;
will-change: transform;
}
.demo-page-header {
display: flex;
Expand All @@ -38,6 +40,7 @@ style {
.demo-page-logo {
font-size:2em;
font-weight: 800;
background: #fff;
}
.demo-page-cart {
background: #1d1924;
Expand All @@ -52,8 +55,22 @@ style {
.demo-page-image {
flex: 1;
}
.demo-page-image-lowres {
background:
radial-gradient(closest-side circle at 35% 40%, rgba(0,0,0,0.3), rgba(0,0,0,0.15) 5%, rgba(0,0,0,0) 50%),
radial-gradient(50% 25% ellipse at 45% 45%, rgba(0,0,0,0.21), rgba(0,0,0,0) 70%);
/* opacity: 0.3; */
position: absolute;
width: 50%;
}
.demo-page-image-lowres::before {
content: "";
display: block;
padding-top: 100%;
}
.demo-page-description {
flex: 1;
background: #fff;
}
.demo-page-description-title {
font-size: 1.2em;
Expand All @@ -71,6 +88,7 @@ style {
padding:0.5em 1em;
display: inline-block;
margin:0.25em 0;
z-index: 1;
}
.demo-page-description-text {
font-size: 0.8em;
Expand All @@ -89,21 +107,44 @@ style {
padding:1em;
background:#f4f2f4;
}
.demo-page-footer > div {
.demo-page-footlink {
font-size: 0.8em;
z-index: 1;
}
.demo-page-loading {
opacity: 0;
}
.demo-page-lowres {
filter: blur(1em) grayscale(0.6);
opacity: 0.3;
}
.demo-page-hydrate-partial .demo-page-hydrated,
.demo-page-hydrate-all div {
animation-name: pulse-red;
animation-iteration-count: infinite;
animation-duration: 2s;
.demo-page-hydrate-all .demo-page-delay {
position: relative;
}
.demo-page-hydrate-partial .demo-page-hydrated::before,
.demo-page-hydrate-all .demo-page-delay::before {
content: "";
position: absolute;
top: -15px; right: -15px; bottom: -15px; left: -15px;
border: 15px solid rgba(255, 50, 82, 0.7);
z-index: -1;
will-change: transform;
}
@media (prefers-reduced-motion: no-preference) {
.demo-page-hydrate-partial .demo-page-hydrated::before,
.demo-page-hydrate-all .demo-page-delay::before {
animation: pulse 2s infinite;
animation-delay: inherit;
border-width: 52px;
top: -30px; right: -30px; bottom: -30px; left: -30px;
opacity: 0;
}
}
@keyframes pulse {
50% {
opacity: 0.8;
}
100% {
opacity: 0;
transform: scale(1.1);
}
}
.demo-page-delay-1 {
animation-delay: 100ms;
Expand Down Expand Up @@ -157,24 +198,6 @@ style {
animation-delay: 1700ms;
}

@media (prefers-reduced-motion) {
.demo-page-hydrate-partial .demo-page-hydrated,
.demo-page-hydrate-all div {
animation: none;
box-shadow: 0 0 0 15px rgba(255, 50, 82, 0.7);
}
}

@keyframes pulse-red {
0% {
box-shadow: 0 0 0 0 rgba(255, 50, 82, 0.9);
}

100% {
box-shadow: 0 0 0px 90px rgba(255, 50, 82, 0);
}
}

.demo-page-marko,
.demo-page-other {
position: absolute;
Expand Down Expand Up @@ -214,50 +237,56 @@ style {
}
}

$ function delay (n) {
return `demo-page-delay demo-page-delay-${n}`;
}

$ const progress = input.buffered ? Math.floor(input.progress / 0.9) : input.progress / 0.9;

<div.demo-page-wrapper class=input.class role="img" aria-label=input.label>
<div.demo-page-container aria-hidden="true" class={ "demo-page-hydrate-all":input.hydrateAll, "demo-page-hydrate-partial":input.hydratePartial }>
<if(input.progress >= 0)>
<div.demo-page-progress style={ transform: `scaleX(${Math.min(1, input.progress * (input.buffered ? 1 : 1/0.9))})` }/>
</if>
<div.demo-page-header.demo-page-delay-1 class={ "demo-page-loading": progress < 0.1 }>
<div.demo-page-link.demo-page-delay-2>All Products</div>
<div.demo-page-logo.demo-page-delay-3>BuyItNow</div>
<div.demo-page-cart.demo-page-delay-4.demo-page-hydrated>Cart (0)</div>
<div.demo-page-header.${delay(1)} class={ "demo-page-loading": progress < 0.1 }>
<div.demo-page-link.${delay(2)}>All Products</div>
<div.demo-page-logo.${delay(3)}>BuyItNow</div>
<div.demo-page-cart.${delay(4)}.demo-page-hydrated>Cart (0)</div>
</div>
<div.demo-page-product.demo-page-delay-5 class={ "demo-page-loading": progress < 0.4 }>
<img.demo-page-image class={ "demo-page-lowres": progress < 0.6 || (input.buffered && input.progress < 1) } src="./product.png" alt=""/>
<div.demo-page-description.demo-page-delay-6>
<div.demo-page-product.${delay(5)} class={ "demo-page-loading": progress < 0.4 }>
$ const hideLowRes = progress < 0.6 || (input.buffered && input.progress < 1);
<div.demo-page-image.demo-page-image-lowres class={ "demo-page-loading": !hideLowRes }/>
<img.demo-page-image class={ "demo-page-loading": hideLowRes } src="./product.png" alt=""/>
<div.demo-page-description.${delay(6)}>
<span.demo-page-description-title>Google Home - $79</span>
<div.demo-page-description-button.demo-page-delay-7.demo-page-hydrated>Add to Cart</div>
<div.demo-page-description-button.${delay(7)}.demo-page-hydrated>Add to Cart</div>
<span.demo-page-description-text>Hands-free help around the house. Google Home is a smart speaker with the Google Assistant built in. So whenever you need help, it's by your side</span>
</div>
</div>
<div.demo-page-review.demo-page-delay-8 class={ "demo-page-loading": progress < 0.8 }>
<div.demo-page-rating.demo-page-delay-9>
<div.demo-page-review.${delay(8)} class={ "demo-page-loading": progress < 0.8 }>
<div.demo-page-rating.${delay(9)}>
★★★★☆
</div>
<span.demo-page-description-text>
<strong>Cool gadget</strong>
Google has created a nice device that provides music and information by voice control. The microphone is very good and will usually pick up commands from across the room. The speakers sound surprisingly good for such a small device. I wish it had tone control though.
</span>
</div>
<div.demo-page-review.demo-page-delay-10 class={ "demo-page-loading": progress < 1 }>
<div.demo-page-rating.demo-page-delay-11>
<div.demo-page-review.${delay(10)} class={ "demo-page-loading": progress < 1 }>
<div.demo-page-rating.${delay(11)}>
★★★★★
</div>
<span.demo-page-description-text>
<strong>Incredible sound profile!</strong>
Easy setup, great sound for any room size. Adjustable bass and treble. Currently have two paired up for better whole house sound.
</span>
</div>
<div.demo-page-footer.demo-page-delay-12 class={ "demo-page-loading": progress < 0.1 }>
<div.demo-page-delay-13>About</div>
<div.demo-page-delay-14>Security</div>
<div.demo-page-delay-15>Policies</div>
<div.demo-page-delay-16>Help</div>
<div.demo-page-delay-17>Sitemap</div>
<div.demo-page-footer.${delay(12)} class={ "demo-page-loading": progress < 0.1 }>
<div.demo-page-footlink.${delay(13)}>About</div>
<div.demo-page-footlink.${delay(14)}>Security</div>
<div.demo-page-footlink.${delay(15)}>Policies</div>
<div.demo-page-footlink.${delay(16)}>Help</div>
<div.demo-page-footlink.${delay(17)}>Sitemap</div>
</div>
</div>
<if(input.buffered || input.hydrateAll)>
Expand Down