Logo qui ne s'affiche pas

santini · mai 2019

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 :)

kowalsky · mai 2019

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;}

kowalsky · mai 2019

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

santini · mai 2019

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

Kube17 · mai 2019

@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.

santini · mai 2019

Merci,je vais regarder ça :)

kowalsky · mai 2019

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 :)

santini · mai 2019

Merci beaucoup :)

Logo qui ne s'affiche pas

Réponses