premier jet animation header

This commit is contained in:
ouidade 2024-07-09 14:38:50 +02:00
parent d2fbdb7c3c
commit 2672685243
7 changed files with 26 additions and 29 deletions

File diff suppressed because one or more lines are too long

View File

@ -248,6 +248,9 @@ header .header_left_container {
transition: height 2s ease-in-out, width 2s ease-in-out; /* Transition pour le changement de taille */ transition: height 2s ease-in-out, width 2s ease-in-out; /* Transition pour le changement de taille */
background-color: rgb(255, 255, 255); background-color: rgb(255, 255, 255);
} }
header .header_left_container img {
display: none;
}
@media (max-width: 660px) { @media (max-width: 660px) {
header .header_left_container { header .header_left_container {
height: inherit; height: inherit;
@ -484,6 +487,9 @@ footer {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
} }
.footer #footer-left .footer_left_container .logo-qdd {
display: none;
}
@media (max-width: 700px) { @media (max-width: 700px) {
.footer #footer-left .footer_left_container { .footer #footer-left .footer_left_container {
max-width: 50vw; max-width: 50vw;

View File

@ -57,9 +57,12 @@
function checkHeaderCollapse() { function checkHeaderCollapse() {
if (header.classList.contains('header--collapsed')) { if (header.classList.contains('header--collapsed')) {
stopLogoAnimation(); stopLogoAnimation();
} else { } else if (header.classList.contains('header--collapsed-already')) {
stopLogoAnimation();
} else {
startLogoAnimation(); startLogoAnimation();
} }
} }
// Appeler la fonction au chargement initial // Appeler la fonction au chargement initial
@ -75,32 +78,15 @@
}); });
observer.observe(header, { attributes: true }); observer.observe(header, { attributes: true });
// Autres fonctions et initialisations ici
}); });
document.addEventListener('DOMContentLoaded', function() { document.addEventListener('DOMContentLoaded', function() {
const header = document.querySelector('header'); 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'); const isFirstLoad = !performance.getEntriesByType("navigation")[0].type.includes('back_forward');
// Vérifier si nous sommes sur la page cible const isTargetPath = window.location.pathname === '/';
const isTargetPath = window.location.pathname === '/'; // Remplacez '/votre-chemin-cible' par le chemin réel
// Si ce n'est pas la première charge ou si le chemin n'est pas le chemin cible, ajouter la classe immédiatement // 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) { if (!isFirstLoad || !isTargetPath) {
@ -111,7 +97,7 @@
// Sinon, appliquer la transition après un délai // Sinon, appliquer la transition après un délai
setTimeout(() => { setTimeout(() => {
header.classList.add('header--collapsed'); header.classList.add('header--collapsed');
}, 5000); // Attendre 1 seconde avant de réduire la taille du header }, 5000);
} }

View File

@ -57,6 +57,7 @@ footer{
} }
.footer_left_container{ .footer_left_container{
padding-left: 5%; padding-left: 5%;
.logo-qdd{display: none;}
@media(max-width: 700px){ @media(max-width: 700px){
max-width: 50vw; max-width: 50vw;
} }

View File

@ -24,6 +24,7 @@ header{
flex-direction: row; flex-direction: row;
transition: height 2s ease-in-out, width 2s ease-in-out; /* Transition pour le changement de taille */ transition: height 2s ease-in-out, width 2s ease-in-out; /* Transition pour le changement de taille */
background-color: $white-header; background-color: $white-header;
img{display: none;}
@media(max-width: 660px){ @media(max-width: 660px){
height: inherit; height: inherit;
} }

View File

@ -38,10 +38,7 @@
{{ content }} {{ content }}
{% for item in items %} {% for item in items %}
<div class="animated_logo" <div {{ item.attributes }}>{{ item.content }}</div>
{{ item.attributes }}>{{ item.content }}
{% include active_theme_path() ~ '/dist/assets/img/logo_QDD_v2.svg' %}
</div>
{% endfor %} {% endfor %}
{% endblock %} {% endblock %}

View File

@ -34,7 +34,10 @@
{# Set anchor href using paragraph ID #} {# Set anchor href using paragraph ID #}
{% {%
set ancre_href = '/' set ancre_href1 = '/'
%}
{%
set ancre_href = '#paragraph-id--' ~ paragraph.id()
%} %}
{# Define the SVG icon #} {# Define the SVG icon #}
@ -429,11 +432,14 @@
{% for item in items %} {% for item in items %}
<div{{ item.attributes }}> <div{{ item.attributes }}>
<a href="{{ ancre_href }}"> <a class='logo-qdd' href="{{ ancre_href1 }}">
{{ svg_icon|raw }} {{ svg_icon|raw }}
</a> </a>
{# {{ item.content }} #} <a clas='other-logo' href="{{ ancre_href }}">
{{ item.content }}
</a>
</div> </div>
{% endfor %} {% endfor %}
</div> </div>