Logo qui ne s'affiche pas

santinisantini Membres

Salut les copains,

Je vais m'arracher les cheveux lol

J'ai un logo animé via css que je souhaite afficher dans le "header" a la place du titre de mon site.

Logo ne s'affiche pas, après plusieurs tentative j'ai réussie au mieux a avoir une page blanche ou le logo sans animation.

Il es pourtant simple d'afficher une image, mais là est ce du au fat qu'il soit animé...

Voici le logo que je souhaite afficher : http://buzz-local.fr/logo.html

HTML:

<!DOCTYPEhtml>
<htmllang="en"class="no-js">

<head>
   <linkrel="stylesheet"type="text/css"href="css/style12.css"/>
   <!--[ifIE]>
       <scriptsrc="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
      <![endif]-->
</head>

<body>
   <divclass="container">
       <divclass="content">
           <svgviewBox="00600300">

               <!--Symbol-->
               <symbolid="s-text">
                   <texttext-anchor="middle"x="50%"y="50%"dy=".35em">
                       BUZZLOCAL
                   </text>
               </symbol>

               <!--Duplicatesymbols-->
               <usexlink:href="#s-text"class="text"></use>
               <usexlink:href="#s-text"class="text"></use>
               <usexlink:href="#s-text"class="text"></use>
               <usexlink:href="#s-text"class="text"></use>
               <usexlink:href="#s-text"class="text"></use>

           </svg>
       </div>
   </div>
   <!--/container-->
</body>

</html>


CSS:

.text{
 fill:none;
 stroke-width:6;
 stroke-linejoin:round;
 stroke-dasharray:70330;
 stroke-dashoffset:0;
 -webkit-animation:stroke6sinfinitelinear;
 animation:stroke6sinfinitelinear;}
 .text:nth-child(5n+1){
   stroke:#DB0073;
   -webkit-animation-delay:-1.2s;
   animation-delay:-1.2s;}
 .text:nth-child(5n+2){
   stroke:#f5f503;
   -webkit-animation-delay:-2.4s;
   animation-delay:-2.4s;}
 .text:nth-child(5n+3){
   stroke:#E9F1DF;
   -webkit-animation-delay:-3.6s;
   animation-delay:-3.6s;}
 .text:nth-child(5n+4){
   stroke:#56a5fd;
   -webkit-animation-delay:-4.8s;
   animation-delay:-4.8s;}
 .text:nth-child(5n+5){
   stroke:#4c3abf;
   -webkit-animation-delay:-6s;
   animation-delay:-6s;}

@-webkit-keyframesstroke{
 100%{
   stroke-dashoffset:-400;}}
@keyframesstroke{
 100%{
   stroke-dashoffset:-400;}}
/*Otherstuff*/
html,
body{
 height:100%;}

.content{
 font:1006em'OpenSans',Impact;}

svg{
 width:30%;
 margin:0auto;
 display:block;
 text-transform:uppercase;}


En vous remerciant par avance :)

Réponses

  • kowalskykowalsky Membres

    C'est super joli !

    Sur ta page d'accueil, rajoute le code suivant entre les lignes <div class="header"> et <section class="menu">

    <div class="header">
    
    
    
                  
    <svg viewBox="0 0 600 300">
    <!-- Symbol -->  
    <symbol id="s-text">
    <text text-anchor="middle" x="50%" y="50%" dy=".35em">BUZZ LOCAL</text>
                    
    </symbol>                <!-- Duplicate symbols -->         
           <use xlink:href="#s-text" class="text"></use>        
            <use xlink:href="#s-text" class="text"></use>       
             <use xlink:href="#s-text" class="text"></use>      
              <use xlink:href="#s-text" class="text"></use>     
               <use xlink:href="#s-text" class="text"></use>    
            </svg>
    
    
    
    <section class="menu">
    

    Et rajoute le CSS suivant dans la section header de ton style.css


    .text {  fill: none;  stroke-width: 6;  stroke-linejoin: round;  stroke-dasharray: 70 330;  stroke-dashoffset: 0;  -webkit-animation: stroke 6s infinite linear;  animation: stroke 6s infinite linear; } 
    .text:nth-child(5n + 1) {    stroke: #DB0073;    -webkit-animation-delay: -1.2s;    animation-delay: -1.2s; }  
    .text:nth-child(5n + 2) {    stroke: #f5f503;    -webkit-animation-delay: -2.4s;    animation-delay: -2.4s; }  
    .text:nth-child(5n + 3) {    stroke: #E9F1DF;    -webkit-animation-delay: -3.6s;    animation-delay: -3.6s; }  
    .text:nth-child(5n + 4) {    stroke: #56a5fd;    -webkit-animation-delay: -4.8s;    animation-delay: -4.8s; }  
    .text:nth-child(5n + 5) {    stroke: #4c3abf;    -webkit-animation-delay: -6s;    animation-delay: -6s; }
    @-webkit-keyframes stroke {  100% {    stroke-dashoffset: -400; } }
    @keyframes stroke {  100% {    stroke-dashoffset: -400; } }
    
    /* Other stuff */
    svg {  width: 30%;  margin: 0 auto;  display: block;  text-transform: uppercase; font-size: 6em;}
    


  • kowalskykowalsky Membres

    tu remettras en forme le code en virant les espaces inutiles, je ne maitrise pas encore l'editeur du nouveau forum et je n'ai pas trouvé comment afficher le code source du message pour nettoyer tout ca

  • santinisantini Membres

    Coucou, Merci beaucoup j'ai appliquer a la lettre ce que tu ma dit ,mais situ regarde le site tu verra que le logo "bug" et qu'ilne s'affiche pas correctement, bizarre ?

    • Second problème que je n'ai pas su résoudre après divers "teste",il s'agit de toute la marge que j'aimerai enlever autour du logo...

    merci

  • Kube17Kube17 PluXml Staff
    18 mai modifié

    @santini j'obitens un résultat pas trop dégeu avec un

    .text{ 
        font-size: 7em;
    }
    

    Ce qui fait ce résultat tout petit, c'est que ton logo étant un texte, il hérite de base des règles attribuées à ton body vu que rien ne le grandit ensuite:

    body{
       font-family:Roboto,helvetica,arial,sans-serif;
       font-size:1.5em;
       line-height:1.5;
    }
    

    Donc c'est tout petit.

    MP - Mail - unkorneglosk.fr - Twitter - Je suis modérateur, je dois donc modérater. Ou modérationner. Ou je sais plus. Mais je le fais.

  • santinisantini Membres

    Merci,je vais regarder ça :)

  • kowalskykowalsky Membres

    Pour les marges, cela vient des valeurs que tu renseignes dans <svg viewBox="0 0 600 300"> et dans <text text-anchor="middle" x="50%" y="50%" dy=".35em">BUZZ LOCAL</text>

    Mais comme je ne connais pas cela, je ne peux pas trop t'aider. Toutefois en modifiant à <svg viewBox="0 0 200 50"> ça devient à peu près potable. Par contre l'effet sur le texte n'est plus le même. :(

    Faudra lire la doc pour ajuster au mieux :)

  • santinisantini Membres

    Merci beaucoup :)

Connectez-vous ou Inscrivez-vous pour répondre.