diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/bundle.js b/web/themes/custom/quartiers_de_demain/dist/assets/bundle.js index b7179ce..8aa459b 100644 --- a/web/themes/custom/quartiers_de_demain/dist/assets/bundle.js +++ b/web/themes/custom/quartiers_de_demain/dist/assets/bundle.js @@ -36,7 +36,7 @@ eval("\nfunction setLogoContainerSize() {\n let svgContainer = document.query \**********************************************/ /***/ (() => { -eval("/**\n * @file\n * quartiers_de_demain behaviors.\n */\n (function (Drupal) {\n\n 'use strict';\n \n Drupal.behaviors.quartiers_de_demain = {\n attach: function (context, settings) {\n console.log('It works!');\n }\n };\n } (Drupal));\n\n \n // jQuery(document).ready(function($){\n\n // $('.open-block').click(function(){\n // $(this).toggleClass('opened');\n\n // $('.header_nav_container').toggleClass('display-nav-opened');\n \n // if(mobile == true){\n // $(\"body\").css(\"overflow\",\"hidden\");\n // }\n\n // });\n \n // // Hide the header_nav_container when a link inside it is clicked\n // $('.header_nav_container li').click(function() {\n // $('.header_nav_container').fadeOut();\n // });\n\n\n\n\n // });\n\n //////// header ////////////\n\n document.addEventListener('DOMContentLoaded', function() {\n\n const header = document.querySelector('header');\n // Vérifier si la page a été rechargée ou si c'est une navigation interne\n const isFirstLoad = !performance.getEntriesByType(\"navigation\")[0].type.includes('back_forward');\n // Vérifier si nous sommes sur la page cible\n const isTargetPath = window.location.pathname === '/'; // Remplacez '/votre-chemin-cible' par le chemin réel\n\n // Si ce n'est pas la première charge ou si le chemin n'est pas le chemin cible, ajouter la classe immédiatement\n if (!isFirstLoad || !isTargetPath) {\n header.classList.add('header--collapsed-already');\n } else {\n // Sinon, appliquer la transition après un délai\n setTimeout(() => {\n header.classList.add('header--collapsed');\n }, 1000); // Attendre 1 seconde avant de réduire la taille du header\n }\n\n\n // Gestion du scroll pour afficher/masquer le header nav\n const headerNavContainer = document.querySelector('.header_nav_container');\n const headerLeftContainer = document.querySelector('header');\n let lastScrollTop = 0;\n let threshold = 100; // Change this value as needed\n let isHidden = false;\n \n function slideOut() {\n headerNavContainer.animate([\n { transform: 'translateX(0)' },\n { transform: 'translateX(-100%)' }\n ], {\n duration: 300,\n fill: 'forwards'\n });\n isHidden = true;\n }\n \n function slideIn() {\n headerNavContainer.animate([\n { transform: 'translateX(-100%)' },\n { transform: 'translateX(0)' }\n ], {\n duration: 300,\n fill: 'forwards'\n });\n isHidden = false;\n }\n \n function handleScroll() {\n let scrollTop = window.pageYOffset || document.documentElement.scrollTop;\n \n if (scrollTop > threshold && !isHidden) {\n slideOut();\n } else if (scrollTop <= threshold && isHidden) {\n slideIn();\n }\n \n lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; // For Mobile or negative scrolling\n }\n \n function handleTouchAndMouseEnter() {\n if (isHidden) {\n slideIn();\n }\n }\n \n function handleTouchAndMouseLeave() {\n if (lastScrollTop > threshold && !isHidden) {\n slideOut();\n }\n }\n \n window.addEventListener('scroll', handleScroll);\n \n // Mouse events for desktop\n headerLeftContainer.addEventListener('mouseenter', handleTouchAndMouseEnter);\n headerLeftContainer.addEventListener('mouseleave', handleTouchAndMouseLeave);\n \n // Touch events for tablets and mobile devices\n headerLeftContainer.addEventListener('touchstart', handleTouchAndMouseEnter);\n headerLeftContainer.addEventListener('touchend', handleTouchAndMouseLeave);\n \n // Initial check to see if we're at the top of the page\n if (window.pageYOffset <= threshold) {\n slideIn();\n } else {\n slideOut();\n }\n });\n \n \n \n\n// /////////////////\n//// ancre dans texte au click parragraphe correspondant arrive en dessous du header \n\n\n(function($, window) {\n var adjustAnchor = function() {\n var $anchor = $('.sidebar_first_container'),\n fixedElementHeight = 500;\n if ($anchor.length > 0) {\n $('html, body').stop().animate({scrollTop: $anchor.offset().top - fixedElementHeight }, 0);\n }\n };\n\n $(window).on('hashchange', function() {\n adjustAnchor();\n });\n\n\n //////////////////////// smooth apparition des textes\n\n\n function scrollReaveal(){\n\n const nodes = {\n logo : document.querySelectorAll('#logo-animated-container'),\n chapeau : document.querySelectorAll('.field_body'),\n paragraph: document.querySelectorAll('.field_field_textes .paragraph--type--static-parts'),\n }\n\n const showUp = {\n origin: 'bottom',\n delay: 100,\n duration: 1000,\n distance: '50px',\n easing: 'cubic-bezier(0.5, 0, 0, 1)'\n }\n\n const Show = {\n delay: 100,\n duration: 600,\n easing: 'cubic-bezier(0.5, 0, 0, 1)'\n }\n\n console.log(nodes);\n\n ScrollReveal().reveal(nodes.logo, Show);\n ScrollReveal().reveal(nodes.chapeau, showUp);\n ScrollReveal().reveal(nodes.paragraph, showUp);\n }\n\n\n $( document ).ready(function() {\n scrollReaveal();\n });\n\n\n\n ////////////////// Timeline ///////////////////////\n\n\n document.addEventListener('DOMContentLoaded', function() {\n let currentSlide = 0;\n\n function getVisibleSlides() {\n if (window.innerWidth <= 600) {\n return 1; // Show 1 slide on small screens\n } else if (window.innerWidth <= 900) {\n return 2; // Show 2 slides on medium screens\n } else {\n return 3; // Show 3 slides on large screens\n }\n }\n\n function showSlides(index) {\n const slides = document.querySelectorAll('.paragraph--type--phase-deroulement');\n const totalSlides = slides.length;\n const visibleSlides = getVisibleSlides();\n const maxSlide = totalSlides - visibleSlides + 1;\n\n // Adjust the index to ensure it stays within bounds\n currentSlide = Math.max(0.6, Math.min(index, maxSlide));\n\n // Calculate the offset for the transform\n const offset = currentSlide * -70 / visibleSlides;\n document.querySelector('.__timeline-content').style.transform = `translateX(${offset}%)`;\n\n // Enable/disable arrows based on the current slide\n document.getElementById('arrowPrev').disabled = currentSlide === 0;\n document.getElementById('arrowNext').disabled = currentSlide === maxSlide;\n }\n\n function prevSlide() {\n showSlides(currentSlide - 1);\n }\n\n function nextSlide() {\n showSlides(currentSlide + 1);\n }\n\n // Attach event listeners\n document.getElementById('arrowPrev').addEventListener('click', prevSlide);\n document.getElementById('arrowNext').addEventListener('click', nextSlide);\n\n // Initialize the first view of the slides\n showSlides(currentSlide);\n\n // Update month field to only show the first 3 letters\n document.querySelectorAll('.paragraph--type--phase-deroulement').forEach(function(paragraph) {\n const monthField = paragraph.querySelector('.field_field_date_de_moi div:nth-of-type(2)');\n if (monthField) {\n const monthText = monthField.textContent.trim();\n if (monthText.length >= 3) {\n monthField.textContent = monthText.slice(0, 3);\n }\n }\n });\n\n // Handle window resize\n window.addEventListener('resize', function() {\n showSlides(currentSlide); // Recalculate the slides on resize\n });\n // });\n\n\n // Initialize\n showSlides(currentSlide);\n });\n\n document.addEventListener('DOMContentLoaded', function() {\n // Iterate over each .date element\n document.querySelectorAll('.date').forEach(function(dateElement) {\n const date2Element = dateElement.querySelector('.date2');\n const yearElement = dateElement.querySelector('.field_field_date_de_annee');\n\n // Check if the .date2 element is empty\n if (date2Element && !date2Element.textContent.trim()) {\n // Add the .only class to the year element\n yearElement.classList.add('only');\n }\n });\n });\n\n\n\n /////////////////// caracteres body actus/////////////////////////\n\n document.addEventListener('DOMContentLoaded', function() {\n // Maximum number of characters to display\n const maxChars = 140; // Adjust this value as needed\n \n document.querySelectorAll('#actus-caroussel .node-type-actualite .field_body p').forEach(function(paragraph) {\n let text = paragraph.textContent.trim();\n if (text.length > maxChars) {\n let truncatedText = text.slice(0, maxChars) + '...';\n paragraph.textContent = truncatedText;\n }\n });\n });\n \n\n //////////// slideshow home ////////////////////////// \n\n $(document).ready(function(){\n $('.content-actus .view').slick({\n slidesToShow: 3,\n // slidesToScroll: 1,\n dots: false,\n arrows: true,\n centerMode: true,\n adaptiveHeight: true,\n // centerPadding: '100px',\n responsive: [\n {\n breakpoint: 810,\n settings: {\n slidesToShow: 1,\n adaptiveHeight: false,\n arrows: true,\n draggable: true,\n centerMode: true,\n }\n }]\n });\n console.log('salut slick home');\n\n });\n\n})(jQuery, window);\n\n\n\n\n//# sourceURL=webpack://quartiers_de_demain/./src/assets/js/quartiers_de_demain.js?"); +eval("/**\n * @file\n * quartiers_de_demain behaviors.\n */\n (function (Drupal) {\n\n 'use strict';\n \n Drupal.behaviors.quartiers_de_demain = {\n attach: function (context, settings) {\n console.log('It works!');\n }\n };\n } (Drupal));\n\n \n // jQuery(document).ready(function($){\n\n // $('.open-block').click(function(){\n // $(this).toggleClass('opened');\n\n // $('.header_nav_container').toggleClass('display-nav-opened');\n \n // if(mobile == true){\n // $(\"body\").css(\"overflow\",\"hidden\");\n // }\n\n // });\n \n // // Hide the header_nav_container when a link inside it is clicked\n // $('.header_nav_container li').click(function() {\n // $('.header_nav_container').fadeOut();\n // });\n\n\n\n\n // });\n\n //////// header ////////////\n document.addEventListener('DOMContentLoaded', function() {\n\n const header = document.querySelector('header');\n const logo = document.querySelector('#block-quartiers-de-demain-logoquartiersdedemain > div:nth-child(1) > div:nth-child(1) > a:nth-child(1) > svg:nth-child(1)');\n \n // Fonction pour démarrer l'animation du logo SVG\n function startLogoAnimation() {\n logo.classList.add('animated');\n }\n \n // Fonction pour arrêter l'animation du logo SVG\n function stopLogoAnimation() {\n logo.classList.remove('animated');\n }\n \n // Vérifier si le header a la classe header--collapse\n function checkHeaderCollapse() {\n if (header.classList.contains('header--collapsed')) {\n stopLogoAnimation();\n } else {\n startLogoAnimation();\n }\n }\n \n // Appeler la fonction au chargement initial\n checkHeaderCollapse();\n \n // Observer les changements de classe sur le header\n const observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(mutation) {\n if (mutation.attributeName === 'class') {\n checkHeaderCollapse();\n }\n });\n });\n \n observer.observe(header, { attributes: true });\n \n // Autres fonctions et initialisations ici\n });\n\n document.addEventListener('DOMContentLoaded', function() {\n\n const header = document.querySelector('header');\n // const logo = document.querySelector('.qdd-header');\n // console.log(logo);\n\n\n // Fonction pour démarrer l'animation du logo SVG\n // function startLogoAnimation() {\n // logo.classList.add('animated');\n // }\n\n // Fonction pour arrêter l'animation du logo SVG\n // function stopLogoAnimation() {\n // logo.classList.remove('animated');\n // }\n\n\n // Vérifier si la page a été rechargée ou si c'est une navigation interne\n const isFirstLoad = !performance.getEntriesByType(\"navigation\")[0].type.includes('back_forward');\n // Vérifier si nous sommes sur la page cible\n const isTargetPath = window.location.pathname === '/'; // Remplacez '/votre-chemin-cible' par le chemin réel\n\n // Si ce n'est pas la première charge ou si le chemin n'est pas le chemin cible, ajouter la classe immédiatement\n if (!isFirstLoad || !isTargetPath) {\n header.classList.add('header--collapsed-already');\n // logo.classList.remove('animated');\n stopLogoAnimation();\n } else {\n // Sinon, appliquer la transition après un délai\n setTimeout(() => {\n header.classList.add('header--collapsed');\n }, 5000); // Attendre 1 seconde avant de réduire la taille du header\n }\n\n \n\n // Gestion du scroll pour afficher/masquer le header nav\n const headerNavContainer = document.querySelector('.header_nav_container');\n const headerLeftContainer = document.querySelector('header');\n let lastScrollTop = 0;\n let threshold = 100; // Change this value as needed\n let isHidden = false;\n \n function slideOut() {\n headerNavContainer.animate([\n { transform: 'translateX(0)' },\n { transform: 'translateX(-100%)' }\n ], {\n duration: 300,\n fill: 'forwards'\n });\n isHidden = true;\n }\n \n function slideIn() {\n headerNavContainer.animate([\n { transform: 'translateX(-100%)' },\n { transform: 'translateX(0)' }\n ], {\n duration: 300,\n fill: 'forwards'\n });\n isHidden = false;\n }\n \n function handleScroll() {\n let scrollTop = window.pageYOffset || document.documentElement.scrollTop;\n \n if (scrollTop > threshold && !isHidden) {\n slideOut();\n } else if (scrollTop <= threshold && isHidden) {\n slideIn();\n }\n \n lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; // For Mobile or negative scrolling\n }\n \n function handleTouchAndMouseEnter() {\n if (isHidden) {\n slideIn();\n }\n }\n \n function handleTouchAndMouseLeave() {\n if (lastScrollTop > threshold && !isHidden) {\n slideOut();\n }\n }\n \n window.addEventListener('scroll', handleScroll);\n \n // Mouse events for desktop\n headerLeftContainer.addEventListener('mouseenter', handleTouchAndMouseEnter);\n headerLeftContainer.addEventListener('mouseleave', handleTouchAndMouseLeave);\n \n // Touch events for tablets and mobile devices\n headerLeftContainer.addEventListener('touchstart', handleTouchAndMouseEnter);\n headerLeftContainer.addEventListener('touchend', handleTouchAndMouseLeave);\n \n // Initial check to see if we're at the top of the page\n if (window.pageYOffset <= threshold) {\n slideIn();\n } else {\n slideOut();\n }\n });\n \n \n \n\n// /////////////////\n//// ancre dans texte au click parragraphe correspondant arrive en dessous du header \n\n\n(function($, window) {\n var adjustAnchor = function() {\n var $anchor = $('.sidebar_first_container'),\n fixedElementHeight = 500;\n if ($anchor.length > 0) {\n $('html, body').stop().animate({scrollTop: $anchor.offset().top - fixedElementHeight }, 0);\n }\n };\n\n $(window).on('hashchange', function() {\n adjustAnchor();\n });\n\n\n //////////////////////// smooth apparition des textes\n\n\n function scrollReaveal(){\n\n const nodes = {\n logo : document.querySelectorAll('#logo-animated-container'),\n chapeau : document.querySelectorAll('.field_body'),\n paragraph: document.querySelectorAll('.field_field_textes .paragraph--type--static-parts'),\n }\n\n const showUp = {\n origin: 'bottom',\n delay: 100,\n duration: 1000,\n distance: '50px',\n easing: 'cubic-bezier(0.5, 0, 0, 1)'\n }\n\n const Show = {\n delay: 100,\n duration: 600,\n easing: 'cubic-bezier(0.5, 0, 0, 1)'\n }\n\n console.log(nodes);\n\n ScrollReveal().reveal(nodes.logo, Show);\n ScrollReveal().reveal(nodes.chapeau, showUp);\n ScrollReveal().reveal(nodes.paragraph, showUp);\n }\n\n\n $( document ).ready(function() {\n scrollReaveal();\n });\n\n\n\n ////////////////// Timeline ///////////////////////\n\n\n document.addEventListener('DOMContentLoaded', function() {\n let currentSlide = 0;\n\n function getVisibleSlides() {\n if (window.innerWidth <= 600) {\n return 1; // Show 1 slide on small screens\n } else if (window.innerWidth <= 900) {\n return 2; // Show 2 slides on medium screens\n } else {\n return 3; // Show 3 slides on large screens\n }\n }\n\n function showSlides(index) {\n const slides = document.querySelectorAll('.paragraph--type--phase-deroulement');\n const totalSlides = slides.length;\n const visibleSlides = getVisibleSlides();\n const maxSlide = totalSlides - visibleSlides + 1;\n\n // Adjust the index to ensure it stays within bounds\n currentSlide = Math.max(0.6, Math.min(index, maxSlide));\n\n // Calculate the offset for the transform\n const offset = currentSlide * -70 / visibleSlides;\n document.querySelector('.__timeline-content').style.transform = `translateX(${offset}%)`;\n\n // Enable/disable arrows based on the current slide\n document.getElementById('arrowPrev').disabled = currentSlide === 0;\n document.getElementById('arrowNext').disabled = currentSlide === maxSlide;\n }\n\n function prevSlide() {\n showSlides(currentSlide - 1);\n }\n\n function nextSlide() {\n showSlides(currentSlide + 1);\n }\n\n // Attach event listeners\n document.getElementById('arrowPrev').addEventListener('click', prevSlide);\n document.getElementById('arrowNext').addEventListener('click', nextSlide);\n\n // Initialize the first view of the slides\n showSlides(currentSlide);\n\n // Update month field to only show the first 3 letters\n document.querySelectorAll('.paragraph--type--phase-deroulement').forEach(function(paragraph) {\n const monthField = paragraph.querySelector('.field_field_date_de_moi div:nth-of-type(2)');\n if (monthField) {\n const monthText = monthField.textContent.trim();\n if (monthText.length >= 3) {\n monthField.textContent = monthText.slice(0, 3);\n }\n }\n });\n\n // Handle window resize\n window.addEventListener('resize', function() {\n showSlides(currentSlide); // Recalculate the slides on resize\n });\n // });\n\n\n // Initialize\n showSlides(currentSlide);\n });\n\n document.addEventListener('DOMContentLoaded', function() {\n // Iterate over each .date element\n document.querySelectorAll('.date').forEach(function(dateElement) {\n const date2Element = dateElement.querySelector('.date2');\n const yearElement = dateElement.querySelector('.field_field_date_de_annee');\n\n // Check if the .date2 element is empty\n if (date2Element && !date2Element.textContent.trim()) {\n // Add the .only class to the year element\n yearElement.classList.add('only');\n }\n });\n });\n\n\n\n /////////////////// caracteres body actus/////////////////////////\n\n document.addEventListener('DOMContentLoaded', function() {\n // Maximum number of characters to display\n const maxChars = 140; // Adjust this value as needed\n \n document.querySelectorAll('#actus-caroussel .node-type-actualite .field_body p').forEach(function(paragraph) {\n let text = paragraph.textContent.trim();\n if (text.length > maxChars) {\n let truncatedText = text.slice(0, maxChars) + '...';\n paragraph.textContent = truncatedText;\n }\n });\n });\n \n\n //////////// slideshow home ////////////////////////// \n\n $(document).ready(function(){\n $('.content-actus .view').slick({\n slidesToShow: 3,\n // slidesToScroll: 1,\n dots: false,\n arrows: true,\n centerMode: true,\n adaptiveHeight: true,\n // centerPadding: '100px',\n responsive: [\n {\n breakpoint: 810,\n settings: {\n slidesToShow: 1,\n adaptiveHeight: false,\n arrows: true,\n draggable: true,\n centerMode: true,\n }\n }]\n });\n console.log('salut slick home');\n\n });\n\n})(jQuery, window);\n\n\n\n\n//# sourceURL=webpack://quartiers_de_demain/./src/assets/js/quartiers_de_demain.js?"); /***/ }) diff --git a/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css b/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css index e04d524..ae0988d 100644 --- a/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css +++ b/web/themes/custom/quartiers_de_demain/dist/assets/css/bundle.css @@ -1281,6 +1281,52 @@ footer { top: 60px; } +header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header.animated { + transform: scale(2); +} +header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header.animated .blink-blue { + animation-delay: 0.2s; + animation-name: blink; + animation-duration: 5s; +} +header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header.animated .blink-red { + animation-delay: 0.4s; + animation-name: blink; + animation-duration: 5s; +} +header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header.animated .blink-black { + animation-delay: 0.6s; + animation-name: blink; + animation-duration: 5s; +} +header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header.animated .blink-black2 { + animation-delay: 0.8s; + animation-name: blink; + animation-duration: 5s; +} +@keyframes blink { + 0%, 100% { + opacity: 0; + } + 50% { + opacity: 1; + } +} +header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-header.animated .consultation { + display: none; + animation-name: slideIn; + animation-delay: 1s; + animation-duration: 3s; +} +@keyframes slideIn { + 0% { + transform: translateX(0px); + } + 100% { + transform: translateX(600px); + } +} + /*pages*/ #home .content_container #block-quartiers-de-demain-titredepage { display: none; diff --git a/web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js b/web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js index 9204d16..e1a87fd 100644 --- a/web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js +++ b/web/themes/custom/quartiers_de_demain/src/assets/js/quartiers_de_demain.js @@ -38,10 +38,65 @@ // }); //////// header //////////// + document.addEventListener('DOMContentLoaded', function() { + + const header = document.querySelector('header'); + const logo = document.querySelector('#block-quartiers-de-demain-logoquartiersdedemain > div:nth-child(1) > div:nth-child(1) > a:nth-child(1) > svg:nth-child(1)'); + + // Fonction pour démarrer l'animation du logo SVG + function startLogoAnimation() { + logo.classList.add('animated'); + } + + // Fonction pour arrêter l'animation du logo SVG + function stopLogoAnimation() { + logo.classList.remove('animated'); + } + + // Vérifier si le header a la classe header--collapse + function checkHeaderCollapse() { + if (header.classList.contains('header--collapsed')) { + stopLogoAnimation(); + } else { + startLogoAnimation(); + } + } + + // Appeler la fonction au chargement initial + checkHeaderCollapse(); + + // Observer les changements de classe sur le header + const observer = new MutationObserver(function(mutations) { + mutations.forEach(function(mutation) { + if (mutation.attributeName === 'class') { + checkHeaderCollapse(); + } + }); + }); + + observer.observe(header, { attributes: true }); + + // Autres fonctions et initialisations ici + }); document.addEventListener('DOMContentLoaded', function() { const header = document.querySelector('header'); + // const logo = document.querySelector('.qdd-header'); + // console.log(logo); + + + // Fonction pour démarrer l'animation du logo SVG + // function startLogoAnimation() { + // logo.classList.add('animated'); + // } + + // Fonction pour arrêter l'animation du logo SVG + // function stopLogoAnimation() { + // logo.classList.remove('animated'); + // } + + // Vérifier si la page a été rechargée ou si c'est une navigation interne const isFirstLoad = !performance.getEntriesByType("navigation")[0].type.includes('back_forward'); // Vérifier si nous sommes sur la page cible @@ -50,13 +105,16 @@ // Si ce n'est pas la première charge ou si le chemin n'est pas le chemin cible, ajouter la classe immédiatement if (!isFirstLoad || !isTargetPath) { header.classList.add('header--collapsed-already'); + // logo.classList.remove('animated'); + stopLogoAnimation(); } else { // Sinon, appliquer la transition après un délai setTimeout(() => { header.classList.add('header--collapsed'); - }, 1000); // Attendre 1 seconde avant de réduire la taille du header + }, 5000); // Attendre 1 seconde avant de réduire la taille du header } + // Gestion du scroll pour afficher/masquer le header nav const headerNavContainer = document.querySelector('.header_nav_container'); diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/animation-logo-header.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/animation-logo-header.scss new file mode 100644 index 0000000..a9d3653 --- /dev/null +++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/animation-logo-header.scss @@ -0,0 +1,73 @@ +header{ + #block-quartiers-de-demain-logoquartiersdedemain{ + .field_field_logo{ + .qdd-header{ + + &.animated{ + transform: scale(2); + .blink-blue { + // animation: blink 3s 3; + animation-delay: 0.2s; + animation-name: blink; + animation-duration: 5s; + } + + .blink-red { + animation-delay: 0.4s; + animation-name: blink; + animation-duration: 5s; + } + + .blink-black { + animation-delay: 0.6s; + animation-name: blink; + animation-duration: 5s; + } + + .blink-black2 { + animation-delay: 0.8s; + animation-name: blink; + animation-duration: 5s; + } + @keyframes blink { + 0%, 100% { + opacity: 0; + } + 50% { + opacity: 1; + } + } + + .consultation{ + display: none; + animation-name: slideIn; + animation-delay: 1s; + animation-duration: 3s; + } + + @keyframes slideIn { + 0%{ + transform: translateX(0px) ; + } + 100%{ + transform: translateX(600px) ; + } + } + + // @keyframes scale { + // 0%{ + // transform: scale(2); + // } + // 90%{transform: scale(2);} + // 100% { + // transform: scale(1); + // } + // } + + + } + } + + } + } +} \ No newline at end of file diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/header.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/header.scss index 05a1e0c..e1c6bf5 100644 --- a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/header.scss +++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/header.scss @@ -218,4 +218,16 @@ header{ transform-origin: bottom right; /* Origine de la transformation à l'angle bas droit */ } -} \ No newline at end of file +} +// /* Initial state of SVG */ +// .qdd-animated{ +// opacity: 1; +// transform: scale(0.5); +// transition: opacity 0.5s, transform 0.5s; +// } + +// /* Animated state of SVG */ +// .header:not(.header--collapsed .header--collapsed-already) .qdd-animated { +// opacity: 1; +// transform: scale(1); +// } \ No newline at end of file diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/quartiers_de_demain.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/quartiers_de_demain.scss index f4157d3..83bc256 100644 --- a/web/themes/custom/quartiers_de_demain/src/assets/scss/quartiers_de_demain.scss +++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/quartiers_de_demain.scss @@ -29,6 +29,8 @@ @import "partials/slick"; @import "partials/timeline"; @import "partials/actu-caroussel-home"; +@import "partials/animation-logo-header"; + // @import "partials/slick_custom"; diff --git a/web/themes/custom/quartiers_de_demain/templates/field--block-content--logo-link.html.twig b/web/themes/custom/quartiers_de_demain/templates/field--block-content--logo-link.html.twig index 6544cb0..b334505 100644 --- a/web/themes/custom/quartiers_de_demain/templates/field--block-content--logo-link.html.twig +++ b/web/themes/custom/quartiers_de_demain/templates/field--block-content--logo-link.html.twig @@ -40,6 +40,7 @@ {# Define the SVG icon #} {% set svg_icon %} @@ -154,6 +157,7 @@ id="g1424" transform="translate(1405.2317,1559.5776)"> @@ -162,6 +166,7 @@ id="g1428" transform="translate(1148.891,1559.5776)"> @@ -170,6 +175,7 @@ id="g1432" transform="translate(1059.3877,1523.8738)"> @@ -178,6 +184,7 @@ id="g1436" transform="translate(842.5666,1525.142)"> @@ -186,6 +193,7 @@ id="g1440" transform="translate(1246.5872,1623.5623)"> @@ -194,6 +202,7 @@ id="g1444" transform="translate(1050.5181,1658.2612)"> @@ -202,6 +211,7 @@ id="g1448" transform="translate(1328.6346,1658.2612)"> @@ -210,6 +220,7 @@ id="g1452" transform="translate(910.89509,1659.3624)"> @@ -218,15 +229,18 @@ id="g1456" transform="translate(1121.2274,1648.2275)"> @@ -234,6 +248,7 @@ id="g1464" transform="translate(1022.9188,1576.3727)"> @@ -242,6 +257,7 @@ id="g1468" transform="translate(817.5048,1596.5179)"> @@ -250,6 +266,7 @@ id="g1472" transform="translate(923.2098,1609.196)"> @@ -258,6 +275,7 @@ id="g1476" transform="translate(1099.4768,1628.9966)"> @@ -266,15 +284,18 @@ id="g1480" transform="translate(1161.8838,1648.1403)"> @@ -282,6 +303,7 @@ id="g1488" transform="translate(1377.5935,1628.9966)"> @@ -290,15 +312,18 @@ id="g1492" transform="translate(1474.0773,1591.0393)"> @@ -306,6 +331,7 @@ id="g1500" transform="translate(1148.891,1514.2576)"> @@ -314,11 +340,13 @@ id="g1504" transform="translate(1338.3157,1477.0637)"> @@ -326,6 +354,7 @@ id="g1510" transform="translate(1405.2317,1513.6991)"> @@ -334,6 +363,7 @@ id="g1514" transform="translate(781.6142,1575.7473)"> @@ -342,6 +372,7 @@ id="g1518" transform="translate(1445.9412,1575.62)"> @@ -350,6 +381,7 @@ id="g1522" transform="translate(747.5991,1522.7208)"> @@ -358,6 +390,7 @@ id="g1526" transform="translate(746.9782,1556.9387)"> @@ -366,6 +399,7 @@ id="g1530" transform="translate(960.9559,1530.3488)"> @@ -374,6 +408,7 @@ id="g1534" transform="translate(960.335,1559.7245)">