From 277807ef4b9dfa2caa1e6bc240b75fafb1be3b14 Mon Sep 17 00:00:00 2001
From: Valentin <valentin@figureslibres.io>
Date: Wed, 4 Dec 2024 00:06:58 +0100
Subject: [PATCH] parallax

---
 web/themes/erabletheme/js/erabletheme.js       |  9 ++++++++-
 .../erabletheme/templates/html.html.twig       |  1 +
 .../erabletheme/templates/page/page.html.twig  | 18 +++++++++---------
 3 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/web/themes/erabletheme/js/erabletheme.js b/web/themes/erabletheme/js/erabletheme.js
index afb9875..ea905f7 100644
--- a/web/themes/erabletheme/js/erabletheme.js
+++ b/web/themes/erabletheme/js/erabletheme.js
@@ -375,7 +375,7 @@
       function toggleBgMiddle(pageHeight) {
         const bgMiddle = document.querySelector('#bg-middle');
         const bgOnze = document.querySelector('#bg-11');
-        if (pageHeight < 2000) {
+        if (pageHeight < 2500) {
           bgMiddle.style.display = 'none';
           bgOnze.style.display = 'none';
         } else {
@@ -383,6 +383,13 @@
           bgOnze.style.display = 'block';
         }
       }
+
+      //
+      // bg parallax animation
+      //
+      var rellax = new Rellax('.bgImg', {
+        wrapper: 'body',
+      });
     }
   }
 
diff --git a/web/themes/erabletheme/templates/html.html.twig b/web/themes/erabletheme/templates/html.html.twig
index 107c56b..c5b9827 100644
--- a/web/themes/erabletheme/templates/html.html.twig
+++ b/web/themes/erabletheme/templates/html.html.twig
@@ -31,6 +31,7 @@
     <head-placeholder token="{{ placeholder_token }}">
     <title>{{ head_title|safe_join(' | ') }}</title>
     <css-placeholder token="{{ placeholder_token }}">
+    <script src="https://cdn.jsdelivr.net/gh/dixonandmoe/rellax@master/rellax.min.js"></script>
     <js-placeholder token="{{ placeholder_token }}">
   </head>
   <body{{ attributes }}>
diff --git a/web/themes/erabletheme/templates/page/page.html.twig b/web/themes/erabletheme/templates/page/page.html.twig
index c1a1bd7..a70b3bc 100644
--- a/web/themes/erabletheme/templates/page/page.html.twig
+++ b/web/themes/erabletheme/templates/page/page.html.twig
@@ -102,21 +102,21 @@
   <div id="background">
     <div id="bg-top">
       {# <img src="/themes/erabletheme/assets/bg-shapes/bg-1.svg" aria-hidden="true" alt="bg shape" id="bg-1"> #}
-      <img src="/themes/erabletheme/assets/bg-shapes/bg-5.svg" aria-hidden="true" alt="bg shape" id="bg-5">
-      <img src="/themes/erabletheme/assets/bg-shapes/bg-3.svg" aria-hidden="true" alt="bg shape" id="bg-3">
-      <img src="/themes/erabletheme/assets/bg-shapes/bg-2.svg" aria-hidden="true" alt="bg shape" id="bg-2">
+      <img class="bgImg" data-rellax-speed="-5" src="/themes/erabletheme/assets/bg-shapes/bg-5.svg" aria-hidden="true" alt="bg shape" id="bg-5">
+      <img class="bgImg" data-rellax-speed="-6" src="/themes/erabletheme/assets/bg-shapes/bg-3.svg" aria-hidden="true" alt="bg shape" id="bg-3">
+      <img class="bgImg" data-rellax-speed="-3" src="/themes/erabletheme/assets/bg-shapes/bg-2.svg" aria-hidden="true" alt="bg shape" id="bg-2">
       {# <img src="/themes/erabletheme/assets/bg-shapes/bg-4.svg" aria-hidden="true" alt="bg shape" id="bg-4"> #}
     </div>
     <div id="bg-middle">
       {# <img src="/themes/erabletheme/assets/bg-shapes/bg-8.svg" aria-hidden="true" alt="bg shape" id="bg-8"> #}
-      <img src="/themes/erabletheme/assets/bg-shapes/bg-6.svg" aria-hidden="true" alt="bg shape" id="bg-6">
-      <img src="/themes/erabletheme/assets/bg-shapes/bg-7.svg" aria-hidden="true" alt="bg shape" id="bg-7">
-      <img src="/themes/erabletheme/assets/bg-shapes/bg-12.png" aria-hidden="true" alt="bg shape" id="bg-12">
+      <img class="bgImg" data-rellax-speed="-4" src="/themes/erabletheme/assets/bg-shapes/bg-6.svg" aria-hidden="true" alt="bg shape" id="bg-6">
+      <img class="bgImg" data-rellax-speed="-3" src="/themes/erabletheme/assets/bg-shapes/bg-7.svg" aria-hidden="true" alt="bg shape" id="bg-7">
+      <img class="bgImg" data-rellax-speed="-2" src="/themes/erabletheme/assets/bg-shapes/bg-12.png" aria-hidden="true" alt="bg shape" id="bg-12">
     </div>
     <div id="bg-bottom">
-      <img src="/themes/erabletheme/assets/bg-shapes/bg-11.svg" aria-hidden="true" alt="bg shape" id="bg-11">
-      <img src="/themes/erabletheme/assets/bg-shapes/bg-10.svg" aria-hidden="true" alt="bg shape" id="bg-10">
-      <img src="/themes/erabletheme/assets/bg-shapes/bg-4.svg" aria-hidden="true" alt="bg shape" id="bg-4">
+      <img class="bgImg" data-rellax-speed="2" src="/themes/erabletheme/assets/bg-shapes/bg-11.svg" aria-hidden="true" alt="bg shape" id="bg-11">
+      <img class="bgImg" data-rellax-speed="1" src="/themes/erabletheme/assets/bg-shapes/bg-10.svg" aria-hidden="true" alt="bg shape" id="bg-10">
+      <img class="bgImg" data-rellax-speed="0.5" src="/themes/erabletheme/assets/bg-shapes/bg-4.svg" aria-hidden="true" alt="bg shape" id="bg-4">
     </div>
   </div>