Animation Header Scrolling

[BaudouinPaul]

Bonjour !
Je pose ce problème ici ne sachant pas du tout si il est réalisable avec Jimdo ...
J'aurais souhaité animer le header lorsque l'utilisateur descend dans la page (retrait du logo -ou diminution de taille-, diminution de la taille du menu etc ...).


J'ai trouvé plusieurs tutos mais ils semblent tous mêler du Javascript ou autre ... Voir ici : http://www.menucool.com/ui/animated-sticky-header-on-scroll

Pensez vous qu'une telle chose est possible en html avec Jimdo ?

Merci !

[BaudouinPaul]

Oui en effet au temps pour moi !
Mais dans ce cas je ne comprend pas comment l'appliquer ...
A quoi fait référence la classe ".float-panel" ? Elle n'existe pas nativement sur les sites jimdo .. Faut il la créer ? et comment ?

De plus si je comprend bien, il faut deux états du menu, un tel que je l'ai aujourd'hui (class=jtpl-header navigation-colors) et un second qui s'applique lorsque l'on scroll (qui serait le float-panel en question ?). Que faire pour que la transition entre les deux se fasse ?

Merci en tout cas pour votre retour rapide !
Paul
(baudouinpaulcdck.jimdo.com)

[BaudouinPaul]

Merci pour votre retour !
J'ai chargé le fichier .js que j'ai téléchargé sur le tuto mentionné plus haut dans "Design personnel". Mais après je suis un peu perdu dans les codes, je ne comprend pas quoi mettre où, en particulier à l'étape "Link float-panel.js" ..
Le code <script src="float-panel.js"></script> est à mettre dans le header ? Dans le CSS du design personnel ?

Merci en tout cas pour votre réponse !
Cordialement,
Paul Baudouin

[FredVig]

EDIT, voir le tuto complet en fin de post

[BaudouinPaul]

Alors ...
- J'ai bien chargé le .js dans le design perso (menu > design > design perso > fichiers > parcourir > télécharger).

- J'ai ajouté le widget dans ma page d'accueil (n'importe où ??) :

Code:

<div class="float-panel" data-top="0" data-scroll="100">
    <div class="content-area" style="text-align:right;">
        <a href="#" style="float:left;"><em>CDCK44</em></a> <a href="#">Free trial</a> <a href="#">Subscribe</a> <a href="#">Services</a> <a href="#"></a>
    </div>
</div>

- J'ai ajouté dans le Header le CSS avec les balises appropriées (?) :

Code:

<style type="text/css">
/*<![CDATA[*/
.float-panel {
    width:100%;
    background:white;
    z-index:300;
    padding:30px 0;
    transform: translateZ(0);
    transition:all 0.5s;
}
.float-panel .content-area {
    max-width:900px;
    margin:10px auto;
}
.float-panel a {
    font-size:16px;
    text-decoration:none;
    color:#444;
    display:inline-block;
    padding:10px 20px;
}                  
.float-panel .fa-gg {                  
    color:#F0595C;
    font-size:30px;
    vertical-align:middle;                  
    transition:all 1s;                  
}
 /*]]>*/
</style>

... Mais cela ne fonctionne pas ! Le nouveau menu reste à l'endroit où j'ai mis le code HTML sur ma page (voir ici en fin de page : https://baudouinpaulcdck.jimdo.com/ ).
Merci pour votre aide

[FredVig]

C'est Noël alors je veux bien faire un test…

Le résultat appliqué sur cette page :
menucool test fredvig

1) Download les fichiers du menucool

2) Sur une page vide, insérer un module html et coller :

Code:


<div class="floatWrapper" style="float:right;">
    <div class="float-panel" data-top="0" style="width: 300px;">
        <div style="text-align:center;padding-top:30px;">
            <img src="imgs/socials.png" style="width:70%;" alt="" />
        </div>

        <div id="vertical-nav">
            <a href="#">Lorem ipsum</a> <a class="active" href="#">Tincidun</a> <a href="#">Donec</a> <a href="#">Erat</a> <a href="#">Nunc finibus</a>
        </div>
    </div>

    <div style="width: 300px; display: none; transition: height 0.3s ease 0s; height: 0px;">
    </div>
</div>


Cela fabrique le menu, il faudra modifier les titres.

3) Design perso Jimdo > télécharger > float-panel.js et enregistrer

4) Copiez le lien url vers le fichier float-panel.js, revenez sur la nouvelle page, et collez au début du widget html le lien vers le script, en remplaçant le lien par le vôtre :

Code:

<script src="https://u.jimcdn.com/…/…/…" type="text/javascript">
</script>

5) Ajouter en dessous, toujours dans le même widget, du contenu en html afin d'occuper l'espace à gauche du menu.

Code:

<div class="main-content">
        <p>
Ajoutez du texte, des images, tout ce dont vous avez besoin, mais directement dans le module html, pas en modules jimdo. Suffisemment en tout cas pour habiller le menu à droite.   </p>  
</div>

6) remplissez normalement votre page vers le bas, avec des modules Jimdo.

7) Copiez collez le CSS suivant dans modifier le Head entre les balises de déclaration de css.

Code:

.float-panel {
    width:100%;
    background:white;
    z-index:300;
    padding:30px 0;
    transform: translateZ(0);
    transition:all 0.5s;
}
.float-panel .content-area {
    max-width:900px;
    margin:10px auto;
}
.float-panel a {
    font-size:16px;
    text-decoration:none;
    color:#444;
    display:inline-block;
    padding:10px 20px;
}                  
.float-panel .fa-gg {                  
    color:#F0595C;
    font-size:30px;
    vertical-align:middle;                  
    transition:all 1s;                  
}/* Float Panel: class="float-panel fixed" */

.fixed {
    box-shadow:0 2px 6px rgba(0,0,0,0.2);  
    padding:4px 0;
    animation:slide-down 0.7s;
    opacity:0.9;    
}                  
.fixed .fa-gg {                  
    transform: rotate(360deg);      
}

@keyframes slide-down {
    0% {
        opacity: 0;
        transform: translateY(-100%);
    }
    100% {
        opacity: 0.9;
        transform: translateY(0);
    }
}

ça donne ça : https://fredvig.jimdo.com/atelier/menucool/

[BaudouinPaul]

Super ! cela fonctionne bien mieux en effet, il manquant juste le lien vers le script
Merci pour votre aide !

[Contenu sponsorisé]