• Faire défiler le slogan de l'en-tête en CSS

    Pour faire défilant dans l'en-tête le texte du slogan enregistré dans "configuration générale":

    dans un module simple, en passant pas le bouton <> de l'éditeur de module, copier le code CSS ci dessous:
    Les valeurs 600 et -420 sont à modifier en fonction de la longueur de la page et du texte lui-même.

     


    /*debut defile texte slogan*/

    <style><!--
    #slogan_header {
    -webkit-animation-name: textedefil; -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 8s; -webkit-animation-timing-function :linear;
    -moz-animation-name: textedefil;
    -moz-animation-iteration-count: infinite; -moz-animation-duration: 8s;
    -moz-animation-timing-function :linear; position : relative; }
    @-webkit-keyframes textedefil {
    from { left: 600px; } to { left: -420px; } }
    @-moz-keyframes textedefil {
    from { left: 600px; } to { left: -420px; }}
    --></style>

    /*fin defile texte slogan*/

     

    « Mettre un mot de passe à une adresse webMasques barrière Guide AFNOR »
    Partager via Gmail Yahoo! Google Bookmarks

    Tags Tags :
  • Commentaires

    1
    Lundi 15 Septembre 2014 à 19:40
    Merci ! super bonne idée, ça !
    2
    Lundi 15 Septembre 2014 à 19:53
    Heu ... coucou ! Ca marche nickel, mais je n'arrive pas à ralentir le rythme. Porqué ?
    3
    Lundi 15 Septembre 2014 à 20:03
    Heu ... la même ! Désolée, mais si, ça marche très bien, j'étais juste impatiente :-) ...
    Et pour finir, je l'ai retiré, parce que sur toutes les pages, ça faisait mal aux nyeux.
    En tout cas, merci pour l'info. Bonne soirée.
    4
    Lundi 15 Septembre 2014 à 21:18

    25 ans pour l'impatience et 75 pour les yeux !!

    5
    Lundi 15 Septembre 2014 à 23:41
    TsssTsss...
    6
    Vendredi 5 Décembre 2014 à 15:22

    merci pour l'aide dans le forum

    j'ai été déroutée par ton blog !! étrange, le blog de quelqu'un qui manie le langage informatique sans souci !!

    bravo

    7
    Dimanche 10 Mai 2015 à 15:48

    ah merci je vais essayer mais bon chuis pas douée moi..........Merci

    8
    Dimanche 10 Mai 2015 à 15:51

    oh j'y crois pas dis donc, j'ai réussi du 1er coup !!!!!!!!!! Merci

    9
    Vendredi 23 Octobre 2015 à 22:27

    Merci de m'avoir proposé ta solution, sauf que ce n'est pas vraiment ce que je cherche..; voilà mon soucis :

    Dans mon header j'ai un slogan sur la gauche, au centre mon image centrale, et un emplacement (tjrs dans l'header) à droite vite dans lequel je voudrais mettre un gif que j'ai hébergé chez EklaBlog. sauf que je ne sais pas comment faire pour l'inclure...

    si quelqu'un ou toi a une solution, une piste je suis preneuse...

    merci et bonne soirée à tous et à toutes :)

    10
    Samedi 24 Octobre 2015 à 00:15

    Bonsoir fille du roi, 

    Comme solution pour l'instant je ne vois que :

    mettre ton gif dans un module simple puis avec du CSS, placer le module dans l'en tête

    ( comme c'est le cas pour mon menu à bouton rond ou le "dernière mise à jour. Ces modules là ont été position en fixe donc apparaissent toujours au même endroit de l'écran mais si tu positionnes ton module en absolute, le module restera toujours placé à mm endroit dans la page comme c'est le cas pour mon gant orange en bas a droite)

    il te faut récupérer le numéro du module puis

    http://bleulezard.eklablog.com/examiner-un-element-de-la-page-et-trouver-son-selecteur-a80512900

     

    #module_menuXXXXXXXXXX .module_menu_contenu_block{
        position: asbolute;
    top44px;/*distance du haut du blog*/
    left50%;/*milieu sur l'horizontale*/
    margin-left400px; /*marge avec le milieu si tu ne veux pas ton gif au milieu*/
    }

     Pour cacher le titre sur le blog tu ajoutes dans le CSS

    #module_menu_titreXXXXXXXXX {display:none;}

    11
    Samedi 24 Octobre 2015 à 00:32

    Vu l'heure tardive tu mérites encore plus des chapeaux bas et des remerciements !!! je vais tester demain tranquillement...

    te dirai sans faute ce que cela donne, merci encore milles fois et n'oublies pas de dormir...met la balise out et chut lol

     

    12
    Samedi 24 Octobre 2015 à 22:46

    Comme promis me revoilà...de fil en css et en html, j'ai planché sur plein truc et au final j'aimerai plutôt que mon petit slogan dans le header à côté de l'image qui est aussi dans le header, donc le slogan se mette à tourner du genre faire une ronde en biais bref bouger pas simplement défiler de droite  gauche ou inversement ...si tu as un code après je m'arrange pour les px et les valeurs pas de soucis...sinon pas grave, et je conclue MERCI tout plein pour ton blog ! sourires !

    13
    CS LGL Profil de CS LGL
    Jeudi 7 Septembre 2017 à 01:36

    Bjr,

    merci pour ce code qui a fonctionné immédiatement !
    Mais... comment faire pour que le module n'apparaisse pas ?

    Parce que ça fait moche...  :-)

    Merci

    14
    Samedi 9 Septembre 2017 à 14:29

    Bonjour, 



    Cela fait un petit bout de temps que je ne touche plus à mon blog donc j'ai un peu perdu la main...

    essaie en ajoutant dans le CSS

    #module_menu152574452 {

    display: none;}

    15
    Vendredi 15 Septembre 2017 à 16:53

    Merci.

    Ne sachant pas où l'insérer, j'ai tâtonné, en vain.

    J'ai donc supprimé le défilement car l'affichage de ce module fait vraiment tâche...

    Merci tout de même.

    16
    Mardi 21 Août 2018 à 23:38

    merci c'est super

    17
    Mardi 25 Septembre 2018 à 12:32

    Merci au petit lézard bleu ! 

     

    18
    Lundi 14 Janvier 2019 à 11:25

    Top j'ai réussi! Merci!

    19
    Vendredi 19 Mars 2021 à 06:37

    Bonjour,

    Merci beaucoup votre site est très bien conçu, je me tire parfois les cheveux :) mais avec de la patience j'y arrive 

    Encore merci bravo pour les explications

    20
    Samedi 7 Janvier 2023 à 16:09

    ah oui merci pour les codes et infos  pour faire des amusements sympas  belle année 2023 , et +++  A+  



    Ajouter un commentaire

    Nom / Pseudo :

    E-mail (facultatif) :

    Site Web (facultatif) :

    Commentaire :


//script feuille de style suppl