js timeline

This commit is contained in:
ouidade 2024-07-05 16:04:40 +02:00
parent d4172ff07f
commit 96ae5337a1
5 changed files with 42 additions and 31 deletions

View File

@ -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\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\nfunction 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// let currentSlide = 0;\n\n// function showSlides(index) {\n// const slides = document.querySelectorAll('.__timeline-content');\n// const totalSlides = slides.length;\n// const visibleSlides = 3; // Number of slides to show at a time\n// const maxSlide = totalSlides - visibleSlides;\n \n// // Adjust the index to ensure it stays within bounds\n// currentSlide = Math.max(0, Math.min(index, maxSlide));\n\n// // const offset = currentSlide * -40; // Calculate the offset for the transform\n// document.querySelector('.paragraph--type--phase-deroulement').style.transform = `translateX(50%)`;\n\n// // Enable/disable arrows based on the current slide\n// document.querySelector('.arrow__prev').disabled = currentSlide === 0;\n// document.querySelector('.arrow__next').disabled = currentSlide === maxSlide;\n// }\n\n// function prevSlide() {\n// showSlides(currentSlide - 1);\n// }\n\n// function nextSlide() {\n// showSlides(currentSlide + 1);\n// }\n\n// // Initialize\n// showSlides(currentSlide);\n\n\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\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\nfunction 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\ndocument.addEventListener('DOMContentLoaded', function() {\n let currentSlide = 0;\n\n function showSlides(index) {\n const slides = document.querySelectorAll('.paragraph--type--phase-deroulement');\n const totalSlides = slides.length;\n const visibleSlides = 3; // Number of slides to show at a time\n const maxSlide = totalSlides - visibleSlides;\n\n // Adjust the index to ensure it stays within bounds\n currentSlide = Math.max(0, Math.min(index, maxSlide));\n\n // Calculate the offset for the transform\n const offset = currentSlide * -100 / 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\n showSlides(currentSlide);\n});\n\n})(jQuery, window);\n\n\n\n\n//# sourceURL=webpack://quartiers_de_demain/./src/assets/js/quartiers_de_demain.js?");
/***/ }) /***/ })

View File

@ -963,7 +963,7 @@ footer span.totop #toTop .arrow-up::before {
width: fit-content; width: fit-content;
margin: auto; margin: auto;
position: relative; position: relative;
top: -220px; top: -115px;
} }
#home .timeline .__timeline-arrows button { #home .timeline .__timeline-arrows button {
background-color: white; background-color: white;
@ -972,6 +972,9 @@ footer span.totop #toTop .arrow-up::before {
#home .timeline .__timeline-arrows button:hover { #home .timeline .__timeline-arrows button:hover {
opacity: 0.5; opacity: 0.5;
} }
#home .timeline .__timeline-arrows button svg {
padding: 0.5rem;
}
#home .timeline .__timeline-content { #home .timeline .__timeline-content {
width: 100vw; width: 100vw;
padding: 250px 0; padding: 250px 0;

View File

@ -97,39 +97,42 @@ $( document ).ready(function() {
////////////////// Timeline /////////////////////// ////////////////// Timeline ///////////////////////
// let currentSlide = 0; document.addEventListener('DOMContentLoaded', function() {
let currentSlide = 0;
// function showSlides(index) { function showSlides(index) {
// const slides = document.querySelectorAll('.__timeline-content'); const slides = document.querySelectorAll('.paragraph--type--phase-deroulement');
// const totalSlides = slides.length; const totalSlides = slides.length;
// const visibleSlides = 3; // Number of slides to show at a time const visibleSlides = 3; // Number of slides to show at a time
// const maxSlide = totalSlides - visibleSlides; const maxSlide = totalSlides - visibleSlides;
// // Adjust the index to ensure it stays within bounds
// currentSlide = Math.max(0, Math.min(index, maxSlide));
// // const offset = currentSlide * -40; // Calculate the offset for the transform // Adjust the index to ensure it stays within bounds
// document.querySelector('.paragraph--type--phase-deroulement').style.transform = `translateX(50%)`; currentSlide = Math.max(0, Math.min(index, maxSlide));
// // Enable/disable arrows based on the current slide // Calculate the offset for the transform
// document.querySelector('.arrow__prev').disabled = currentSlide === 0; const offset = currentSlide * -100 / visibleSlides;
// document.querySelector('.arrow__next').disabled = currentSlide === maxSlide; document.querySelector('.__timeline-content').style.transform = `translateX(${offset}%)`;
// }
// function prevSlide() { // Enable/disable arrows based on the current slide
// showSlides(currentSlide - 1); document.getElementById('arrowPrev').disabled = currentSlide === 0;
// } document.getElementById('arrowNext').disabled = currentSlide === maxSlide;
}
// function nextSlide() {
// showSlides(currentSlide + 1);
// }
// // Initialize
// showSlides(currentSlide);
function prevSlide() {
showSlides(currentSlide - 1);
}
function nextSlide() {
showSlides(currentSlide + 1);
}
// Attach event listeners
document.getElementById('arrowPrev').addEventListener('click', prevSlide);
document.getElementById('arrowNext').addEventListener('click', nextSlide);
// Initialize
showSlides(currentSlide);
});
})(jQuery, window); })(jQuery, window);

View File

@ -12,13 +12,18 @@
width: fit-content; width: fit-content;
margin: auto; margin: auto;
position: relative; position: relative;
top: -220px; top: -115px;
button{ button{
background-color: white; background-color: white;
border: none; border: none;
&:hover{ &:hover{
opacity: 0.5; opacity: 0.5;
} } }
svg{
padding: 0.5rem;
}
}
} }
.__timeline-content{ .__timeline-content{
// font-size: 0; // font-size: 0;

View File

@ -68,10 +68,10 @@
<div{{ title_attributes.addClass(title_classes) }}>{{ label }}</div> <div{{ title_attributes.addClass(title_classes) }}>{{ label }}</div>
<div class='timeline'> <div class='timeline'>
<div class="__timeline-arrows"> <div class="__timeline-arrows">
<button class="arrow arrow__prev"> <button id='arrowPrev' class="arrow arrow__prev">
{% include active_theme_path() ~ '/dist/assets/img/prev.svg' %} {% include active_theme_path() ~ '/dist/assets/img/prev.svg' %}
</button> </button>
<button class="arrow arrow__next"> <button id='arrowNext' class="arrow arrow__next">
{% include active_theme_path() ~ '/dist/assets/img/next.svg' %} {% include active_theme_path() ~ '/dist/assets/img/next.svg' %}
</button> </button>
</div> </div>