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 c5efdc7e66a HomePage - Make the blurry part not be cut, but slowly
become blurry as user scrolls to make it a smooth transition. v2 (#612)
c5efdc7e66a is described below
commit c5efdc7e66a26be3b816621d28f86c19845354fd
Author: Kiryl Valkovich <[email protected]>
AuthorDate: Mon Jun 19 14:59:59 2023 +0300
HomePage - Make the blurry part not be cut, but slowly become blurry as
user scrolls to make it a smooth transition. v2 (#612)
* Revert "HomePage - Make the blurry part not be cut, but slowly become
blurry as user scrolls to make it a smooth transition. (#608)"
This reverts commit 98eef6fa8c3087e20914b6c87fb6d1594db17f30.
* Make the blurry part not be cut, but slowly become blurry as user scrolls
to make it a smooth transition - v2
---
src/components/pages/HomePage/HomePage.tsx | 12 +----------
.../pages/HomePage/ShortInfo/Parallax/Parallax.tsx | 24 ++++++++++++++++++----
.../pages/HomePage/ShortInfo/ShortInfo.module.css | 12 +++++++++++
.../pages/HomePage/ShortInfo/ShortInfo.tsx | 2 ++
.../pages/HomePage/useScrollPosition.tsx | 22 --------------------
5 files changed, 35 insertions(+), 37 deletions(-)
diff --git a/src/components/pages/HomePage/HomePage.tsx
b/src/components/pages/HomePage/HomePage.tsx
index 7efbf09b670..b7c72408fda 100644
--- a/src/components/pages/HomePage/HomePage.tsx
+++ b/src/components/pages/HomePage/HomePage.tsx
@@ -6,12 +6,8 @@ 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
@@ -19,13 +15,7 @@ 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}
- style={{
- filter: `blur(${blurPx < 24 ? blurPx : blurPx}px)`,
- willChange: 'filter'
- }}
- />
+ <div className={s.Background}></div>
<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 d832725491a..eb269170c71 100644
--- a/src/components/pages/HomePage/ShortInfo/Parallax/Parallax.tsx
+++ b/src/components/pages/HomePage/ShortInfo/Parallax/Parallax.tsx
@@ -1,5 +1,4 @@
-import React from "react";
-import useScrollPosition from "../../useScrollPosition";
+import React, { useState, useEffect, useCallback } from "react";
import s from './Parallax.module.css';
@@ -10,7 +9,24 @@ type ParallaxProps = {
const Parallax = (props: ParallaxProps) => {
const { children } = props;
const isBrowser = typeof window !== 'undefined';
- const scrollPosition = useScrollPosition();
+
+ 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);
+ }
+ };
+ }, []);
return (
<div className={s.container}>
@@ -18,7 +34,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 8bf20b9559e..b5895f9dbb1 100644
--- a/src/components/pages/HomePage/ShortInfo/ShortInfo.module.css
+++ b/src/components/pages/HomePage/ShortInfo/ShortInfo.module.css
@@ -89,6 +89,18 @@
margin-right: 1rem;
}
+.blur {
+ backdrop-filter: blur(3rem);
+ backface-visibility: hidden;
+ mask: linear-gradient(0deg, rgba(0,0,0,1) 80%, rgba(255,255,255,0) 100%);
+ transform: translate(0, -20%, 1);
+
+ position: absolute;
+ width: 100%;
+ height: 120%;
+ 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 1c86f78dfca..61d0e24f80f 100644
--- a/src/components/pages/HomePage/ShortInfo/ShortInfo.tsx
+++ b/src/components/pages/HomePage/ShortInfo/ShortInfo.tsx
@@ -41,6 +41,8 @@ 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
deleted file mode 100644
index d11f5d7e936..00000000000
--- a/src/components/pages/HomePage/useScrollPosition.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-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;
