Ir ao conteúdo
  • Comunicados

    • Gabriel Torres

      Seja um moderador do Clube do Hardware!   12-02-2016

      Prezados membros do Clube do Hardware, Está aberto o processo de seleção de novos moderadores para diversos setores ou áreas do Clube do Hardware. Os requisitos são:   Pelo menos 500 posts e um ano de cadastro; Boa frequência de participação; Ser respeitoso, cordial e educado com os demais membros; Ter bom nível de português; Ter razoável conhecimento da área em que pretende atuar; Saber trabalhar em equipe (com os moderadores, coordenadores e administradores).   Os interessados deverão enviar uma mensagem privada para o usuário @Equipe Clube do Hardware com o título "Candidato a moderador". A mensagem deverá conter respostas às perguntas abaixo:   Qual o seu nome completo? Qual sua data de nascimento? Qual sua formação/profissão? Já atuou como moderador em algo outro fórum, se sim, qual? De forma sucinta, explique o porquê de querer ser moderador do fórum e conte-nos um pouco sobre você.   OBS: Não se trata de função remunerada. Todos que fazem parte do staff são voluntários.
    • DiF

      Poste seus códigos corretamente!   21-05-2016

      Prezados membros do Fórum do Clube do Hardware, O Fórum oferece um recurso chamado CODE, onde o ícone no painel do editor é  <>     O uso deste recurso é  imprescindível para uma melhor leitura, manter a organização, diferenciar de texto comum e principalmente evitar que os compiladores e IDEs acusem erro ao colar um código copiado daqui. Portanto convido-lhes para ler as instruções de como usar este recurso CODE neste tópico:  
carcleo

JQuery Entregar html à @keyframe css

Recommended Posts

como eu consigo fazer isso?

Tenho o seguinte código com o objetivo de adicionar propriedades ao `@keyframe tocaSlide`

    $("<style> @keyframes tocaSlide").html(texto);

A variável texto tem o seguinte conteúdo

'0%' : { 'margin-left':'-0%'},
'25%' : { 'margin-left':'-0%'},
'30%' : { 'margin-left':'-100%'},
'50%' :{ 'margin-left':'-100%'},
'55%' : { 'margin-left':'-200%'},
'75%' : { 'margin-left':'-200%'},
'80%' : { 'margin-left':'-300%'},
'100%' : { 'margin-left':'-300%'}

ficou assim:

texto = "'0%' : { 'margin-left':'-0%'},";
texto += "'25%' : { 'margin-left':'-0%'},";
texto += "'30%' : { 'margin-left':'-100%'},";
texto += "'50%' :{ 'margin-left':'-100%'},";
texto += "'55%' : { 'margin-left':'-200%'},";
texto += "'75%' : { 'margin-left':'-200%'},";
texto += "'80%' : { 'margin-left':'-300%'},";
texto += "'100%' : { 'margin-left':'-300%'}";

Nenhum erro no console mas o @keyframe não está recebendo o html

Também tentei com:

     var supportedFlag = $.keyframe.isSupported();
    
     $.keyframe.define([{
       name: 'tocaSlide',
       texto
     }]);      

Mas também não funcionou.

e uma nova tentativa:
    

    $("div.slider ul.slide").playKeyframe(
        texto
    );

Também não funcionou.

 

Alguém pode me ajudar

Compartilhar este post


Link para o post
Compartilhar em outros sites

@carcleo Olá, precisa mesmo ser com jQuery?

Você pode fazer a animação via CSS3 direto sem a intervenção do Javascript.

 

@-webkit-keyframes moveParaEsquerda {
     0%  { margin-left: 0px;}
    25%  { margin-left: 0px;}
    30%  { margin-left: -100px;}
    50%  { margin-left: -100px;}
    55%  { margin-left: -200px;}
    75%  { margin-left: -200px;}
    80%  { margin-left: -300px;}
    100% { margin-left: -300px;}
}

 

Então chamar a animação na regra do elemento:

p {
    width: 100px;  
    background: red;
    position: relative;
    -webkit-animation: moveParaEsquerda 5s infinite; /* Safari 4.0 - 8.0 */
    animation: moveParaEsquerda 5s infinite;
    left: 500px;
    text-align: center;
}

 

Desta maneira: http://jsfiddle.net/dife/La7kcas0/1/

Compartilhar este post


