better parallax-bg

web_main/themes/custom/mathallo/assets/js/main.js

@@ -286,13 +286,24 @@ gsap.registerPlugin(ScrollTrigger, ScrollSmoother);
       });
 
       ScrollSmoother.create({
-        smooth: 1, // how long (in seconds) it takes to "catch up" to the native scroll position
+        smooth: 3, // how long (in seconds) it takes to "catch up" to the native scroll position
         effects: true, // looks for data-speed and data-lag attributes on elements
         smoothTouch: 0.1, // much shorter smoothing time on touch devices (default is NO smoothing on touch devices)
         wrapper: 'main[role="main"]',
         content: 'main[role="main"]>.layout-content'
       });
 
+      gsap.to('#parallax-bg', {
+        y: (i, target) => -(ScrollTrigger.maxScroll(window) * 1.2),
+        ease: "none",
+        scrollTrigger: {
+          trigger: 'main[role="main"] > .layout-content > .wrapper',
+          start: "top bottom",
+          end: "bottom top",
+          scrub: true,
+          invalidateOnRefresh: true
+        }
+      });
 
       
       

web_main/themes/custom/mathallo/assets/scss/main.scss

@@ -10,9 +10,6 @@ a, a:visited{
 
 body{
   margin: 0;
-  background-image: url('/themes/custom/mathallo/assets/img/grid_0.svg');
-  background-repeat: repeat;
-  background-position: center;
 }
 
 $header_height: 50px;
@@ -262,7 +259,40 @@ nav[role="breadcrumb"]{
 // \_|  |_/\__,_|_|_| |_|
                       
 main[role="main"]{
+  position: relative;
   &>div.layout-content{
+    position: relative;
+
+    div#parallax-bg{
+      position: absolute;
+      z-index: -1;
+      top:0;
+      left: 0;
+      margin-top: -40vh;
+      width: 100vw;
+      height:400%;
+
+
+      background-image: url('/themes/custom/mathallo/assets/img/grid_0.svg');
+      background-repeat: repeat;
+      background-position: center;
+
+      // mask: linear-gradient(white, white) content-box, linear-gradient(white, white);
+
+    }
+
+    // div#custom-cursor{
+    //   position: absolute;
+    //   top:40vh; left:50vh;
+    //   display: block;
+    //   $wh:100px;
+    //   width:$wh; height:$wh;
+    //   border-radius: $wh / 2;
+    //   background-color: #000;
+    //   // mix-blend-mode:color;
+    //   mask-composite: exclude;
+    // }
+
     &>.wrapper{
       position:relative;
       padding-bottom: 100vh;

web_main/themes/custom/mathallo/templates/page.html.twig

@@ -70,8 +70,10 @@
 
   <main role="main">
     <a id="main-content" tabindex="-1"></a>{# link is in html.html.twig #}
-
+    
     <div class="layout-content">
+      <div id="parallax-bg"></div>
+      {# <div id="custom-cursor"></div> #}
       {{ page.content }}
     </div>{# /.layout-content #}