js timeline
This commit is contained in:
ouidade
parent
d4172ff07f
commit
96ae5337a1
|
|
@ -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?");
|
||||
|
||||
/***/ })
|
||||
|
||||
|
|
|
|||
|
|
@ -963,7 +963,7 @@ footer span.totop #toTop .arrow-up::before {
|
|||
width: fit-content;
|
||||
margin: auto;
|
||||
position: relative;
|
||||
top: -220px;
|
||||
top: -115px;
|
||||
}
|
||||
#home .timeline .__timeline-arrows button {
|
||||
background-color: white;
|
||||
|
|
@ -972,6 +972,9 @@ footer span.totop #toTop .arrow-up::before {
|
|||
#home .timeline .__timeline-arrows button:hover {
|
||||
opacity: 0.5;
|
||||
}
|
||||
#home .timeline .__timeline-arrows button svg {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
#home .timeline .__timeline-content {
|
||||
width: 100vw;
|
||||
padding: 250px 0;
|
||||
|
|
|
|||
|
|
@ -97,39 +97,42 @@ $( document ).ready(function() {
|
|||
|
||||
////////////////// Timeline ///////////////////////
|
||||
|
||||
// let currentSlide = 0;
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
let currentSlide = 0;
|
||||
|
||||
// function showSlides(index) {
|
||||
// const slides = document.querySelectorAll('.__timeline-content');
|
||||
// const totalSlides = slides.length;
|
||||
// const visibleSlides = 3; // Number of slides to show at a time
|
||||
// const maxSlide = totalSlides - visibleSlides;
|
||||
function showSlides(index) {
|
||||
const slides = document.querySelectorAll('.paragraph--type--phase-deroulement');
|
||||
const totalSlides = slides.length;
|
||||
const visibleSlides = 3; // Number of slides to show at a time
|
||||
const maxSlide = totalSlides - visibleSlides;
|
||||
|
||||
// // Adjust the index to ensure it stays within bounds
|
||||
// currentSlide = Math.max(0, Math.min(index, maxSlide));
|
||||
// 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
|
||||
// document.querySelector('.paragraph--type--phase-deroulement').style.transform = `translateX(50%)`;
|
||||
// Calculate the offset for the transform
|
||||
const offset = currentSlide * -100 / visibleSlides;
|
||||
document.querySelector('.__timeline-content').style.transform = `translateX(${offset}%)`;
|
||||
|
||||
// // Enable/disable arrows based on the current slide
|
||||
// document.querySelector('.arrow__prev').disabled = currentSlide === 0;
|
||||
// document.querySelector('.arrow__next').disabled = currentSlide === maxSlide;
|
||||
// }
|
||||
|
||||
// function prevSlide() {
|
||||
// showSlides(currentSlide - 1);
|
||||
// }
|
||||
|
||||
// function nextSlide() {
|
||||
// showSlides(currentSlide + 1);
|
||||
// }
|
||||
|
||||
// // Initialize
|
||||
// showSlides(currentSlide);
|
||||
// Enable/disable arrows based on the current slide
|
||||
document.getElementById('arrowPrev').disabled = currentSlide === 0;
|
||||
document.getElementById('arrowNext').disabled = currentSlide === maxSlide;
|
||||
}
|
||||
|
||||
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);
|
||||
|
||||
|
|
|
|||
|
|
@ -12,13 +12,18 @@
|
|||
width: fit-content;
|
||||
margin: auto;
|
||||
position: relative;
|
||||
top: -220px;
|
||||
top: -115px;
|
||||
button{
|
||||
background-color: white;
|
||||
border: none;
|
||||
&:hover{
|
||||
opacity: 0.5;
|
||||
} }
|
||||
}
|
||||
svg{
|
||||
padding: 0.5rem;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
.__timeline-content{
|
||||
// font-size: 0;
|
||||
|
|
|
|||
|
|
@ -68,10 +68,10 @@
|
|||
<div{{ title_attributes.addClass(title_classes) }}>{{ label }}</div>
|
||||
<div class='timeline'>
|
||||
<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' %}
|
||||
</button>
|
||||
<button class="arrow arrow__next">
|
||||
<button id='arrowNext' class="arrow arrow__next">
|
||||
{% include active_theme_path() ~ '/dist/assets/img/next.svg' %}
|
||||
</button>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue