Communauté francophone - Jimdo
Bienvenue sur le nouveau forum de discussion officiel de la communauté francophone des utilisateurs de Jimdo.

Ce forum annule et remplace le précédent forum Jimdo, qui a malheureusement dû être fermé pour raisons techniques.

Vous avez un ou plusieurs sites Jimdo ? Enregistrez vous sur le forum, posez vos questions et prenez part aux discussions !

Vous êtes simple visiteur ? Vous pouvez consulter nos pages, mais vous ne pourrez pas laisser de message.

Animation Header Scrolling

Voir le sujet précédent Voir le sujet suivant Aller en bas

Animation Header Scrolling

Message par BaudouinPaul le Mar 20 Déc 2016 - 16:13

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

Messages : 16
Date d'inscription : 25/02/2016

http://www.isaccanoekayak.com/

Revenir en haut Aller en bas

Re: Animation Header Scrolling

Message par BaudouinPaul le Mar 20 Déc 2016 - 23:08

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

Messages : 16
Date d'inscription : 25/02/2016

http://www.isaccanoekayak.com/

Revenir en haut Aller en bas

Re: Animation Header Scrolling

Message par BaudouinPaul le Mer 28 Déc 2016 - 22:56

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

BaudouinPaul

Messages : 16
Date d'inscription : 25/02/2016

http://www.isaccanoekayak.com/

Revenir en haut Aller en bas

Re: Animation Header Scrolling

Message par FredVig le Jeu 29 Déc 2016 - 12:25

EDIT, voir le tuto complet en fin de post


Dernière édition par FredVig le Jeu 29 Déc 2016 - 16:42, édité 2 fois

_________________
'Expert' Jimdo affilié, bénévole du forum et indépendant rémunéré par mes clients.
avatar
FredVig

Messages : 1882
Date d'inscription : 07/10/2014

http://fredvig.com

Revenir en haut Aller en bas

Re: Animation Header Scrolling

Message par BaudouinPaul le Jeu 29 Déc 2016 - 13:14

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 Very Happy

BaudouinPaul

Messages : 16
Date d'inscription : 25/02/2016

http://www.isaccanoekayak.com/

Revenir en haut Aller en bas

Re: Animation Header Scrolling

Message par FredVig le Jeu 29 Déc 2016 - 16:41

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/

_________________
'Expert' Jimdo affilié, bénévole du forum et indépendant rémunéré par mes clients.
avatar
FredVig

Messages : 1882
Date d'inscription : 07/10/2014

http://fredvig.com

Revenir en haut Aller en bas

Re: Animation Header Scrolling

Message par BaudouinPaul le Jeu 29 Déc 2016 - 17:04

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

BaudouinPaul

Messages : 16
Date d'inscription : 25/02/2016

http://www.isaccanoekayak.com/

Revenir en haut Aller en bas

Re: Animation Header Scrolling

Message par Contenu sponsorisé


Contenu sponsorisé


Revenir en haut Aller en bas

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum