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 */
|
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;
|
||||||
|
|
|
@ -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
|
||||||
|
@ -76,31 +79,14 @@
|
||||||
|
|
||||||
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);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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 %}
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in New Issue