From adca214c4b0e0662e5bf2b5ec081fa07ebe808f4 Mon Sep 17 00:00:00 2001 From: ouidade Date: Wed, 17 Jul 2024 21:29:18 +0200 Subject: [PATCH] timeline month --- .../quartiers_de_demain/dist/assets/bundle.js | 4 +- .../dist/assets/css/bundle.css | 120 +++++++++---- .../src/assets/js/animated_formes.js | 36 +++- .../src/assets/js/quartiers_de_demain.js | 6 +- .../src/assets/scss/pages/home.scss | 170 +----------------- .../scss/partials/animation-pilliers.scss | 99 ++++++++++ .../assets/scss/partials/formes-animees.scss | 8 +- .../src/assets/scss/partials/timeline.scss | 9 +- .../src/assets/scss/quartiers_de_demain.scss | 2 + 9 files changed, 236 insertions(+), 218 deletions(-) create mode 100644 web/themes/custom/quartiers_de_demain/src/assets/scss/partials/animation-pilliers.scss 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 207774f..ce7e334 100644 --- a/web/themes/custom/quartiers_de_demain/dist/assets/bundle.js +++ b/web/themes/custom/quartiers_de_demain/dist/assets/bundle.js @@ -26,7 +26,7 @@ eval("__webpack_require__.r(__webpack_exports__);\n/* harmony default export */ \******************************************/ /***/ (function() { -eval("document.addEventListener('scroll', function() {\n const scrolled = window.pageYOffset;\n const background = document.getElementById('background-animated');\n \n // Adjust this value to control the speed of the parallax effect\n const parallaxSpeed = 0.2;\n background.style.transform = 'translateY(' + (scrolled * parallaxSpeed) + 'px)';\n});\n\n\n\n\n //ANimation Pilliers \nconst svg = document.querySelector('#paragraph-id--7 .pilliers-animes');\n\n// Configuration de l'observateur d'intersection\nconst 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('svg-visible');\n } else {\n // Optionnel : Retirez la classe si nécessaire\n svg.classList.remove('svg-visible');\n }\n });\n});\n\n// Observer l'élément SVG\nobserver.observe(svg);\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 \n // Adjust this value to control the speed of the parallax effect\n const parallaxSpeed = 0.2;\n background.style.transform = 'translateY(' + (scrolled * parallaxSpeed) + 'px)';\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//ANimation Pilliers \nconst svg = document.querySelector('#paragraph-id--7 .colone-picto');\n\n// Configuration de l'observateur d'intersection\nconst 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 // svg.classList.add('invisible');\n\n // }\n });\n});\n\n// Observer l'élément SVG\nobserver.observe(svg);\n\n\n//# sourceURL=webpack://quartiers_de_demain/./src/assets/js/animated_formes.js?"); /***/ }), @@ -36,7 +36,7 @@ eval("document.addEventListener('scroll', function() {\n const scrolled = win \**********************************************/ /***/ (function() { -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 //////// start 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 const headerNavContainer = document.querySelector('.header_nav_container');\n const isFirstLoad = !performance.getEntriesByType(\"navigation\")[0].type.includes('back_forward');\n const isTargetPath = window.location.pathname === '/';\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 if (header.classList.contains('header--collapsed-already')) {\n stopLogoAnimation();\n } else {\n startLogoAnimation();\n }\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 observer.observe(header, { attributes: true });\n \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);\n }\n\n ////////////// \n\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 slideDown() {\n // headerNavContainer.style.display = 'block';\n headerNavContainer.animate([\n { transform: 'translateY(0%)' },\n { transform: 'translateY(+100%)' }\n ], {\n duration: 300,\n fill: 'forwards'\n });\n isHidden = false;\n }\n \n function slideUp() {\n headerNavContainer.animate([\n { transform: 'translateY(100%)' },\n { transform: 'translateY(0%)' }\n ], {\n duration: 300,\n fill: 'forwards'\n }).onfinish = function() {\n // headerNavContainer.style.display = 'none';\n };\n isHidden = true;\n }\n // Fonction pour ajuster la hauteur du header lors du défilement\n function adjustHeaderHeight() {\n if (window.scrollY > 0) {\n header.classList.add('shrink');\n } else {\n header.classList.remove('shrink');\n }\n }\n\n function handleScroll() {\n let scrollTop = window.pageYOffset || document.documentElement.scrollTop;\n const isMobile = window.innerWidth < 811;\n\n if (scrollTop > threshold && !isHidden) {\n if (isMobile) {\n slideUp();\n } else {\n slideOut();\n }\n } else if (scrollTop <= threshold && isHidden) {\n if (isMobile) {\n slideDown();\n } else {\n slideIn();\n }\n }\n \n \n lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; // For Mobile or negative scrolling\n }\n \n function handleTouchAndMouseEnter() {\n if (isHidden) {\n if (window.innerWidth < 811) {\n slideDown();\n } else {\n slideIn();\n }\n }\n }\n \n function handleTouchAndMouseLeave() {\n if (lastScrollTop > threshold && !isHidden) {\n if (window.innerWidth < 811) {\n slideUp();\n } else {\n slideOut();\n }\n }\n }\n \n window.addEventListener('scroll', handleScroll);\n window.addEventListener('scroll', adjustHeaderHeight);\n \n // Mouse events for desktop\n header.addEventListener('mouseenter', handleTouchAndMouseEnter);\n header.addEventListener('mouseleave', handleTouchAndMouseLeave);\n \n // Touch events for tablets and mobile devices\n header.addEventListener('touchstart', handleTouchAndMouseEnter);\n header.addEventListener('touchend', handleTouchAndMouseLeave);\n \n // Initial check to see if we're at the top of the page\n if (window.pageYOffset <= threshold) {\n if (window.innerWidth < 811) {\n slideDown();\n } else { \n slideIn();\n } \n } else {\n if (window.innerWidth < 811) {\n slideUp();\n } else {\n slideIn();\n }\n }\n \n });\n\n //////// end header ////////////\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 //////////////////////// start script smooth apparition des textes /////////////////\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 enjeux : document.querySelectorAll('.field_field_textes .paragraph--type--static-parts .enjeux'),\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 ScrollReveal().reveal(nodes.enjeux, showUp);\n }\n\n\n $( document ).ready(function() {\n scrollReaveal();\n });\n\n //////////////////////// end script smooth apparition des textes /////////////////\n\n //////////////////// start Timeline script ///////////////////////\n\n\n document.addEventListener('DOMContentLoaded', function() {\n let currentSlide = 0;\n\n //// responsive ///\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 const offsetmobile = currentSlide * -100 / visibleSlides;\n if (window.innerWidth <= 600){\n document.querySelector('.__timeline-content').style.transform = `translateX(${offsetmobile}%)`;\n } else {\n document.querySelector('.__timeline-content').style.transform = `translateX(${offset}%)`;\n }\n \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 // 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 // for each .date element add or remove ::before \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 // 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\n //////////////////////// end Timeline script /////////////////////////////////////////////\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 //////// start 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 const headerNavContainer = document.querySelector('.header_nav_container');\n const isFirstLoad = !performance.getEntriesByType(\"navigation\")[0].type.includes('back_forward');\n const isTargetPath = window.location.pathname === '/';\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 if (header.classList.contains('header--collapsed-already')) {\n stopLogoAnimation();\n } else {\n startLogoAnimation();\n }\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 observer.observe(header, { attributes: true });\n \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);\n }\n\n ////////////// \n\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 slideDown() {\n // headerNavContainer.style.display = 'block';\n headerNavContainer.animate([\n { transform: 'translateY(0%)' },\n { transform: 'translateY(+100%)' }\n ], {\n duration: 300,\n fill: 'forwards'\n });\n isHidden = false;\n }\n \n function slideUp() {\n headerNavContainer.animate([\n { transform: 'translateY(100%)' },\n { transform: 'translateY(0%)' }\n ], {\n duration: 300,\n fill: 'forwards'\n }).onfinish = function() {\n // headerNavContainer.style.display = 'none';\n };\n isHidden = true;\n }\n // Fonction pour ajuster la hauteur du header lors du défilement\n function adjustHeaderHeight() {\n if (window.scrollY > 0) {\n header.classList.add('shrink');\n } else {\n header.classList.remove('shrink');\n }\n }\n\n function handleScroll() {\n let scrollTop = window.pageYOffset || document.documentElement.scrollTop;\n const isMobile = window.innerWidth < 811;\n\n if (scrollTop > threshold && !isHidden) {\n if (isMobile) {\n slideUp();\n } else {\n slideOut();\n }\n } else if (scrollTop <= threshold && isHidden) {\n if (isMobile) {\n slideDown();\n } else {\n slideIn();\n }\n }\n \n \n lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; // For Mobile or negative scrolling\n }\n \n function handleTouchAndMouseEnter() {\n if (isHidden) {\n if (window.innerWidth < 811) {\n slideDown();\n } else {\n slideIn();\n }\n }\n }\n \n function handleTouchAndMouseLeave() {\n if (lastScrollTop > threshold && !isHidden) {\n if (window.innerWidth < 811) {\n slideUp();\n } else {\n slideOut();\n }\n }\n }\n \n window.addEventListener('scroll', handleScroll);\n window.addEventListener('scroll', adjustHeaderHeight);\n \n // Mouse events for desktop\n header.addEventListener('mouseenter', handleTouchAndMouseEnter);\n header.addEventListener('mouseleave', handleTouchAndMouseLeave);\n \n // Touch events for tablets and mobile devices\n header.addEventListener('touchstart', handleTouchAndMouseEnter);\n header.addEventListener('touchend', handleTouchAndMouseLeave);\n \n // Initial check to see if we're at the top of the page\n if (window.pageYOffset <= threshold) {\n if (window.innerWidth < 811) {\n slideDown();\n } else { \n slideIn();\n } \n } else {\n if (window.innerWidth < 811) {\n slideUp();\n } else {\n slideIn();\n }\n }\n \n });\n\n //////// end header ////////////\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 //////////////////////// start script smooth apparition des textes /////////////////\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 enjeux : document.querySelectorAll('.field_field_textes .paragraph--type--static-parts .enjeux'),\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 ScrollReveal().reveal(nodes.enjeux, showUp);\n }\n\n\n $( document ).ready(function() {\n scrollReaveal();\n });\n\n //////////////////////// end script smooth apparition des textes /////////////////\n\n //////////////////// start Timeline script ///////////////////////\n\n\n document.addEventListener('DOMContentLoaded', function() {\n let currentSlide = 0;\n\n //// responsive ///\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 const offsetmobile = currentSlide * -100 / visibleSlides;\n if (window.innerWidth <= 600){\n document.querySelector('.__timeline-content').style.transform = `translateX(${offsetmobile}%)`;\n } else {\n document.querySelector('.__timeline-content').style.transform = `translateX(${offset}%)`;\n }\n \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 // 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 === \"juillet\") {\n monthField.textContent = monthText.slice(0, 4);\n monthField.classList.add('after');\n } else if (monthText.length > 3) {\n monthField.textContent = monthText.slice(0, 3);\n monthField.classList.add('after');\n }\n }\n });\n\n // for each .date element add or remove ::before \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 // 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\n //////////////////////// end Timeline script /////////////////////////////////////////////\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 703a7d5..9ed19d2 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 @@ -1204,7 +1204,7 @@ footer { font-size: 4rem; } } -#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .field_field_date_de_moi::after { +#home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .field_field_date_de_moi .after::after { content: "."; } #home .timeline .__timeline-content .__paragraphs .paragraph--type--phase-deroulement .date .annee { @@ -1479,12 +1479,12 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h #home #background-animated { position: absolute; - top: 1000px; + top: -400px; 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 */ + z-index: 2; /* S'assure que l'élément soit au-dessus */ } @media (max-width: 1400px) { #home #background-animated { @@ -1494,16 +1494,95 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h #home #background-animated svg { max-width: 100%; position: relative; - top: -1500px; } #home .layout-content { position: relative; - z-index: 2; /* S'assure que le contenu soit au-dessus des animations */ + z-index: 1; /* S'assure que le contenu soit au-dessus des animations */ } #home .layout-container.home { position: relative; } +#home .visible h5:nth-of-type(1) { + animation-delay: 1s; + animation-name: Appear; + animation-duration: 1s; +} +#home .visible svg:nth-of-type(1) { + animation-delay: 2s; /* Start after h5 (1s) + h5 duration (1s) */ + animation-name: Appear; + animation-duration: 5s; /* Assuming svg animation is 5s */ +} +#home .visible p:nth-of-type(1) { + animation-delay: 7s; /* Start after svg (2s) + svg duration (5s) */ + animation-name: Appear; + animation-duration: 1s; +} +#home .visible h5:nth-of-type(2) { + animation-delay: 8s; /* Start after p (7s) + p duration (1s) */ + animation-name: Appear; + animation-duration: 1s; +} +#home .visible svg:nth-of-type(2) { + animation-delay: 9s; /* Start after h5 (8s) + h5 duration (1s) */ + animation-name: Appear; + animation-duration: 5s; /* Assuming svg animation is 5s */ +} +#home .visible p:nth-of-type(2) { + animation-delay: 14s; /* Start after svg (9s) + svg duration (5s) */ + animation-name: Appear; + animation-duration: 1s; +} +#home .visible h5:nth-of-type(3) { + animation-delay: 15s; /* Start after p (14s) + p duration (1s) */ + animation-name: Appear; + animation-duration: 1s; +} +#home .visible svg:nth-of-type(3) { + animation-delay: 16s; /* Start after h5 (15s) + h5 duration (1s) */ + animation-name: Appear; + animation-duration: 5s; /* Assuming svg animation is 5s */ +} +#home .visible p:nth-of-type(3) { + animation-delay: 21s; /* Start after svg (16s) + svg duration (5s) */ + animation-name: Appear; + animation-duration: 1s; +} +@keyframes Appear { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} +#home #paragraph-id--7 .colone-picto svg #pillier-1-path365 { + stroke-dasharray: 1000; /* Longueur totale du chemin */ + stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */ + animation: fillAnimation 5s ease-in-out forwards; /* Animation de remplissage sur 2 secondes */ + animation-delay: 5s; +} +#home #paragraph-id--7 .colone-picto svg #pillier-2-path367 { + stroke-dasharray: 0; /* Longueur totale du chemin */ + stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */ + animation: fillAnimation 5s ease-in-out forwards; /* Animation de remplissage sur 2 secondes */ + animation-delay: 5s; +} +#home #paragraph-id--7 .colone-picto svg #pillier-3-path369 { + stroke-dasharray: 1000; /* Longueur totale du chemin */ + stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */ + animation: fillAnimation 5s ease-in-out forwards; /* Animation de remplissage sur 2 secondes */ + animation-delay: 5s; +} +@keyframes fillAnimation { + from { + stroke-dashoffset: 1000; /* Début du chemin de décalage complet */ + } + to { + stroke-dashoffset: 0; /* Aucun décalage, le chemin est complètement visible */ + } +} + /*pages*/ #home .config_pages--type--diaporama-home { position: relative; @@ -1547,6 +1626,7 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h #home article.node-type-static .field_body > p:nth-child(1) { margin-bottom: 0; flex: 1 100%; + z-index: 6; font-size: 1.5rem; } @media (max-width: 1090px) { @@ -2087,36 +2167,6 @@ header #block-quartiers-de-demain-logoquartiersdedemain .field_field_logo .qdd-h position: relative; } } -#home article.node-type-static #paragraph-id--7 .colone-picto svg #pillier-1-path365 { - stroke-dasharray: 1000; /* Longueur totale du chemin */ - stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */ - animation: fillAnimation 8s ease-in-out infinite; /* Animation de remplissage sur 2 secondes */ - animation-delay: 5s; - animation-direction: alternate; /* Animation en aller-retour */ -} -#home article.node-type-static #paragraph-id--7 .colone-picto svg #pillier-2-path367 { - stroke-dasharray: 0; /* Longueur totale du chemin */ - stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */ - animation: fillAnimation 8s ease-in-out infinite; /* Animation de remplissage sur 2 secondes */ - animation-delay: 10s; - animation-direction: alternate; /* Animation en aller-retour */ -} -#home article.node-type-static #paragraph-id--7 .colone-picto svg #pillier-3-path369 { - stroke-dasharray: 0; /* Longueur totale du chemin */ - stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */ - animation: fillAnimation 8s ease-in-out; /* Animation de remplissage sur 2 secondes */ - animation-delay: 15s; - animation-direction: alternate; /* Animation en aller-retour */ - animation-iteration-count: infinite; /* Animation infinie */ -} -@keyframes fillAnimation { - from { - stroke-dashoffset: 1000; /* Début du chemin de décalage complet */ - } - to { - stroke-dashoffset: 0; /* Aucun décalage, le chemin est complètement visible */ - } -} #home .paragraph--type--static-parts:not(#paragraph-id--7) #svg1 { display: none; } diff --git a/web/themes/custom/quartiers_de_demain/src/assets/js/animated_formes.js b/web/themes/custom/quartiers_de_demain/src/assets/js/animated_formes.js index 02caad4..fa9f27b 100644 --- a/web/themes/custom/quartiers_de_demain/src/assets/js/animated_formes.js +++ b/web/themes/custom/quartiers_de_demain/src/assets/js/animated_formes.js @@ -11,18 +11,42 @@ document.addEventListener('scroll', function() { //ANimation Pilliers -const svg = document.querySelector('#paragraph-id--7 .pilliers-animes'); +// const svg = document.querySelector('#paragraph-id--7 .colone-picto'); + +// // Configuration de l'observateur d'intersection +// const observer = new IntersectionObserver(entries => { +// entries.forEach(entry => { +// if (entry.isIntersecting) { +// // Ajoute une classe lorsque l'élément est visible +// svg.classList.add('visible'); +// } else { +// // Optionnel : Retirez la classe si nécessaire +// svg.classList.remove('visible'); +// } +// }); +// }); + +// // Observer l'élément SVG +// observer.observe(svg); + + +//ANimation Pilliers +const svg = document.querySelector('#paragraph-id--7 .colone-picto'); // Configuration de l'observateur d'intersection const observer = new IntersectionObserver(entries => { entries.forEach(entry => { if (entry.isIntersecting) { // Ajoute une classe lorsque l'élément est visible - svg.classList.add('svg-visible'); - } else { - // Optionnel : Retirez la classe si nécessaire - svg.classList.remove('svg-visible'); - } + // svg.classList.remove('invisible'); + svg.classList.add('visible'); + } + // else { + // // Optionnel : Retirez la classe si nécessaire + // svg.classList.remove('visible'); + // svg.classList.add('invisible'); + + // } }); }); 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 24d3f6d..05cdc8c 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 @@ -344,8 +344,12 @@ const monthField = paragraph.querySelector('.field_field_date_de_moi div:nth-of-type(2)'); if (monthField) { const monthText = monthField.textContent.trim(); - if (monthText.length >= 3) { + if (monthText === "juillet") { + monthField.textContent = monthText.slice(0, 4); + monthField.classList.add('after'); + } else if (monthText.length > 3) { monthField.textContent = monthText.slice(0, 3); + monthField.classList.add('after'); } } }); diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/home.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/home.scss index 810df16..2e31dd5 100644 --- a/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/home.scss +++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/pages/home.scss @@ -42,6 +42,7 @@ > p:nth-child(1){ margin-bottom: 0; flex: 1 100%; + z-index: 6; font-size: 1.5rem; @media(max-width: 1090px){ font-size: 1.3rem; @@ -312,138 +313,6 @@ } } } - // #paragraph-id--21, - // #paragraph-id--28{ ///// Les enjeux 2 - // &.paragraph--type--static-parts{padding-top: 0 !important;} - // background-color: #edefe8; - // position: relative; - // padding-bottom: 6rem; - // .field_field_title{ - // font-family: 'gilroy-bold'; - // } - // .field_field_picto{ - // display: none; - // } - // .field_field_texte{ - // width: 65%; - // margin: auto; - // @media(max-width: 1090px){ - // width: 80%; - // } - // .colone-picto{ - // display: flex; - // flex-direction: row; - // flex-wrap: wrap; - // justify-content: flex-start; - // padding-left: 6rem; - // @media(max-width: 1090px){ - // padding-left: 1.5rem; - // } - - // h3{ - // flex: 0 80%; - // color: #0833c2ff; - // display: flex; - // flex-direction: column; - // font-size: 1rem; - // padding-top: 3rem; - // border-top: solid 1px #0833c2ff; - // } - - // p{ - // padding-right: 1rem; - // padding-bottom: 1rem; - // flex: 1 30%; - // max-width: 30%; - // display: flex; - // flex-direction: column; - // @media(max-width: 1090px){ - // padding-right: 1rem; - // flex: 1 30%; - // max-width: 50%; - // font-size: 0.9rem; - // } - - // ///////// - // &:nth-of-type(1)::before{ - // background-image: url("../img/ampoule.svg"); - // background-size: 90px 100px; - // background-repeat: no-repeat; - // display: inline-block; - // width: 100px; - // height: 100px; - // content: ""; - // padding-bottom: 1rem; - // @media(max-width: 810px){ - // width: 50px; - // height: 50px; - // background-size: 50px 50px; - // } - // } - // &:nth-of-type(2)::before{ - // background-image: url("../img/bonhome.svg"); - // background-size: 90px 100px; - // background-repeat: no-repeat; - // display: inline-block; - // width: 100px; - // height: 100px; - // content: ""; - // padding-bottom: 1rem; - // @media(max-width: 810px){ - // width: 50px; - // height: 50px; - // background-size: 50px 50px; - // } - // } - // &:nth-of-type(3)::before{ - // background-image: url("../img/feuilles.svg"); - // background-size: 90px 100px; - // background-repeat: no-repeat; - // display: inline-block; - // width: 100px; - // height: 100px; - // content: ""; - // padding-bottom: 1rem; - // @media(max-width: 810px){ - // width: 50px; - // height: 50px; - // background-size: 50px 50px; - // } - // } - // &:nth-of-type(4)::before{ - // background-image: url("../img/calendrier.svg"); - // background-size: 90px 100px; - // background-repeat: no-repeat; - // display: inline-block; - // width: 100px; - // height: 100px; - // content: ""; - // padding-bottom: 1rem; - // @media(max-width: 810px){ - // width: 50px; - // height: 50px; - // background-size: 50px 50px; - // } - // } - // &:nth-of-type(5)::before{ - // background-image: url("../img/crayons.svg"); - // background-size: 60px 100px; - // background-repeat: no-repeat; - // display: inline-block; - // width: 100px; - // height: 100px; - // content: ""; - // padding-bottom: 1rem; - // @media(max-width: 810px){ - // width: 50px; - // height: 50px; - // background-size: 50px 50px; - // } - // } - // } - // } - // } - // } #paragraph-id--6{ /////// quartier 2030 @@ -541,6 +410,7 @@ @media(max-width: 1090px){ padding-left: 0; } + h5{ font-size: 5rem; @@ -681,43 +551,7 @@ } - /////////////////animation pilliers ////////////// - #paragraph-id--7 .colone-picto svg #pillier-1-path365{ - stroke-dasharray: 1000; /* Longueur totale du chemin */ - stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */ - animation: fillAnimation 8s ease-in-out infinite; /* Animation de remplissage sur 2 secondes */ - animation-delay: 5s; - animation-direction: alternate; /* Animation en aller-retour */ - - } - #paragraph-id--7 .colone-picto svg #pillier-2-path367{ - stroke-dasharray: 0; /* Longueur totale du chemin */ - stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */ - animation: fillAnimation 8s ease-in-out infinite; /* Animation de remplissage sur 2 secondes */ - animation-delay: 10s; - animation-direction: alternate; /* Animation en aller-retour */ - - } - #paragraph-id--7 .colone-picto svg #pillier-3-path369{ - stroke-dasharray: 0; /* Longueur totale du chemin */ - stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */ - animation: fillAnimation 8s ease-in-out; /* Animation de remplissage sur 2 secondes */ - animation-delay: 15s; - animation-direction: alternate; /* Animation en aller-retour */ - animation-iteration-count: infinite; /* Animation infinie */ - - } - - @keyframes fillAnimation { - from { - stroke-dashoffset: 1000; /* Début du chemin de décalage complet */ - } - to { - stroke-dashoffset: 0; /* Aucun décalage, le chemin est complètement visible */ - } - } - } .paragraph--type--static-parts:not(#paragraph-id--7){ diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/animation-pilliers.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/animation-pilliers.scss new file mode 100644 index 0000000..01ff10f --- /dev/null +++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/animation-pilliers.scss @@ -0,0 +1,99 @@ + + +#home{ + /////////////////animation pilliers ////////////// + + + .visible{ + h5:nth-of-type(1) { + animation-delay: 1s; + animation-name: Appear; + animation-duration: 1s; + } + svg:nth-of-type(1) { + animation-delay: 2s; /* Start after h5 (1s) + h5 duration (1s) */ + animation-name: Appear; + animation-duration: 5s; /* Assuming svg animation is 5s */ + } + p:nth-of-type(1) { + animation-delay: 7s; /* Start after svg (2s) + svg duration (5s) */ + animation-name: Appear; + animation-duration: 1s; + } + h5:nth-of-type(2) { + animation-delay: 8s; /* Start after p (7s) + p duration (1s) */ + animation-name: Appear; + animation-duration: 1s; + } + svg:nth-of-type(2) { + animation-delay: 9s; /* Start after h5 (8s) + h5 duration (1s) */ + animation-name: Appear; + animation-duration: 5s; /* Assuming svg animation is 5s */ + } + p:nth-of-type(2) { + animation-delay: 14s; /* Start after svg (9s) + svg duration (5s) */ + animation-name: Appear; + animation-duration: 1s; + } + + h5:nth-of-type(3) { + animation-delay: 15s; /* Start after p (14s) + p duration (1s) */ + animation-name: Appear; + animation-duration: 1s; + } + svg:nth-of-type(3) { + animation-delay: 16s; /* Start after h5 (15s) + h5 duration (1s) */ + animation-name: Appear; + animation-duration: 5s; /* Assuming svg animation is 5s */ + } + p:nth-of-type(3) { + animation-delay: 21s; /* Start after svg (16s) + svg duration (5s) */ + animation-name: Appear; + animation-duration: 1s; + } + @keyframes Appear { + 0%{ + opacity: 0; + } + 100% { + opacity: 1; + } + } + } + #paragraph-id--7 .colone-picto svg #pillier-1-path365{ + stroke-dasharray: 1000; /* Longueur totale du chemin */ + stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */ + animation: fillAnimation 5s ease-in-out forwards; /* Animation de remplissage sur 2 secondes */ + animation-delay: 5s; + // animation-direction: alternate; /* Animation en aller-retour */ + + + } + #paragraph-id--7 .colone-picto svg #pillier-2-path367{ + stroke-dasharray: 0; /* Longueur totale du chemin */ + stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */ + animation: fillAnimation 5s ease-in-out forwards; /* Animation de remplissage sur 2 secondes */ + animation-delay: 5s; + // animation-direction: alternate; /* Animation en aller-retour */ + + } + #paragraph-id--7 .colone-picto svg #pillier-3-path369{ + stroke-dasharray: 1000; /* Longueur totale du chemin */ + stroke-dashoffset: 1000; /* Décalage initial pour cacher le chemin */ + animation: fillAnimation 5s ease-in-out forwards; /* Animation de remplissage sur 2 secondes */ + animation-delay: 5s; + // animation-direction: alternate; /* Animation en aller-retour */ + + } + + @keyframes fillAnimation { + from { + stroke-dashoffset: 1000; /* Début du chemin de décalage complet */ + } + to { + stroke-dashoffset: 0; /* Aucun décalage, le chemin est complètement visible */ + } + } + + +} \ No newline at end of file diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/formes-animees.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/formes-animees.scss index 74e116c..f2de839 100644 --- a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/formes-animees.scss +++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/formes-animees.scss @@ -2,19 +2,19 @@ #background-animated { position: absolute; - top: 1000px; + top: -400px; 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 */ + 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; + // top: -1500px; } } // .not-visible{ @@ -25,7 +25,7 @@ .layout-content { position: relative; - z-index: 2; /* S'assure que le contenu soit au-dessus des animations */ + z-index: 1; /* S'assure que le contenu soit au-dessus des animations */ } .layout-container.home { diff --git a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/timeline.scss b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/timeline.scss index c72b99d..f3e297c 100644 --- a/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/timeline.scss +++ b/web/themes/custom/quartiers_de_demain/src/assets/scss/partials/timeline.scss @@ -138,10 +138,15 @@ @media(max-width:550px){ font-size: 4rem; } - &::after{ - content: '.'; + .after{ + &::after{ + content: '.'; + } } + } + + .annee{ display: flex; align-items: center; 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 fb76810..c8c915c 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 @@ -31,6 +31,8 @@ @import "partials/actu-caroussel-home"; @import "partials/animation-logo-header"; @import "partials/formes-animees"; +@import "partials/animation-pilliers"; + // @import "partials/slick_custom";