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

formes géometriques

This commit is contained in:
ouidade 2024-07-11 14:31:51 +02:00
parent ef68475b9a
commit d1d9778fc4
9 changed files with 213 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
web/themes/custom/quartiers_de_demain/dist/assets/bundle.js vendored
View File

@ -20,13 +20,13 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony export */ __webpac
/***/ }),
/***/ "./src/assets/js/animated_logo.js":
/*!****************************************!*\
!*** ./src/assets/js/animated_logo.js ***!
\****************************************/
/***/ "./src/assets/js/animated_formes.js":
/*!******************************************!*\
!*** ./src/assets/js/animated_formes.js ***!
\******************************************/
/***/ (() => {
eval("\nfunction setLogoContainerSize() {\n let svgContainer = document.querySelector('#logo-animated');\n let svgElement = document.querySelector('#logo-animated svg');\n svgContainer.style.height = `${svgElement.clientHeight}px`;\n }\n setLogoContainerSize();\n window.addEventListener('resize', setLogoContainerSize);\n console.log('animated');\n\n let chemins = document.querySelectorAll('#logo-animated svg path');\n for (let chemin of chemins) {\n let length = chemin.getTotalLength();\n chemin.style.strokeDasharray = length;\n chemin.style.strokeDashoffset = length;\n }\n\n \n let consultationCouleur = document.querySelector('#consultation-couleur');\n let consultationNoir = document.querySelector('#consultation-noir');\n \n let quartierCouleur = document.querySelector('#quartier-couleur');\n let quartierNoir = document.querySelector('#quartier-noir');\n \n let consultationTranslate = 200;\n let quartierTranslate = -200;\n\n function startCountdown() {\n let startTime;\n let animationTime = 1800;\n\n function animate(timestamp) {\n if (!startTime) startTime = timestamp;\n const elapsedTime = timestamp - startTime;\n\n if (elapsedTime <= animationTime) {\n const animationPercent = elapsedTime / animationTime;\n animateLogo(animationPercent);\n requestAnimationFrame(animate);\n } else {\n animateLogo(1);\n }\n\n }\n requestAnimationFrame(animate);\n }\n\n // function animateLogo(animationPercent) {\n // for (let i = 0; i < chemins.length; i++) {\n // let draw = chemins[i].getTotalLength() * animationPercent;\n // chemins[i].style.strokeDashoffset = chemins[i].getTotalLength() - draw;\n // chemins[i].style.opacity = Math.min(animationPercent * ((chemins.length - 1) / i), 1);\n // }\n // let animationPercentCouleur = Math.min(animationPercent / 0.5, 1);\n // let animationPercentNoir = Math.max((animationPercent - 0.4) / 0.6, 0);\n\n // consultationCouleur.style.opacity = animationPercentCouleur;\n // consultationNoir.style.opacity = animationPercentNoir;\n // quartierCouleur.style.opacity = animationPercentCouleur;\n // quartierNoir.style.opacity = animationPercentNoir;\n\n // consultationNoir.style.transform = `translate(${consultationTranslate * (animationPercent - 1)}px, ${consultationTranslate * (animationPercent - 1)}px)`;\n\n // quartierNoir.style.transform = `translate(${quartierTranslate * (animationPercent - 1)}px, ${quartierTranslate * (animationPercent - 1)}px)`;\n // }\n\n function animateLogo(animationPercent) {\n // Calcul du pourcentage de l'animation principale\n let mainAnimationPercent = animationPercent;\n\n // Décalage pour l'animation des éléments noir\n let noirDelay = 0.7; // Exemple de décalage de 30% de l'animation principale\n let noirQuartierDelay = 0.1; // Exemple de décalage de 30% de l'animation principale\n\n // Calcul du pourcentage de l'animation pour les éléments noir avec décalage\n let animationPercentNoir = Math.max((mainAnimationPercent - noirDelay) / (1 - noirDelay), 0);\n\n for (let i = 0; i < chemins.length; i++) {\n let draw = chemins[i].getTotalLength() * mainAnimationPercent;\n chemins[i].style.strokeDashoffset = chemins[i].getTotalLength() - draw;\n chemins[i].style.opacity = Math.min(mainAnimationPercent * ((chemins.length - 1) / i), 1);\n }\n let animationPercentCouleur = Math.min(mainAnimationPercent / 0.5, 1);\n\n let animationPercentNoirQuartier = Math.max((mainAnimationPercent - noirQuartierDelay) / (1 - noirQuartierDelay), 0);\n\n for (let i = 0; i < chemins.length; i++) {\n let draw = chemins[i].getTotalLength() * mainAnimationPercent;\n chemins[i].style.strokeDashoffset = chemins[i].getTotalLength() - draw;\n chemins[i].style.opacity = Math.min(mainAnimationPercent * ((chemins.length - 1) / i), 1);\n }\n consultationCouleur.style.opacity = animationPercentCouleur;\n consultationNoir.style.opacity = animationPercentNoir;\n quartierCouleur.style.opacity = animationPercentCouleur;\n quartierNoir.style.opacity = animationPercentNoirQuartier;\n\n // Décalage des éléments noir dans le temps\n consultationNoir.style.transform = `translate(${consultationTranslate * (mainAnimationPercent - 1)}px, ${consultationTranslate * (mainAnimationPercent - 1)}px)`;\n quartierNoir.style.transform = `translate(${quartierTranslate * (mainAnimationPercent - 1)}px, ${quartierTranslate * (mainAnimationPercent - 1)}px)`;\n}\n\n\n\n window.addEventListener('load', startCountdown);\n\n\n//# sourceURL=webpack://quartiers_de_demain/./src/assets/js/animated_logo.js?");
eval("// document.addEventListener(\"DOMContentLoaded\", function() {\n// const pathToRotate = document.getElementById('path257');\n// let rotationAngle = 0;\n\n// // function rotatePath() {\n// // rotationAngle += 1; // Augmente l'angle de rotation\n// // pathToRotate.setAttribute('transform', `translate(1460.9323, 1201.6543) rotate(${rotationAngle}, 5, -10)`); // Applique la transformation de rotation\n// // }\n\n// // setInterval(rotatePath, 10); // Appelle la fonction rotatePath toutes les 10 millisecondes (ajustez selon vos besoins)\n// });\n\n//# sourceURL=webpack://quartiers_de_demain/./src/assets/js/animated_formes.js?");
/***/ }),
@ -115,7 +115,7 @@ eval("/**\n * @file\n * quartiers_de_demain behaviors.\n */\n (function (Drupal)
/******/ // Load entry module and return exports
/******/ // This entry module can't be inlined because the eval devtool is used.
/******/ __webpack_modules__["./src/assets/js/quartiers_de_demain.js"](0, {}, __webpack_require__);
/******/ __webpack_modules__["./src/assets/js/animated_logo.js"](0, {}, __webpack_require__);
/******/ __webpack_modules__["./src/assets/js/animated_formes.js"](0, {}, __webpack_require__);
/******/ var __webpack_exports__ = {};
/******/ __webpack_modules__["./src/assets/scss/quartiers_de_demain.scss"](0, __webpack_exports__, __webpack_require__);
/******/

52
web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css vendored
View File

@ -1061,6 +1061,11 @@ footer {
right: 20%;
top: 2rem;
}
@media (max-width: 810px) {
#home .__container-deroulement::before {
display: none;
}
}
#home .__container-deroulement::after {
content: url("../img/formes-animees-7.svg");
display: block;
@ -1069,6 +1074,11 @@ footer {
right: 26%;
bottom: -9rem;
}
@media (max-width: 810px) {
#home .__container-deroulement::after {
display: none;
}
}
#home .__container-deroulement h2 {
width: fit-content;
margin: auto;
@ -1447,23 +1457,16 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
#home .config_pages--type--diaporama-home {
position: relative;
}
#home .config_pages--type--diaporama-home::after {
content: url("../img/formes-animees-1.svg");
display: block;
width: 50%;
#home .config_pages--type--diaporama-home #svg1 {
position: absolute;
z-index: 5;
right: 11rem;
bottom: -6rem;
bottom: -8rem;
width: 50%;
}
@media (max-width: 810px) {
#home .config_pages--type--diaporama-home::after {
bottom: -5rem;
}
}
@media (max-width: 810px) {
#home .config_pages--type--diaporama-home::after {
bottom: -5rem;
#home .config_pages--type--diaporama-home #svg1 {
display: none;
}
}
#home .config_pages--type--diaporama-home .field_field_images img {
@ -1480,6 +1483,11 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
#home article.node-type-static {
padding-top: 6rem;
}
@media (max-width: 810px) {
#home article.node-type-static {
padding-top: 4rem;
}
}
#home article.node-type-static .field_title {
display: none;
}
@ -1499,6 +1507,11 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
left: 1rem;
bottom: 0;
}
@media (max-width: 810px) {
#home article.node-type-static .field_body::after {
display: none;
}
}
@media (max-width: 1090px) {
#home article.node-type-static .field_body {
flex-direction: column;
@ -1560,6 +1573,11 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
right: 15%;
bottom: 45%;
}
@media (max-width: 810px) {
#home article.node-type-static #paragraph-id--1::after {
display: none;
}
}
#home article.node-type-static #paragraph-id--1 .field_field_title {
font-family: "gilroy-bold";
}
@ -1800,6 +1818,11 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
left: 10%;
top: -6rem;
}
@media (max-width: 810px) {
#home article.node-type-static #paragraph-id--6::before {
display: none;
}
}
#home article.node-type-static #paragraph-id--6::after {
content: url("../img/formes-animees-5.svg");
display: block;
@ -1808,6 +1831,11 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h
right: 15%;
top: 3rem;
}
@media (max-width: 810px) {
#home article.node-type-static #paragraph-id--6::after {
display: none;
}
}
@media (max-width: 500px) {
#home article.node-type-static #paragraph-id--6 {
width: 90%;

6
web/themes/custom/quartiers_de_demain/dist/assets/img/formes-animees-1.svg vendored
View File

@ -4,11 +4,9 @@
<svg
version="1.1"
id="svg1"
width="100%"
height="100%"
width="1266.1704"
height="586.80396"
viewBox="0 0 1266.1704 586.80395"
preserveAspectRatio="xMinYMin meet"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

11
web/themes/custom/quartiers_de_demain/src/assets/js/animated_formes.js Normal file
View File

@ -0,0 +1,11 @@
// 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)
// });

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

@ -3,19 +3,17 @@
.config_pages--type--diaporama-home{
position: relative;
&::after{
content: url('../img/formes-animees-1.svg');
display: block;
width: 50%;
#svg1{
position: absolute;
z-index: 5;
right: 11rem;
bottom: -6rem;
bottom: -8rem;
width: 50%;
@media(max-width: 810px){
bottom: -5rem;
}
@media(max-width: 810px){
bottom: -5rem;
display: none;
// bottom: -4rem;
// right: 4rem;
// width: 72%;
}
}
.field_field_images{
@ -36,6 +34,9 @@
}
article.node-type-static{
padding-top: 6rem;
@media(max-width: 810px){
padding-top: 4rem;
}
.field_title{
display: none;
@ -54,12 +55,9 @@
z-index: 5;
left: 1rem;
bottom: 0;
// @media(max-width: 810px){
// bottom: -5rem;
// }
// @media(max-width: 810px){
// bottom: -5rem;
// }
@media(max-width: 810px){
display: none;
}
}
@media(max-width: 1090px){
flex-direction: column;
@ -112,6 +110,9 @@
z-index: 5;
right: 15%;
bottom: 45%;
@media(max-width: 810px){
display: none;
}
}
.field_field_title{
font-family: 'gilroy-bold';
@ -329,6 +330,10 @@
z-index: 5;
left: 10%;
top: -6rem;
@media(max-width: 810px){
display: none;
}
}
&::after{
content: url('../img/formes-animees-5.svg');
@ -337,6 +342,9 @@
z-index: 5;
right: 15%;
top: 3rem;
@media(max-width: 810px){
display: none;
}
}
@media(max-width: 500px){
width: 90%;

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

@ -21,6 +21,9 @@
z-index: 5;
right: 20%;
top: 2rem;
@media(max-width: 810px){
display: none;
}
}
&::after{
content: url('../img/formes-animees-7.svg');
@ -29,6 +32,9 @@
z-index: 5;
right: 26%;
bottom: -9rem;
@media(max-width: 810px){
display: none;
}
}
h2{
width: fit-content;

22
web/themes/custom/quartiers_de_demain/templates/config-pages--diaporama-home.html.twig Normal file
View File

@ -0,0 +1,22 @@
{#
/**
* @file
* Default theme implementation to display a config_page.
*
* @see template_preprocess_config_pages()
*
* @ingroup themeable
*/
#}
{%
set classes = [
'config_pages',
'config_pages--type--' ~ config_pages.bundle|clean_class,
view_mode ? 'config_pages--view-mode--' ~ view_mode|clean_class,
view_mode ? 'config_pages--' ~ config_pages.bundle|clean_class ~ '--' ~ view_mode|clean_class,
]
%}
<div{{ attributes.addClass(classes) }}>
{{ content }}
{% include active_theme_path() ~ '/dist/assets/img/formes-animees-1.svg' %}
</div>

101
web/themes/custom/quartiers_de_demain/templates/field--node--body--static.html.twig Normal file
View File

@ -0,0 +1,101 @@
{#
/**
* @file
* Default theme implementation for a field.
*
* To override output, copy the "field.html.twig" from the templates directory
* to your theme's directory and customize it, just like customizing other
* Drupal templates such as page.html.twig or node.html.twig.
*
* Instead of overriding the theming for all fields, you can also just override
* theming for a subset of fields using
* @link themeable Theme hook suggestions. @endlink For example,
* here are some theme hook suggestions that can be used for a field_foo field
* on an article node type:
* - field--node--field-foo--article.html.twig
* - field--node--field-foo.html.twig
* - field--node--article.html.twig
* - field--field-foo.html.twig
* - field--text-with-summary.html.twig
* - field.html.twig
*
* Available variables:
* - attributes: HTML attributes for the containing element.
* - label_hidden: Whether to show the field label or not.
* - title_attributes: HTML attributes for the title.
* - label: The label for the field.
* - multiple: TRUE if a field can contain multiple items.
* - items: List of all the field items. Each item contains:
* - attributes: List of HTML attributes for each item.
* - content: The field item's content.
* - entity_type: The entity type to which the field belongs.
* - field_name: The name of the field.
* - field_type: The type of the field.
* - label_display: The display settings for the label.
*
* @see template_preprocess_field()
*
* @ingroup themeable
*/
#}
{%
set title_classes = [
'field',
'field--name-' ~ field_name|clean_class,
'field--type-' ~ field_type|clean_class,
'field--label-' ~ label_display,
label_display == 'visually_hidden' ? 'visually-hidden',
]
%}
{%
set ancre_href = '#paragraph-id--' ~ paragraph.id()
%}
{# {% set svg_icon %}
<svg
version="1.1"
id="svg1"
width="308.18021"
height="342.06128"
viewBox="0 0 308.18021 342.06127"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs1" />
<g
id="g1"
transform="translate(-184.13477,-2385.4265)">
<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)" />
</g>
</svg> #}
{# {% endset %} #}
{% if label_hidden %}
{% if multiple %}
<div{{ attributes }}>
{% for item in items %}
<div{{ item.attributes }}>{{ item.content }}</div>
{% endfor %}
</div>
{% else %}
{% for item in items %}
<div{{ attributes }}>{{ item.content }}</div>
{% endfor %}
{% endif %}
{% else %}
<div{{ attributes }}>
<div{{ title_attributes.addClass(title_classes) }}>{{ label }}</div>
{% if multiple %}
<div>
{% endif %}
{% for item in items %}
<div{{ item.attributes }}>{{ item.content }}</div>
{# {{ svg_icon|raw }} #}
{% endfor %}
{% if multiple %}
</div>
{% endif %}
</div>
{% endif %}

3
web/themes/custom/quartiers_de_demain/webpack.config.js
View File

@ -5,7 +5,8 @@ let config = {
mode: 'development',
entry: [
"./src/assets/js/quartiers_de_demain.js",
"./src/assets/js/animated_logo.js",
// "./src/assets/js/animated_logo.js",
"./src/assets/js/animated_formes.js",
"./src/assets/scss/quartiers_de_demain.scss",
// "./src/assets/fonts/*",
// "./src/assets/css/animated_logo.css",