Link para o post
Compartilhar em outros sites
  • Autor do tópico
  • Então, precisa sim. Pois essa variável com os css's a inserir no keyframe, é gerada em um loop que dependerá do número de imagens que serão inseridas no slide.

     

    Entendeu a necessidade?

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites

    @carcleo Bem, ainda não entendi a real necessidade.

    Pois se o elemento onde conterá o número X de slides terá o mesmo efeito.... você pode definir a animação apenas uma vez e aplicar diretamente no elemento.. isso daria até para mesclar  slide com X imagens, slide com Y textos....

     

    E mesmo assim, se quiser usar o jquery, você pode fazer a animação via CSS e aplicar nos elementos do loop, a classe destinada a animação. 

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites
  • Autor do tópico
  • Veja a situação:

     

    Como te falei, estou tentando de 2 formas:

     

    O CSS e HTML de ambas é a mesma, o que muda é só o JS


    CSS

      * {      
          margin:0;
          padding:0;
          boder: none;
      }
      body {
          width:1000px;
          margin: auto;
      }
      div.slider {
          width:100%;
          overflow:hidden;
      }
      div.slider ul.slide {
          width:400.5%;
          animation:tocaSlide infinite;
      }  
      div.slider ul.slide li {
          width:100%;
          list-style:none;
      }
      div.slider ul.slide li img {
          float:left;
      }
      @keyframes tocaSlide {}

    HTML

      <div class="slider">
        <ul class="slide">
          <li><img src="_imgs/_slideShow/1.png" /></li>
          <li><img src="_imgs/_slideShow/2.png" /></li>
          <li><img src="_imgs/_slideShow/3.png" /></li>
          <li><img src="_imgs/_slideShow/4.png" /></li>
        </ul>
      </div>

    jScript 1
     

    $(document).ready(function(e) {
        
      $("div.slider ul.slide").ready(function(e) {
          
          var tempoTransicao = 5;
          var quantasImagens = $("div.slider ul.slide li img").size();
          var tamanhoIntervalos = Math.round(100/quantasImagens);
          var tempoImagens = 0;
          var t = 0;    
          var imagem = [];
          for (i = 0; i < quantasImagens; i++) {    
          
              tMin = t + tempoTransicao;
              tMax = t + tamanhoIntervalos;    
              t+=tamanhoIntervalos;
              if(i==0) tMin=0;
              if(i==quantasImagens) tMax=100;          
              imagem[i] = [];
              imagem[i].push(tMin + "% { margin-left:-" + tempoImagens + "%};");
              imagem[i].push(tMax + "% { margin-left:-" + tempoImagens + "%};");
              
              tempoImagens+=100;
              
          }
          texto = "";
          
          for (po=0; po<imagem.length; po++) {
              texto += imagem[po][0]+imagem[po][1];
          }
          //document.write(texto);
          $("<style> @keyframes tocaSlide").html(texto);
          
          $("div.slider ul.slide").css({
                'animation-duration' : tempoTransicao + 's',
          });
          
      });
      
    });

    jScript 2

    $(document).ready(function(e) {
    	
      $("div.slider ul.slide").ready(function(e) {
    	  
    	  var tempoTransicao = 10;
    	  var quantasImagens = $("div.slider ul.slide li img").size();
    	  var tamanhoIntervalos = Math.round(100/quantasImagens);
    	  var tempoImagens = 0;
          var t = 0;		  
    	  var supportedFlag = $.keyframe.isSupported();
    	  var texto = "";
    	  
    	  for (i = 0; i < quantasImagens; i++) {	
    	  
    		  tMin = t + tempoTransicao;
    		  tMax = t + tamanhoIntervalos;	
    		  t+=tamanhoIntervalos;
    
              texto+= tMin + '% : { margin-left:-' + tempoImagens + '% },';
              texto+= tMax + '% : { margin-left:-' + tempoImagens + '% },';
    
    		  if(i==0) tMin=0;
    		  if(i==quantasImagens) tMax=100;	
    		  tempoImagens+=100;
    		  
    	  }
    	  
    	  /*variavel texto gerada dinamicamente dentro do laço for acima*/
    	  /*
    	  texto = "'0%' : { 'margin-left':'-0%'},";
    	  texto += "'25%' : { 'margin-left':'-0%'},";
    	  texto += "'30%' : { 'margin-left':'-100%'},";
    	  texto += "'50%' :{ 'margin-left':'-100%'},";
    	  texto += "'55%' : { 'margin-left':'-200%'},";
    	  texto += "'75%' : { 'margin-left':'-200%'},";
    	  texto += "'80%' : { 'margin-left':'-300%'},";
    	  texto += "'100%' : { 'margin-left':'-300%'}";
    	  */
    	  
    	  $.keyframe.define([{
    		 name: 'tocaSlide',
    		 content: texto
    	  }]);     	  
    
    	  $("div.slider ul.slide").css({
    			'animation-duration' : tempoTransicao + 's',
    	  });
    	  
      });
      
    });

    Imagine se adicionasse ou removesse alguma imagem no html? 

    Editado por carcleo

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites
  • Autor do tópico
  • Se por acaso, as imagens forem reduzidas de 4 para 3, a nova variável texto ficará assim:

    texto = "'0%' : { 'margin-left':'-0%'},"; 
    texto += "'33%' : { 'margin-left':'-0%'},";
    texto += "'38%' : { 'margin-left':'-100%'},"; 
    texto += "'66%' :{ 'margin-left':'-100%'},"; 
    texto += "'71%' : { 'margin-left':'-200%'},"; 
    texto += "'100%' : { 'margin-left':'-200%'},";;

    Percebe como mudam as porcentagens em relação às mudanças no número de imagens?

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites

    @carcleo Não seja por isso...  basta desenvolver a parte responsiva para as imagens... assim mesmo que diminua as imagens, reduza o tamanho delas, ou acrescente mais imagens....

    Quem controla isso  é a regra em CSS, como eu disse você pode fazer um slide diretamente em CSS3 sem o jQuery.

     

    Mesmo assim, se você quer usar o jQuery.. porque não busca um plugin já pronto? Existem centenas de plugins ótimos, alguns até já usei. Mas atualmente tenho dado mais ênfase para o CSS3 animations mesmo. Por ser mais leve.

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites
  • Autor do tópico
  • Entendi. Mas, por favor, faz um teste aí.

     

    Sem alterar o css,

     

    Remova 1 ou 2 imagens e vê o que acontece no final da animação.

     

    Agora faça o contrario: adicione mais 2 imagens e vê o que ocorre.

     

    Entendeu agora porque estou fazendo isso?

     

    Então,

     

    Por favor, consegui fazer json porque ví nas pesquisas que o <style> aceita json, mas agora estou com outro problema:

     

    O objeto json, imprimiu assim no log

        (8) ["0% { margin-left:-0%}", "25% { margin-left:-0%}", "30% { margin-left:-100%}", "50% { margin-left:-100%}", "55% { margin-left:-200%}", "75% { margin-left:-200%}", "80% { margin-left:-300%}", "100% { margin-left:-300%}"]
        0
        :
        "0% { margin-left:-0%}"
        1
        :
        "25% { margin-left:-0%}"
        2
        :
        "30% { margin-left:-100%}"
        3
        :
        "50% { margin-left:-100%}"
        4
        :
        "55% { margin-left:-200%}"
        5
        :
        "75% { margin-left:-200%}"
        6
        :
        "80% { margin-left:-300%}"
        7
        :
        "100% { margin-left:-300%}"
        length
        :
        8
        __proto__
        :
        Array(0)

    Agora os problemas são os seguintes e são 2:

    Preciso lançar esse resultado como parâmetro e conheço duas formas de fazê-lo;

    A)

          $.keyframe.define([{
             name: 'tocaSlide',
            // Quando adiciono definicaoCSS aqui dá erro no script
          }]);        

    B)

          $("body").css("@keyframe tocaSlide", function() {
        
            // Quando adiciono definicaoCSS aqui NÃO dá erro no script, mas o keyframe não recebe o style
        
          });

    O que faço agora?

    Veja o js completo:

    
        $(document).ready(function(e) {
            
          $("div.slider ul.slide").ready(function(e) {
              
              var tempoTransicao = 5;
              var quantasImagens = $("div.slider ul.slide li img").size();
              var tamanhoIntervalos = Math.round(100/quantasImagens);
              var tempoImagens = 0;
              var t = 0;    
              var imagem = "";
              var imagem2 = "";
              
              for (i = 0; i < quantasImagens; i++) {    
              
                  tMin = t + tempoTransicao;
                  tMax = t + tamanhoIntervalos;    
                  t+=tamanhoIntervalos;
        
                  if(i==0) tMin=0;
                  if(i==quantasImagens) tMax=100;          
        
                  imagem += tMin + "% { margin-left:-" + tempoImagens + "%},";
                  imagem += tMax + "% { margin-left:-" + tempoImagens + "%},";
                  
                  imagem2 += "'" + tMin + "'% { 'margin-left':'-" + tempoImagens + "%'},";
                  imagem2 += "'" + tMax + "'% { 'margin-left':'-" + tempoImagens + "%'},";
                  
                  tempoImagens+=100;
                  
              }
              var slide = {};
              
              var trechos = imagem.slice(0, -1).split(',');
              var trechos2 = imagem2.slice(0, -1).split(',');
              slide[trechos2];
              
              //console.log(trechos);
              
              $.keyframe.define([{
                 name: 'tocaSlide',
                 slide
              }]);          
              
              $("<style> @keyframes tocaSlide").html(trechos);
              
              $("div.slider ul.slide").css({
                    'animation-duration' : tempoTransicao + 's',
              });
              
          });
          
        });

     

    Editado por carcleo

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites
  • Autor do tópico
  • Ainda não consegui, se alguém souber como agradeço!

    Compartilhar este post


    Link para o post
    Compartilhar em outros sites

    Crie uma conta ou entre para comentar

    Você precisar ser um membro para fazer um comentário






    Sobre o Clube do Hardware

    No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

    Direitos autorais

    Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

    ×