premier jet animation header
This commit is contained in:
parent
d2fbdb7c3c
commit
2672685243
File diff suppressed because one or more lines are too long
|
@ -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 */
|
||||
background-color: rgb(255, 255, 255);
|
||||
}
|
||||
header .header_left_container img {
|
||||
display: none;
|
||||
}
|
||||
@media (max-width: 660px) {
|
||||
header .header_left_container {
|
||||
height: inherit;
|
||||
|
@ -484,6 +487,9 @@ footer {
|
|||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
.footer #footer-left .footer_left_container .logo-qdd {
|
||||
display: none;
|
||||
}
|
||||
@media (max-width: 700px) {
|
||||
.footer #footer-left .footer_left_container {
|
||||
max-width: 50vw;
|
||||
|
|
|
@ -57,9 +57,12 @@
|
|||
function checkHeaderCollapse() {
|
||||
if (header.classList.contains('header--collapsed')) {
|
||||
stopLogoAnimation();
|
||||
} else {
|
||||
} else if (header.classList.contains('header--collapsed-already')) {
|
||||
stopLogoAnimation();
|
||||
} else {
|
||||
startLogoAnimation();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// Appeler la fonction au chargement initial
|
||||
|
@ -76,31 +79,14 @@
|
|||
|
||||
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
|
||||
const isTargetPath = window.location.pathname === '/'; // Remplacez '/votre-chemin-cible' par le chemin réel
|
||||
const isTargetPath = window.location.pathname === '/';
|
||||
|
||||
// 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) {
|
||||
|
@ -111,7 +97,7 @@
|
|||
// Sinon, appliquer la transition après un délai
|
||||
setTimeout(() => {
|
||||
header.classList.add('header--collapsed');
|
||||
}, 5000); // Attendre 1 seconde avant de réduire la taille du header
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
|
||||
|
|
|
@ -57,6 +57,7 @@ footer{
|
|||
}
|
||||
.footer_left_container{
|
||||
padding-left: 5%;
|
||||
.logo-qdd{display: none;}
|
||||
@media(max-width: 700px){
|
||||
max-width: 50vw;
|
||||
}
|
||||
|
|
|
@ -24,6 +24,7 @@ header{
|
|||
flex-direction: row;
|
||||
transition: height 2s ease-in-out, width 2s ease-in-out; /* Transition pour le changement de taille */
|
||||
background-color: $white-header;
|
||||
img{display: none;}
|
||||
@media(max-width: 660px){
|
||||
height: inherit;
|
||||
}
|
||||
|
|
|
@ -38,10 +38,7 @@
|
|||
|
||||
{{ content }}
|
||||
{% for item in items %}
|
||||
<div class="animated_logo"
|
||||
{{ item.attributes }}>{{ item.content }}
|
||||
{% include active_theme_path() ~ '/dist/assets/img/logo_QDD_v2.svg' %}
|
||||
</div>
|
||||
<div {{ item.attributes }}>{{ item.content }}</div>
|
||||
{% endfor %}
|
||||
|
||||
{% endblock %}
|
||||
|
|
|
@ -34,7 +34,10 @@
|
|||
|
||||
{# Set anchor href using paragraph ID #}
|
||||
{%
|
||||
set ancre_href = '/'
|
||||
set ancre_href1 = '/'
|
||||
%}
|
||||
{%
|
||||
set ancre_href = '#paragraph-id--' ~ paragraph.id()
|
||||
%}
|
||||
|
||||
{# Define the SVG icon #}
|
||||
|
@ -429,11 +432,14 @@
|
|||
|
||||
{% for item in items %}
|
||||
<div{{ item.attributes }}>
|
||||
<a href="{{ ancre_href }}">
|
||||
<a class='logo-qdd' href="{{ ancre_href1 }}">
|
||||
{{ svg_icon|raw }}
|
||||
</a>
|
||||
|
||||
{# {{ item.content }} #}
|
||||
<a clas='other-logo' href="{{ ancre_href }}">
|
||||
{{ item.content }}
|
||||
</a>
|
||||
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
|
Loading…
Reference in New Issue