bachir
/
drupal-erable
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

parallax

This commit is contained in:
Valentin 2024-12-04 00:06:58 +01:00
parent 5bd85f61d5
commit 277807ef4b
3 changed files with 18 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
web/themes/erabletheme/js/erabletheme.js
View File

@ -375,7 +375,7 @@
function toggleBgMiddle(pageHeight) { function toggleBgMiddle(pageHeight) {
const bgMiddle = document.querySelector('#bg-middle'); const bgMiddle = document.querySelector('#bg-middle');
const bgOnze = document.querySelector('#bg-11'); const bgOnze = document.querySelector('#bg-11');
if (pageHeight < 2000) { if (pageHeight < 2500) {
bgMiddle.style.display = 'none'; bgMiddle.style.display = 'none';
bgOnze.style.display = 'none'; bgOnze.style.display = 'none';
} else { } else {
@ -383,6 +383,13 @@
bgOnze.style.display = 'block'; bgOnze.style.display = 'block';
} }
} }
//
// bg parallax animation
//
var rellax = new Rellax('.bgImg', {
wrapper: 'body',
});
} }
} }

1
web/themes/erabletheme/templates/html.html.twig
View File

@ -31,6 +31,7 @@
<head-placeholder token="{{ placeholder_token }}"> <head-placeholder token="{{ placeholder_token }}">
<title>{{ head_title|safe_join(' | ') }}</title> <title>{{ head_title|safe_join(' | ') }}</title>
<css-placeholder token="{{ placeholder_token }}"> <css-placeholder token="{{ placeholder_token }}">
<script src="https://cdn.jsdelivr.net/gh/dixonandmoe/rellax@master/rellax.min.js"></script>
<js-placeholder token="{{ placeholder_token }}"> <js-placeholder token="{{ placeholder_token }}">
</head> </head>
<body{{ attributes }}> <body{{ attributes }}>

18
web/themes/erabletheme/templates/page/page.html.twig
View File

@ -102,21 +102,21 @@
<div id="background"> <div id="background">
<div id="bg-top"> <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-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 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 src="/themes/erabletheme/assets/bg-shapes/bg-3.svg" aria-hidden="true" alt="bg shape" id="bg-3"> <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 src="/themes/erabletheme/assets/bg-shapes/bg-2.svg" aria-hidden="true" alt="bg shape" id="bg-2"> <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"> #} {# <img src="/themes/erabletheme/assets/bg-shapes/bg-4.svg" aria-hidden="true" alt="bg shape" id="bg-4"> #}
</div> </div>
<div id="bg-middle"> <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-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 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 src="/themes/erabletheme/assets/bg-shapes/bg-7.svg" aria-hidden="true" alt="bg shape" id="bg-7"> <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 src="/themes/erabletheme/assets/bg-shapes/bg-12.png" aria-hidden="true" alt="bg shape" id="bg-12"> <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>
<div id="bg-bottom"> <div id="bg-bottom">
<img src="/themes/erabletheme/assets/bg-shapes/bg-11.svg" aria-hidden="true" alt="bg shape" id="bg-11"> <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 src="/themes/erabletheme/assets/bg-shapes/bg-10.svg" aria-hidden="true" alt="bg shape" id="bg-10"> <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 src="/themes/erabletheme/assets/bg-shapes/bg-4.svg" aria-hidden="true" alt="bg shape" id="bg-4"> <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>
</div> </div>