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) {
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',
});
}
}

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

@ -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 }}>

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

@ -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>