-
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*/
Tags : défilant
-
Commentaires
1Julie Pietri
Lundi 15 Septembre 2014 à 19:40Merci ! super bonne idée, ça !
RépondreHeu ... 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.
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
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 :)
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;
top: 44px;/*distance du haut du blog*/
left: 50%;/*milieu sur l'horizontale*/
margin-left: 400px; /*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;}
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
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 !
13CS LGL
Jeudi 7 Septembre 2017 à 01:36Bjr,
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
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;}
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.
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
ah oui merci pour les codes et infos pour faire des amusements sympas belle année 2023 , et +++ A+
Ajouter un commentaire
COUCOU ! Si vous voulez vous fabriquer un masque barrière.
-
secouez-moi tourne web police Zoom pipette curseur perso ModuleLiens Diaporama rechercher eklablog tableau animationCSS éditeur article nov 13 code html webFonts nuagetags Étoiles polices de caractères tombe la neige réduire hauteur colonnes menu éditeur tombe les coeurs border-image menu entête Thème postit puces
Voir tous les tags
-
Dernière mise à jour
-
-
glisser avec la souris →
-
Plus joli avec
Créer mon blog