fix(global): wallpaper out content scroll issue (#1343)

Author: mydearxym

src/containers/layout/GlobalLayout/index.tsx

@@ -69,6 +69,7 @@ const GlobalLayoutContainer: FC<TProps> = ({
       {/* @ts-ignore */}
       <Addon />
       <Skeleton>
+        <Wallpaper wallpaper={wallpaper} wallpapers={wallpapers} />
         {/* @ts-ignore */}
         <CustomScroller
           instanceKey={BODY_SCROLLER}
@@ -81,7 +82,6 @@ const GlobalLayoutContainer: FC<TProps> = ({
         >
           <Wrapper>
             <SEO metric={metric} config={seoConfig} />
-            <Wallpaper wallpaper={wallpaper} wallpapers={wallpapers} />
             <InnerWrapper metric={metric} sidebarPin={sidebarPin}>
               {/* @ts-ignore */}
               <ContentWrapper offsetLeft={sidebarPin}>

src/containers/layout/GlobalLayout/styles/wallpaper.ts

@@ -1,15 +1,24 @@
 import styled from 'styled-components'
+import { animate } from '@/utils/css'
 
 export const Wrapper = styled.div<{ effect: string }>`
-  ${({ effect }) => effect || ''};
-  position: fixed;
+  position: absolute;
   top: 0;
-  height: 100vh;
-  width: 100vw;
+  height: 100%;
+  width: 100%;
+
+  ${({ effect }) => effect || ''};
 
+  /* adjust s value for speed */
   /* position: fixed; */
   /* see https://www.zhangxinxu.com/wordpress/2015/11/css3-will-change-improve-paint/ */
   will-change: transform;
+  /**
+   * 可以横向滚动，有点意思。。
+   * @link https://stackoverflow.com/questions/37903824/how-can-i-make-infinite-flowing-background-with-only-css
+  */
+
+  /* animation: ${animate.animatedBg} 3000s linear; */
   transition: all 0.3s;
 `
 export const InnerWrapper = styled.div`

utils/css/animations.ts

@@ -1,5 +1,15 @@
 import { keyframes } from 'styled-components'
 
+const animatedBg = keyframes`
+  from {
+    background-position: 0 0;
+  }
+/*use negative width if you want it to flow right to left else and positive for left to right*/
+  to {
+    background-position: -10000px 0;
+  }
+`
+
 const shake = keyframes`
   from,
   to {
@@ -110,6 +120,7 @@ const animate = {
   breath,
   blink,
   jump,
+  animatedBg,
 }
 
 export default animate