• Bande défilante randonneur

    Le petit randonneur 77: sa question est: comment placer une bande défilante en haut de la zone de texte ?

    Dans cette bande , pouvoir y placer ce qu'on veut, texte, liens ...

    Voyons comment se présente sa page:

    Le bandeau défilant. Sa zone de texte mesure 850px de large et il souhaite placer cette bande sous sa ligne de bienvenue, où elle apparaît en grisé.

    Sa zone de texte mesure 850px de large et il souhaite placer cette bande sous sa ligne de bienvenue, où elle apparaît en grisé.

    Le code de cette zone article est:

    <div id="module_contenu_html1119494" class="module_contenu">
    <div class="module_contenu_block">
    <p style="text-align: center;"><img src="http://ekladata.com/foKKxJnlAc0Yqo_06j26clElmZc.png" alt="" width="850px" /></p>  ligne du texte de bienvenue
    ---------->
    <div style="border: 0px solid black; width: 850px; height: 1800px; margin: 2vh auto;">     suite de ses modules
    <div class="rand" style="text-align: center;">...

    Nous allons intercaler l'animation de la bande défilante, avec 5 paragraphes (par exemple), entre ces 2 lignes.

    <div style="width: 850px; height: 50px; border-radius: 10px; box-shadow: 3px 3px 5px grey; margin: 5px auto; border: 1px solid black; overflow: hidden;">
    <div id="pg0">
    <p id="pg1">Le premier paragraphe avec ce que l'on veut dedans.</p>
    <p id="pg2">Le deuxi&egrave;me paragraphe avec ce que l'on veut dedans.</p>
    <p id="pg3">Le troisi&egrave;me paragraphe avec ce que l'on veut dedans.</p>
    <p id="pg4">Le quatri&egrave;me paragraphe avec ce que l'on veut dedans.</p>
    <p id="pg5">Le cinqui&egrave;me paragraphe avec ce que l'on veut dedans.</p>
    <p id="pg6">Le dernier/premier paragraphe avec ce que l'on veut dedans.</p>
    </div>
    </div>

    <style><!--

    #pg0{width:850px; height:300px; animation:alain 30s linear infinite;}
    #pg1{width:850px; height:50px; text-align:center; background: linear-gradient(to top, #d5cea6 0%,#c9c190 40%,#b7ad70 100%);}
    #pg2{width:850px; height:50px; text-align:center; background: linear-gradient(to top, #e4efc0 0%,#abbd73 100%);}
    #pg3{width:850px; height:50px; text-align:center; background: linear-gradient(to top, #e4efc0 0%,#DEB887 100%);}
    #pg4{width:850px; height:50px; text-align:center; background: linear-gradient(to top, #e4efc0 0%,#00ffcc 100%);}
    #pg5{width:850px; height:50px; text-align:center; background: linear-gradient(to top, #e4efc0 0%,#aabbcc 100%);}
    #pg6{width:850px; height:50px; text-align:center; background: linear-gradient(to top, #d5cea6 0%,#c9c190 40%,#b7ad70 100%);}
    @keyframes alain{
    0%  { transform:translate(0px,0px);}
    15% { transform:translate(0px,0px);}
    18% { transform:translate(0px,-60px);}
    33% { transform:translate(0px,-60px);}
    36% { transform:translate(0px,-120px);}
    51% { transform:translate(0px,-120px);}
    54% { transform:translate(0px,-180px);}
    69% { transform:translate(0px,-180px);}
    72% { transform:translate(0px,-240px);}
    87% { transform:translate(0px,-240px);}
    90% { transform:translate(0px,-300px);}
    100% { transform:translate(0px,-300px);}
    }
    --></style>

    ce qui va nous donner, pour la bande défilante:

    Le premier paragraphe avec ce que l'on veut dedans.

    Le deuxième paragraphe avec ce que l'on veut dedans.

    Le troisième paragraphe avec ce que l'on veut dedans.

    Le quatrième paragraphe avec ce que l'on veut dedans.

    Le cinquième paragraphe avec ce que l'on veut dedans.

    Le dernier/premier paragraphe avec ce que l'on veut dedans.

    Et pour la partie zone article de son blog:

     

    Le premier paragraphe avec ce que l'on veut dedans.

    Le deuxième paragraphe avec ce que l'on veut dedans.

    Le troisième paragraphe avec ce que l'on veut dedans.

    Le quatrième paragraphe avec ce que l'on veut dedans.

    Le cinquième paragraphe avec ce que l'on veut dedans.

    Le dernier/premier paragraphe avec ce que l'on veut dedans.

    CIRCUIT DE LA PIERRE DU CHAUD-COSTET (88)
    La pierre du Chaud-CostetAccroché à flanc de montagne, le village est d'une altitude très variable; de 528 m pour le point le plus bas, le centre se trouve à 600 m et l'endroit le plus haut culmine à 900 m au lieu-dit "Les Grandes Roches".
    Ses 3000 hectares en font également un village disséminé par monts et vaux; Aussi, les habitations se dispersent loin du centre dans des coins aux noms souvent fleuris.


    Mis en ligne le 11/04/2017 à 16:35
    Clic

    VISITE DE MONTREUIL-SUR-MER (62)   
    Abbatiale saint-Saulve de Montreuil-sur-MerInstallée sur le rebord d'un plateau et dans un site de confluence à proximité des plages de la Côte d'Opale, la ville de Montreuil-sur-Mer ne laisse aucun hôte de passage indifférent. Unique port du domaine royal des Capétiens, elle devient une capitale religieuse, ville des « Corps Saints », rayonne par ses activités économiques et sa fonction judiciaire durant la période  ...


    Mis en ligne le 14/04/2017 à 16:40Clic

    KAYSERSBERG, CITÉ D'ALBERT SCHWEITZER (88)
    Belle maison alsacienneKaysersberg, ville fleurie 4 fleurs, Grand Prix d'Excellence du Concours International de l'Entente Florale 1988, Prix National du Concours Fleuri 1988, jumelée avec Lambaréné au Gabon. Elle compte 2766 habitants. Elle s'étend sur 2482 hectares dont 2168 de forêt situés entre 250 et 820 m d'altitude.
    Ces renseignements sont ceux que vous trouverez partout. Pour se rendre compte de la beauté de ce village


    Mis en ligne le 05/04/2017 à 13:41
    Clic

    LE BEC-HELLOUIN (27) Plus beau village de France 
    Une partie de l'abbaye du Bec-HellouinLa fondation du village du Bec et de son église paroissiale dédiée à Saint André fut sans doute très précoce, liée à celle de l’abbaye aux environs de 1039 par Herluin ; les religieux favorisant volontiers la création d’un village où se regrouperait la main d’œuvre nécessaire à l’exploitation de leurs terres. Aux environs de 1270, 240 chefs de famille sont alors recensés...



    Mis en ligne le 09/04/2017 à 08:34Clic


    La Kolossale Petite Finesse de la bande défilante est de répéter le premier paragraphe en dernière position de façon à ce que le mouvement ne soit pas saccadé.

    Les temps de transition et d'affichage sont à régler selon ses choix, par le % de l'animation et le temps global de l'animation.