Skip to content

Commit 4e901c7

Browse files
mikedelgaudiomikedelgaudio
authored
[RFC] Add Three Homepage Sections (GoogleChromeLabs#1112)
1 parent b74788e commit 4e901c7

File tree

8 files changed

+285
-27
lines changed

8 files changed

+285
-27
lines changed

‎src/shared/prerendered-app/Intro/SlideOnScroll/index.tsx

+51
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
import { h, Component, RenderableProps } from 'preact';
2+
3+
interface Props {}
4+
interface State {}
5+
6+
export default class SlideOnScroll extends Component<Props, State> {
7+
private observer?: IntersectionObserver;
8+
9+
componentDidMount() {
10+
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
11+
12+
const base = this.base as HTMLElement;
13+
let wasOutOfView = false;
14+
15+
this.observer = new IntersectionObserver(
16+
(entries, observer) => {
17+
for (const entry of entries) {
18+
if (!entry.isIntersecting) {
19+
wasOutOfView = true;
20+
base.style.opacity = '0';
21+
return;
22+
}
23+
24+
// Only transition in if the element was at some point out of view.
25+
if (wasOutOfView) {
26+
base.style.opacity = '';
27+
base.animate(
28+
{ offset: 0, opacity: '0', transform: 'translateY(40px)' },
29+
{ duration: 300, easing: 'ease' },
30+
);
31+
}
32+
observer.unobserve(entry.target);
33+
}
34+
},
35+
{ threshold: 0.2 },
36+
);
37+
38+
this.observer.observe(base);
39+
}
40+
41+
componentWillUnmount() {
42+
// Have to manually disconnect due to memory leaks in browsers.
43+
// One day we'll be able to remove this, and the private property.
44+
// https://twitter.com/jaffathecake/status/1405437361643790337
45+
this.observer!.disconnect();
46+
}
47+
48+
render({ children }: RenderableProps<Props>) {
49+
return <div>{children}</div>;
50+
}
51+
}

‎src/shared/prerendered-app/Intro/imgs/info-content/secure.svg

+1
Loading

‎src/shared/prerendered-app/Intro/imgs/info-content/simple.svg

+1
Loading

‎src/shared/prerendered-app/Intro/imgs/info-content/small.svg

+1
Loading

‎src/shared/prerendered-app/Intro/index.tsx

+117-25
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,16 @@ import deviceScreen from 'url:./imgs/demos/demo-device-screen.png';
1010
import largePhotoIcon from 'url:./imgs/demos/icon-demo-large-photo.jpg';
1111
import artworkIcon from 'url:./imgs/demos/icon-demo-artwork.jpg';
1212
import deviceScreenIcon from 'url:./imgs/demos/icon-demo-device-screen.jpg';
13+
import smallSectionAsset from 'url:./imgs/info-content/small.svg';
14+
import simpleSectionAsset from 'url:./imgs/info-content/simple.svg';
15+
import secureSectionAsset from 'url:./imgs/info-content/secure.svg';
1316
import logoIcon from 'url:./imgs/demos/icon-demo-logo.png';
1417
import logoWithText from 'url:./imgs/logo-with-text.svg';
1518
import * as style from './style.css';
1619
import type SnackBarElement from 'shared/custom-els/snack-bar';
1720
import 'shared/custom-els/snack-bar';
1821
import { startBlobs } from './blob-anim/meta';
22+
import SlideOnScroll from './SlideOnScroll';
1923

2024
const demos = [
2125
{
@@ -336,37 +340,125 @@ export default class Intro extends Component<Props, State> {
336340
</ul>
337341
</div>
338342
</div>
339-
<div class={style.footer}>
343+
344+
<div class={style.bottomWave}>
340345
<svg viewBox="0 0 1920 79" class={style.topWave}>
341346
<path
342347
d="M0 59l64-11c64-11 192-34 320-43s256-5 384 4 256 23 384 34 256 21 384 14 256-30 320-41l64-11v94H0z"
343-
class={style.footerWave}
348+
class={style.infoWave}
344349
/>
345350
</svg>
346-
<div class={style.contentPadding}>
347-
<footer class={style.footerItems}>
348-
<a
349-
class={style.footerLink}
350-
href="https://github.com/GoogleChromeLabs/squoosh/blob/dev/README.md#privacy"
351-
>
352-
Privacy
353-
</a>
354-
<a
355-
class={style.footerLink}
356-
href="https://github.com/GoogleChromeLabs/squoosh/tree/dev/cli"
357-
>
358-
Squoosh CLI
359-
</a>
360-
<a
361-
class={style.footerLinkWithLogo}
362-
href="https://github.com/GoogleChromeLabs/squoosh"
363-
>
364-
<img src={githubLogo} alt="" width="10" height="10" />
365-
Source on Github
366-
</a>
367-
</footer>
368-
</div>
369351
</div>
352+
353+
<section class={style.info}>
354+
<div class={style.infoContainer}>
355+
<SlideOnScroll>
356+
<div class={style.infoContent}>
357+
<div class={style.infoTextWrapper}>
358+
<h2 class={style.infoTitle}>Small</h2>
359+
<p class={style.infoCaption}>
360+
Smaller images mean faster load times. Squoosh can reduce
361+
file size and maintain high quality.
362+
</p>
363+
</div>
364+
<div class={style.infoImgWrapper}>
365+
<img
366+
class={style.infoImg}
367+
src={smallSectionAsset}
368+
alt="silhouette of a large 1.4 megabyte image shrunk into a smaller 80 kilobyte image"
369+
width="536"
370+
height="522"
371+
/>
372+
</div>
373+
</div>
374+
</SlideOnScroll>
375+
</div>
376+
</section>
377+
378+
<section class={style.info}>
379+
<div class={style.infoContainer}>
380+
<SlideOnScroll>
381+
<div class={style.infoContent}>
382+
<div class={style.infoTextWrapper}>
383+
<h2 class={style.infoTitle}>Simple</h2>
384+
<p class={style.infoCaption}>
385+
Open your image, inspect the differences, then save
386+
instantly. Feeling adventurous? Adjust the settings for even
387+
smaller files.
388+
</p>
389+
</div>
390+
<div class={style.infoImgWrapper}>
391+
<img
392+
class={style.infoImg}
393+
src={simpleSectionAsset}
394+
alt="grid of multiple shrunk images displaying various options"
395+
width="538"
396+
height="384"
397+
/>
398+
</div>
399+
</div>
400+
</SlideOnScroll>
401+
</div>
402+
</section>
403+
404+
<section class={style.info}>
405+
<div class={style.infoContainer}>
406+
<SlideOnScroll>
407+
<div class={style.infoContent}>
408+
<div class={style.infoTextWrapper}>
409+
<h2 class={style.infoTitle}>Secure</h2>
410+
<p class={style.infoCaption}>
411+
Worried about privacy? Images never leave your device since
412+
Squoosh does all the work locally.
413+
</p>
414+
</div>
415+
<div class={style.infoImgWrapper}>
416+
<img
417+
class={style.infoImg}
418+
src={secureSectionAsset}
419+
alt="silhouette of a cloud with a 'no' symbol on top"
420+
width="498"
421+
height="333"
422+
/>
423+
</div>
424+
</div>
425+
</SlideOnScroll>
426+
</div>
427+
</section>
428+
429+
<footer class={style.footer}>
430+
<div class={style.footerContainer}>
431+
<svg viewBox="0 0 1920 79" class={style.topWave}>
432+
<path
433+
d="M0 59l64-11c64-11 192-34 320-43s256-5 384 4 256 23 384 34 256 21 384 14 256-30 320-41l64-11v94H0z"
434+
class={style.footerWave}
435+
/>
436+
</svg>
437+
<div class={style.footerPadding}>
438+
<footer class={style.footerItems}>
439+
<a
440+
class={style.footerLink}
441+
href="https://github.com/GoogleChromeLabs/squoosh/blob/dev/README.md#privacy"
442+
>
443+
Privacy
444+
</a>
445+
<a
446+
class={style.footerLink}
447+
href="https://github.com/GoogleChromeLabs/squoosh/tree/dev/cli"
448+
>
449+
Squoosh CLI
450+
</a>
451+
<a
452+
class={style.footerLinkWithLogo}
453+
href="https://github.com/GoogleChromeLabs/squoosh"
454+
>
455+
<img src={githubLogo} alt="" width="10" height="10" />
456+
Source on Github
457+
</a>
458+
</footer>
459+
</div>
460+
</div>
461+
</footer>
370462
{beforeInstallEvent && (
371463
<button class={style.installBtn} onClick={this.onInstallClick}>
372464
Install

0 commit comments

Comments
 (0)