This is an automated email from the ASF dual-hosted git repository.
tison pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/pulsar-site.git
The following commit(s) were added to refs/heads/main by this push:
new 98eef6fa8c3 HomePage - Make the blurry part not be cut, but slowly
become blurry as user scrolls to make it a smooth transition. (#608)
98eef6fa8c3 is described below
commit 98eef6fa8c3087e20914b6c87fb6d1594db17f30
Author: Kiryl Valkovich <[email protected]>
AuthorDate: Tue Jun 13 03:46:30 2023 +0300
HomePage - Make the blurry part not be cut, but slowly become blurry as
user scrolls to make it a smooth transition. (#608)
* Make background slowly become blurry as we scroll
* Make background slowly become blurry as we scroll
---
src/components/pages/HomePage/HomePage.tsx | 12 ++++++++++-
.../pages/HomePage/ShortInfo/Parallax/Parallax.tsx | 24 ++++------------------
.../pages/HomePage/ShortInfo/ShortInfo.module.css | 11 ----------
.../pages/HomePage/ShortInfo/ShortInfo.tsx | 2 --
.../pages/HomePage/useScrollPosition.tsx | 22 ++++++++++++++++++++
5 files changed, 37 insertions(+), 34 deletions(-)
diff --git a/src/components/pages/HomePage/HomePage.tsx
b/src/components/pages/HomePage/HomePage.tsx
index b7c72408fda..7efbf09b670 100644
--- a/src/components/pages/HomePage/HomePage.tsx
+++ b/src/components/pages/HomePage/HomePage.tsx
@@ -6,8 +6,12 @@ import ShortInfo from './ShortInfo/ShortInfo';
import Users from './Users/Users';
import s from './HomePage.module.css';
+import useScrollPosition from './useScrollPosition';
const HomePage = () => {
+ const scrollPosition = useScrollPosition();
+
+ const blurPx = scrollPosition * 0.1;
return (
<Layout
@@ -15,7 +19,13 @@ const HomePage = () => {
description={"Apache Pulsar is an open-source, distributed messaging and
streaming platform built for the cloud."}
>
<div className={s.Page}>
- <div className={s.Background}></div>
+ <div
+ className={s.Background}
+ style={{
+ filter: `blur(${blurPx < 24 ? blurPx : blurPx}px)`,
+ willChange: 'filter'
+ }}
+ />
<div className={s.FirstScreen}>
<ShortInfo />
</div>
diff --git a/src/components/pages/HomePage/ShortInfo/Parallax/Parallax.tsx
b/src/components/pages/HomePage/ShortInfo/Parallax/Parallax.tsx
index eb269170c71..d832725491a 100644
--- a/src/components/pages/HomePage/ShortInfo/Parallax/Parallax.tsx
+++ b/src/components/pages/HomePage/ShortInfo/Parallax/Parallax.tsx
@@ -1,4 +1,5 @@
-import React, { useState, useEffect, useCallback } from "react";
+import React from "react";
+import useScrollPosition from "../../useScrollPosition";
import s from './Parallax.module.css';
@@ -9,24 +10,7 @@ type ParallaxProps = {
const Parallax = (props: ParallaxProps) => {
const { children } = props;
const isBrowser = typeof window !== 'undefined';
-
- const [scrollPosition, setScrollPosition] = useState(0);
-
- const handleScroll = useCallback(() => {
- setScrollPosition(isBrowser ? window.scrollY : 0)
- }, []);
-
- useEffect(() => {
- if (isBrowser) {
- window.addEventListener("scroll", handleScroll);
- }
-
- return () => {
- if (isBrowser) {
- window.removeEventListener("scroll", handleScroll);
- }
- };
- }, []);
+ const scrollPosition = useScrollPosition();
return (
<div className={s.container}>
@@ -34,7 +18,7 @@ const Parallax = (props: ParallaxProps) => {
className={s.component}
style={{
transform: `translateY(-${scrollPosition * 0.5}px) translateZ(0)`,
- opacity: 1 - scrollPosition / (isBrowser ? window.innerHeight : 1)
+ opacity: 1 - scrollPosition / (isBrowser ? window.innerHeight : 1),
}}
>
{children}
diff --git a/src/components/pages/HomePage/ShortInfo/ShortInfo.module.css
b/src/components/pages/HomePage/ShortInfo/ShortInfo.module.css
index 9e1fca92ae1..8bf20b9559e 100644
--- a/src/components/pages/HomePage/ShortInfo/ShortInfo.module.css
+++ b/src/components/pages/HomePage/ShortInfo/ShortInfo.module.css
@@ -89,17 +89,6 @@
margin-right: 1rem;
}
-.blur {
- backdrop-filter: blur(3rem);
- backface-visibility: hidden;
- transform: translateZ(0);
-
- position: absolute;
- width: 100%;
- height: 100%;
- z-index: 1;
-}
-
@media (max-width: 1280px) {
.container {
box-sizing: border-box;
diff --git a/src/components/pages/HomePage/ShortInfo/ShortInfo.tsx
b/src/components/pages/HomePage/ShortInfo/ShortInfo.tsx
index 61d0e24f80f..1c86f78dfca 100644
--- a/src/components/pages/HomePage/ShortInfo/ShortInfo.tsx
+++ b/src/components/pages/HomePage/ShortInfo/ShortInfo.tsx
@@ -41,8 +41,6 @@ const ShortInfo: React.FC = () => {
</div>
<div className={s.fullsize_container}>
- <div className={s.blur} />
-
<div className={s.container}>
<div className={s.info_container}>
<ScreenTitle>
diff --git a/src/components/pages/HomePage/useScrollPosition.tsx
b/src/components/pages/HomePage/useScrollPosition.tsx
new file mode 100644
index 00000000000..d11f5d7e936
--- /dev/null
+++ b/src/components/pages/HomePage/useScrollPosition.tsx
@@ -0,0 +1,22 @@
+import { useEffect, useState } from "react";
+
+const useScrollPosition = () => {
+ const [scrollPosition, setScrollPosition] = useState(0);
+
+ useEffect(() => {
+ if (typeof window === 'undefined') {
+ return;
+ }
+
+ const updatePosition = () => {
+ setScrollPosition(window.pageYOffset);
+ }
+ window.addEventListener("scroll", updatePosition);
+ updatePosition();
+ return () => window.removeEventListener("scroll", updatePosition);
+ }, []);
+
+ return scrollPosition;
+};
+
+export default useScrollPosition;
