css live
This commit is contained in:
parent
09a1e18f16
commit
4d4ccb80a9
@ -26,7 +26,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony default export */
|
|||||||
\******************************************/
|
\******************************************/
|
||||||
/***/ (function() {
|
/***/ (function() {
|
||||||
|
|
||||||
eval("document.addEventListener('scroll', function() {\n const scrolled = window.pageYOffset;\n const background = document.getElementById('background-animated-live');\n if (background) {\n // Adjust this value to control the speed of the parallax effect\n const parallaxSpeed = 0.5;\n background.style.transform = 'translateY(' + (scrolled * parallaxSpeed) + 'px)';\n }\n});\n\n\n\n\n //ANimation Pilliers \n// const svg = document.querySelector('#paragraph-id--7 .colone-picto');\n\n// // Configuration de l'observateur d'intersection\n// const observer = new IntersectionObserver(entries => {\n// entries.forEach(entry => {\n// if (entry.isIntersecting) {\n// // Ajoute une classe lorsque l'élément est visible\n// svg.classList.add('visible');\n// } else {\n// // Optionnel : Retirez la classe si nécessaire\n// svg.classList.remove('visible');\n// }\n// });\n// });\n\n// // Observer l'élément SVG\n// observer.observe(svg);\n\n//////////////////////////////////////////////////\n\n//ANimation Pilliers \nconst svg = document.querySelector('#paragraph-id--7 .colone-picto');\n\nif (svg) {\n // Configuration de l'observateur d'intersection\n const observer = new IntersectionObserver(entries => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n // Ajoute une classe lorsque l'élément est visible\n // svg.classList.remove('invisible');\n svg.classList.add('visible');\n } \n // else {\n // // Optionnel : Retirez la classe si nécessaire\n // svg.classList.remove('visible');\n \n // }\n });\n });\n \n // Observer l'élément SVG\n observer.observe(svg);\n \n}\n\n\n//# sourceURL=webpack://quartiers_de_demain/./src/assets/js/animated_formes.js?");
|
eval("document.addEventListener('scroll', function() {\n const scrolled = window.pageYOffset;\n const background = document.getElementById('background-animated');\n if (background) {\n // Adjust this value to control the speed of the parallax effect\n const parallaxSpeed = 0.5;\n background.style.transform = 'translateY(' + (scrolled * parallaxSpeed) + 'px)';\n }\n});\n\n\n\n\n //ANimation Pilliers \n// const svg = document.querySelector('#paragraph-id--7 .colone-picto');\n\n// // Configuration de l'observateur d'intersection\n// const observer = new IntersectionObserver(entries => {\n// entries.forEach(entry => {\n// if (entry.isIntersecting) {\n// // Ajoute une classe lorsque l'élément est visible\n// svg.classList.add('visible');\n// } else {\n// // Optionnel : Retirez la classe si nécessaire\n// svg.classList.remove('visible');\n// }\n// });\n// });\n\n// // Observer l'élément SVG\n// observer.observe(svg);\n\n//////////////////////////////////////////////////\n\n//ANimation Pilliers \nconst svg = document.querySelector('#paragraph-id--7 .colone-picto');\n\nif (svg) {\n // Configuration de l'observateur d'intersection\n const observer = new IntersectionObserver(entries => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n // Ajoute une classe lorsque l'élément est visible\n // svg.classList.remove('invisible');\n svg.classList.add('visible');\n } \n // else {\n // // Optionnel : Retirez la classe si nécessaire\n // svg.classList.remove('visible');\n \n // }\n });\n });\n \n // Observer l'élément SVG\n observer.observe(svg);\n \n}\n\n\n//# sourceURL=webpack://quartiers_de_demain/./src/assets/js/animated_formes.js?");
|
||||||
|
|
||||||
/***/ }),
|
/***/ }),
|
||||||
|
|
||||||
|
|||||||
@ -1693,7 +1693,7 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#home #background-animated-live {
|
#home #background-animated {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 1500px;
|
top: 1500px;
|
||||||
left: 200px;
|
left: 200px;
|
||||||
@ -1702,11 +1702,11 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
|
|||||||
z-index: 2; /* S'assure que l'élément soit au-dessus */
|
z-index: 2; /* S'assure que l'élément soit au-dessus */
|
||||||
}
|
}
|
||||||
@media (max-width: 1400px) {
|
@media (max-width: 1400px) {
|
||||||
#home #background-animated-live {
|
#home #background-animated {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
#home #background-animated-live svg {
|
#home #background-animated svg {
|
||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
top: -1500px;
|
top: -1500px;
|
||||||
|
|||||||
|
Before Width: | Height: | Size: 4.1 KiB After Width: | Height: | Size: 4.1 KiB |
@ -0,0 +1,102 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
version="1.1"
|
||||||
|
id="svg1"
|
||||||
|
width="2560.2766"
|
||||||
|
height="11997.26"
|
||||||
|
viewBox="0 0 2560.2766 11997.26"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<defs
|
||||||
|
id="defs1">
|
||||||
|
<clipPath
|
||||||
|
clipPathUnits="userSpaceOnUse"
|
||||||
|
id="clipPath255">
|
||||||
|
<path
|
||||||
|
d="M 0,0 H 1920 V 9000 H 0 Z"
|
||||||
|
transform="translate(-1378.7554,-1136.295)"
|
||||||
|
id="path255" />
|
||||||
|
</clipPath>
|
||||||
|
<clipPath
|
||||||
|
clipPathUnits="userSpaceOnUse"
|
||||||
|
id="clipPath258">
|
||||||
|
<path
|
||||||
|
d="M 0,0 H 1920 V 9000 H 0 Z"
|
||||||
|
transform="translate(-1095.6993,-8098.7595)"
|
||||||
|
id="path258" />
|
||||||
|
</clipPath>
|
||||||
|
<clipPath
|
||||||
|
clipPathUnits="userSpaceOnUse"
|
||||||
|
id="clipPath301">
|
||||||
|
<path
|
||||||
|
d="M 0,0 H 1920 V 9000 H 0 Z"
|
||||||
|
transform="translate(-1476.5001,-5895.4337)"
|
||||||
|
id="path301" />
|
||||||
|
</clipPath>
|
||||||
|
<clipPath
|
||||||
|
clipPathUnits="userSpaceOnUse"
|
||||||
|
id="clipPath303">
|
||||||
|
<path
|
||||||
|
d="M 0,0 H 1920 V 9000 H 0 Z"
|
||||||
|
transform="translate(-1623.8512,-4272.9005)"
|
||||||
|
id="path303" />
|
||||||
|
</clipPath>
|
||||||
|
</defs>
|
||||||
|
<g
|
||||||
|
id="g1"
|
||||||
|
transform="translate(0.17944336,-2.9196463)">
|
||||||
|
<path
|
||||||
|
id="path148"
|
||||||
|
d="M 0,0 211.55,177.512"
|
||||||
|
style="fill:none;stroke:#0833c2;stroke-width:70;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
transform="matrix(1.3333333,0,0,-1.3333333,1686.6035,9061.9695)" />
|
||||||
|
<path
|
||||||
|
id="path151"
|
||||||
|
d="M 0,0 V -174.775"
|
||||||
|
style="fill:none;stroke:#0833c2;stroke-width:85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
transform="matrix(1.3333333,0,0,-1.3333333,2083.6333,1370.6667)" />
|
||||||
|
<path
|
||||||
|
id="path254"
|
||||||
|
d="M 0,0 C 0,205.098 -166.265,371.361 -371.362,371.361"
|
||||||
|
style="fill:none;stroke:#000000;stroke-width:137.482;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
transform="matrix(1.3333333,0,0,-1.3333333,1838.3405,10484.94)"
|
||||||
|
clip-path="url(#clipPath255)" />
|
||||||
|
<path
|
||||||
|
id="path256"
|
||||||
|
d="M 0,0 177.512,-211.551"
|
||||||
|
style="fill:none;stroke:#0833c2;stroke-width:70;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
transform="matrix(1.3333333,0,0,-1.3333333,219.88347,2415.4232)" />
|
||||||
|
<path
|
||||||
|
id="path257"
|
||||||
|
d="M 0,0 C -205.098,0 -371.361,-166.265 -371.361,-371.362"
|
||||||
|
style="fill:none;stroke:#f7002b;stroke-width:137.482;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
transform="matrix(1.3333333,0,0,-1.3333333,1460.9323,1201.6543)"
|
||||||
|
clip-path="url(#clipPath258)" />
|
||||||
|
<path
|
||||||
|
id="path300"
|
||||||
|
d="M 0,0 C 0,-126.805 102.795,-229.6 229.6,-229.6"
|
||||||
|
style="fill:none;stroke:#f7002b;stroke-width:85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
transform="matrix(1.3333333,0,0,-1.3333333,1968.6667,4139.4219)"
|
||||||
|
clip-path="url(#clipPath301)" />
|
||||||
|
<path
|
||||||
|
id="path302"
|
||||||
|
d="M 0,0 C 0,126.805 -102.795,229.6 -229.6,229.6"
|
||||||
|
style="fill:none;stroke:#0833c2;stroke-width:85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
transform="matrix(1.3333333,0,0,-1.3333333,2165.1349,6302.7995)"
|
||||||
|
clip-path="url(#clipPath303)" />
|
||||||
|
<path
|
||||||
|
id="path311"
|
||||||
|
d="M 0,0 V 283"
|
||||||
|
style="fill:none;stroke:#000000;stroke-width:85;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
transform="matrix(1.3333333,0,0,-1.3333333,247.22107,6014.2852)" />
|
||||||
|
<rect
|
||||||
|
style="fill:none;stroke:#000000;stroke-width:0.872103;paint-order:fill markers stroke"
|
||||||
|
id="rect717"
|
||||||
|
width="2559.4043"
|
||||||
|
height="11996.388"
|
||||||
|
x="0.25652406"
|
||||||
|
y="3.3556976" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 4.1 KiB |
@ -1,6 +1,6 @@
|
|||||||
document.addEventListener('scroll', function() {
|
document.addEventListener('scroll', function() {
|
||||||
const scrolled = window.pageYOffset;
|
const scrolled = window.pageYOffset;
|
||||||
const background = document.getElementById('background-animated-live');
|
const background = document.getElementById('background-animated');
|
||||||
if (background) {
|
if (background) {
|
||||||
// Adjust this value to control the speed of the parallax effect
|
// Adjust this value to control the speed of the parallax effect
|
||||||
const parallaxSpeed = 0.5;
|
const parallaxSpeed = 0.5;
|
||||||
|
|||||||
@ -1,44 +1,46 @@
|
|||||||
#home{
|
#home{
|
||||||
/////////////////start à remettre après fin live ///////////////
|
/////////////////start à remettre après fin live ///////////////
|
||||||
// #background-animated {
|
#background-animated {
|
||||||
// // display: none;
|
// display: none;
|
||||||
// position: absolute;
|
position: absolute;
|
||||||
// top: 1500px;
|
top: 1500px;
|
||||||
// left: 200px;
|
left: 200px;
|
||||||
// width: 90%;
|
width: 90%;
|
||||||
// // height: 100%;
|
// height: 100%;
|
||||||
// pointer-events: none; /* Permet de cliquer à travers l'élément */
|
pointer-events: none; /* Permet de cliquer à travers l'élément */
|
||||||
// z-index: 2; /* S'assure que l'élément soit au-dessus */
|
z-index: 2; /* S'assure que l'élément soit au-dessus */
|
||||||
// @media(max-width: 1400px){
|
@media(max-width: 1400px){
|
||||||
// display: none;
|
display: none;
|
||||||
// }
|
}
|
||||||
// svg{
|
svg{
|
||||||
// max-width: 100%;
|
max-width: 100%;
|
||||||
// position: relative;
|
position: relative;
|
||||||
// top: -1500px;
|
top: -1500px;
|
||||||
// }
|
}
|
||||||
// }
|
}
|
||||||
|
|
||||||
////////////////////////// end à remettre après fin live///////////
|
////////////////////////// end à remettre après fin live///////////
|
||||||
#background-animated-live {
|
|
||||||
// display: none;
|
|
||||||
position: absolute;
|
|
||||||
top: 1500px;
|
|
||||||
left: 200px;
|
|
||||||
width: 90%;
|
|
||||||
// height: 100%;
|
|
||||||
pointer-events: none; /* Permet de cliquer à travers l'élément */
|
|
||||||
z-index: 2; /* S'assure que l'élément soit au-dessus */
|
|
||||||
@media(max-width: 1400px){
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
svg{
|
|
||||||
max-width: 100%;
|
|
||||||
position: relative;
|
|
||||||
top: -1500px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
////////////////////////// start ///////////
|
||||||
|
// #background-animated-live {
|
||||||
|
// // display: none;
|
||||||
|
// position: absolute;
|
||||||
|
// top: 1500px;
|
||||||
|
// left: 200px;
|
||||||
|
// width: 90%;
|
||||||
|
// // height: 100%;
|
||||||
|
// pointer-events: none; /* Permet de cliquer à travers l'élément */
|
||||||
|
// z-index: 2; /* S'assure que l'élément soit au-dessus */
|
||||||
|
// @media(max-width: 1400px){
|
||||||
|
// display: none;
|
||||||
|
// }
|
||||||
|
// svg{
|
||||||
|
// max-width: 100%;
|
||||||
|
// position: relative;
|
||||||
|
// top: -1500px;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
////////////////////////// end e///////////
|
||||||
// .not-visible{
|
// .not-visible{
|
||||||
// @media (max-width:1100px) {
|
// @media (max-width:1100px) {
|
||||||
// display: none;
|
// display: none;
|
||||||
|
|||||||
@ -82,15 +82,11 @@
|
|||||||
{{ page.content }}
|
{{ page.content }}
|
||||||
|
|
||||||
</div>{# /.layout-content #}
|
</div>{# /.layout-content #}
|
||||||
{# <div id="background-animated" >
|
<div id="background-animated" >
|
||||||
{% include active_theme_path() ~ '/dist/assets/img/formes-animees.svg' %}
|
{% include active_theme_path() ~ '/dist/assets/img/formes-animees.svg' %}
|
||||||
<img src="/themes/custom/quartiers_de_demain/dist/assets/img/formes-animees.svg" id="formes-animees"/>
|
<img src="/themes/custom/quartiers_de_demain/dist/assets/img/formes-animees.svg" id="formes-animees"/>
|
||||||
</div> #}
|
|
||||||
<div id="background-animated-live" >
|
|
||||||
{% include active_theme_path() ~ '/dist/assets/img/formes-animees-live.svg' %}
|
|
||||||
<img src="/themes/custom/quartiers_de_demain/dist/assets/img/formes-animees-live.svg" id="formes-animees-live"/>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{% if page.sidebar_first %}
|
{% if page.sidebar_first %}
|
||||||
<aside class="layout-sidebar-first" role="complementary">
|
<aside class="layout-sidebar-first" role="complementary">
|
||||||
{{ page.sidebar_first }}
|
{{ page.sidebar_first }}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user