Ir ao conteúdo
  • Cadastre-se
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

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

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? 

Compartilhar este post


Link para o post
Compartilhar em outros sites

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

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',
          });
          
      });
      
    });

 

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

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora





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

×