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

paralax fond

Browse Source
This commit is contained in:
Ouidade Soussi Chiadmi
2024-07-11 16:16:12 +02:00
parent d1d9778fc4
commit 7d48a18ff0
10 changed files with 192 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
web/themes/custom/quartiers_de_demain/src/assets/js/animated_formes.js
View File

@@ -1,11 +1,8 @@
// document.addEventListener("DOMContentLoaded", function() {
// const pathToRotate = document.getElementById('path257');
// let rotationAngle = 0;
// // function rotatePath() {
// // rotationAngle += 1; // Augmente l'angle de rotation
// // pathToRotate.setAttribute('transform', `translate(1460.9323, 1201.6543) rotate(${rotationAngle}, 5, -10)`); // Applique la transformation de rotation
// // }
// // setInterval(rotatePath, 10); // Appelle la fonction rotatePath toutes les 10 millisecondes (ajustez selon vos besoins)
// });
document.addEventListener('scroll', function() {
const scrolled = window.pageYOffset;
const background = document.getElementById('background-animated');
// Adjust this value to control the speed of the parallax effect
const parallaxSpeed = 0.2;
background.style.transform = 'translateY(' + (scrolled * parallaxSpeed) + 'px)';
});

114
web/themes/custom/quartiers_de_demain/src/assets/scss/pages/home.scss
View File

@@ -3,19 +3,19 @@
.config_pages--type--diaporama-home{
position: relative;
#svg1{
position: absolute;
z-index: 5;
right: 11rem;
bottom: -8rem;
width: 50%;
@media(max-width: 810px){
display: none;
// bottom: -4rem;
// right: 4rem;
// width: 72%;
}
}
// #svg1{
// position: absolute;
// z-index: 5;
// right: 11rem;
// bottom: -16rem;
// width: 50%;
// @media(max-width: 810px){
// display:none;
// // bottom: -4rem;
// // right: 4rem;
// // width: 72%;
// }
// }
.field_field_images{
img{
width: 100%;
@@ -48,17 +48,17 @@
flex-direction: row;
flex-wrap: wrap ;
position: relative;
&::after{
content: url('../img/formes-animees-2.svg');
display: block;
position: absolute;
z-index: 5;
left: 1rem;
bottom: 0;
@media(max-width: 810px){
display: none;
}
}
// &::after{
// content: url('../img/formes-animees-2.svg');
// display: block;
// position: absolute;
// z-index: 5;
// left: 1rem;
// bottom: 0;
// @media(max-width: 810px){
// display: none;
// }
// }
@media(max-width: 1090px){
flex-direction: column;
}
@@ -103,17 +103,17 @@
background-color: #edefe8;
position: relative;
padding-bottom: 6rem;
&::after{
content: url('../img/formes-animees-3.svg');
display: block;
position: absolute;
z-index: 5;
right: 15%;
bottom: 45%;
@media(max-width: 810px){
display: none;
}
}
// &::after{
// content: url('../img/formes-animees-3.svg');
// display: block;
// position: absolute;
// z-index: 5;
// right: 15%;
// bottom: 45%;
// @media(max-width: 810px){
// display: none;
// }
// }
.field_field_title{
font-family: 'gilroy-bold';
}
@@ -323,29 +323,29 @@
align-items: center;
padding-bottom: 2rem;
position: relative;
&::before{
content: url('../img/formes-animees-4.svg');
display: block;
position: absolute;
z-index: 5;
left: 10%;
top: -6rem;
@media(max-width: 810px){
display: none;
// &::before{
// content: url('../img/formes-animees-4.svg');
// display: block;
// position: absolute;
// z-index: 5;
// left: 10%;
// top: -6rem;
// @media(max-width: 810px){
// display: none;
}
}
&::after{
content: url('../img/formes-animees-5.svg');
display: block;
position: absolute;
z-index: 5;
right: 15%;
top: 3rem;
@media(max-width: 810px){
display: none;
}
}
// }
// }
// &::after{
// content: url('../img/formes-animees-5.svg');
// display: block;
// position: absolute;
// z-index: 5;
// right: 15%;
// top: 3rem;
// @media(max-width: 810px){
// display: none;
// }
// }
@media(max-width: 500px){
width: 90%;
text-align: center;

52
web/themes/custom/quartiers_de_demain/src/assets/scss/partials/formes-animees.scss
View File

@@ -1,29 +1,29 @@
// #home{
// #background-animated {
// position: absolute;
// top: 0;
// left: 0;
// width: 100%;
// height: 100%;
// pointer-events: none; /* Permet de cliquer à travers l'élément */
// z-index: 5; /* S'assure que l'élément soit au-dessus */
// @media(max-width: 810px){
// top: 1820px;
// }
// svg{
// max-width: 100%;
// position: relative;
// top: -1500px;
// }
#home{
#background-animated {
position: absolute;
top: 600px;
left: 0;
width: 100%;
height: 100%;
pointer-events: none; /* Permet de cliquer à travers l'élément */
z-index: 5; /* S'assure que l'élément soit au-dessus */
@media(max-width: 810px){
top: 1820px;
}
svg{
max-width: 100%;
position: relative;
top: -1500px;
}
// }
}
// .layout-content {
// position: relative;
// z-index: 2; /* S'assure que le contenu soit au-dessus des animations */
// }
.layout-content {
position: relative;
z-index: 2; /* S'assure que le contenu soit au-dessus des animations */
}
// .layout-container.home {
// position: relative;
// }
// }
.layout-container.home {
position: relative;
}
}

44
web/themes/custom/quartiers_de_demain/src/assets/scss/partials/timeline.scss
View File

@@ -14,28 +14,28 @@
cursor:grab;
}
position: relative;
&::before{
content: url('../img/formes-animees-6.svg');
display: block;
position: absolute;
z-index: 5;
right: 20%;
top: 2rem;
@media(max-width: 810px){
display: none;
}
}
&::after{
content: url('../img/formes-animees-7.svg');
display: block;
position: absolute;
z-index: 5;
right: 26%;
bottom: -9rem;
@media(max-width: 810px){
display: none;
}
}
// &::before{
// content: url('../img/formes-animees-6.svg');
// display: block;
// position: absolute;
// z-index: 5;
// right: 20%;
// top: 2rem;
// @media(max-width: 810px){
// display: none;
// }
// }
// &::after{
// content: url('../img/formes-animees-7.svg');
// display: block;
// position: absolute;
// z-index: 5;
// right: 26%;
// bottom: -9rem;
// @media(max-width: 810px){
// display: none;
// }
// }
h2{
width: fit-content;
margin: auto;