JQuery Entregar html à @keyframe css

carcleo · 26 de outubro de 2017

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

DiF · 26 de outubro de 2017

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

carcleo · 26 de outubro de 2017

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?

DiF · 26 de outubro de 2017

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

carcleo · 26 de outubro de 2017

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?

carcleo · 27 de outubro de 2017

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?

DiF · 27 de outubro de 2017

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

carcleo · 27 de outubro de 2017

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

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