change @keyframe CSS dynamically

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

    jsonString = JSON.parse(jsonString);

console.log(jsonString);

$.keyframe.define([
      $.extend(
        { name: 'jsonString' }, 
           jsonString
        )
]);

jakecigar

Re: change @keyframe CSS dynamically

5 years ago

Why are you making it harder using strings?

JΛ̊KE

jakecigar

Re: Re: change @keyframe CSS dynamically

5 years ago

Before it was tocaSlide. Now it is jsonString?

JΛ̊KE

Carlos Ro..

Re: change @keyframe CSS dynamically

5 years ago

So I did it the way I did.

var jsonString = "{ \"0%\" : { \"margin-left\":\"-0%\"},";
jsonString += " \"25%\" : { \"margin-left\":\"-0%\"},";
jsonString += " \"30%\" : { \"margin-left\":\"-100%\"},";
jsonString += " \"50%\" : { \"margin-left\":\"-100%\"},";
jsonString += " \"55%\" : { \"margin-left\":\"-200%\"},";
jsonString += " \"75%\" : { \"margin-left\":\"-200%\"},";
jsonString += " \"80%\" : { \"margin-left\":\"-300%\"},";
jsonString += " \"100%\" : { \"margin-left\":\"-300%\"}}";
jsonString = JSON.parse(jsonString);

From this form it works.

Therefore, I need you help-me to transform the array into loop for the way below:

var jsonString ={};
for (i = 0; i < quantasImagens; i++) {
tMin = t + tempoTransicao;
tMax = t + tamanhoIntervalos;
t+=tamanhoIntervalos;
if(i==0) tMin=0;
if(i==quantasImagens) tMax=100;
jsonString += "'" + tMin + "%' : [{ 'margin-left':'-" + tempoImagens + "%'}],";
jsonString += "'" + tMax + "%' : [{ 'margin-left':'-" + tempoImagens + "%'}],";
tempoImagens+=100;
}
jsonString = JSON.parse(jsonString );

Ths way ins not works.

Where do am i wronging?

jakecigar

Re: change @keyframe CSS dynamically

5 years ago

Using strings is wrong. I can’t tell what is going wrong with your code.

JΛ̊KE

Carlos Ro..

Re: change @keyframe CSS dynamically

5 years ago

too wrong

var obj = obj;

for (i = 0; i < quantasImagens; i++) {

  tMin = t + tempoTransicao;
  tMax = t + tamanhoIntervalos;
  t += tamanhoIntervalos;

  if (i == 0) tMin = 0;
  if (i == quantasImagens) tMax = 100;

  obj[tMin + '%'] = { 'margin-left': '-' + tempoImagens + '%'};
  obj[tMax + '%'] = { 'margin-left': '-' + tempoImagens + '%'};
  tempoImagens += 100;
}


console.log(obj);

jakecigar

Re: change @keyframe CSS dynamically

5 years ago

Maybe your logic is wrong. Did you try it with hard coded CSS?

JΛ̊KE

Carlos Ro..

Re: change @keyframe CSS dynamically

5 years ago

it works with

var obj = new Array();

Re: change @keyframe CSS dynamically

5 years ago

You can use the Window.matchMedia() event. I have used it with great success.

JΛ̊KE

Carlos Ro..

Re: change @keyframe CSS dynamically

5 years ago

it's ok, just one more doubt:

$.keyframe.define(
[
$.extend(
{ name: 'tocaSlide' },
obj
)
]
);

But,

$.keyframe.define(
[
$.extend(
{ name: 'tocaSlide' },
{ duration : tempoTransicao + 's'}, //duration here
obj
)
]
);

duration no't works. Why?

jakecigar

Re: change @keyframe CSS dynamically

5 years ago

The duration is not a part of the keyframe. It’s a part of the CSS for the element.

Keyframe Animation Syntax | CSS-Tricks

JΛ̊KE

Carlos Ro..

Re: change @keyframe CSS dynamically

5 years ago

Once done, there is another problem:

When the slide arrives at the end, they will start again. But the first image does not receive the style and happens abruptly.

How to solve this?

jakecigar

Re: change @keyframe CSS dynamically

5 years ago

Your link does not work any longer. I can’t tell where you removed the CSS.

JΛ̊KE

Carlos Ro..

Re: change @keyframe CSS dynamically

5 years ago

Sorry, i forget,

http://www.hotplateprensas.com.br/estilos/slide2.php <--

jakecigar

Re: change @keyframe CSS dynamically

5 years ago

I guess you never tested with a hard coded @keyframes. Infinite does just that, unless you add a new step at the end to go back to the beginning.

JΛ̊KE

Carlos Ro..

Re: change @keyframe CSS dynamically

5 years ago

yes, i understand. But what i want is that when is arrive in end, star the new sequence already with the efect and not stop bruske!

Do you undestand-me/?

I try so:

if(i == quantasImagens - 1) {

$("div.slider ul.slide li:last").insertBefore("div.slider ul.slide li:first");

$("div.slider ul.slide").css('margin-left', '-'+100+'%');

}

But not works

jakecigar

Re: Re: change @keyframe CSS dynamically

5 years ago

unless you add a new step at the end to go back to the beginning.

A step in the keyframe.

JΛ̊KE

Carlos Ro..

Re: change @keyframe CSS dynamically

5 years ago

can you show-me How to do?.

In fact, i don't know how!

$.keyframe.define(

[

$.extend(

{ name: 'tocaSlide' },

obj

)

]

);

$("div.slider ul.slide").css({

'animation-duration' : tempoTransicao + 's',

'width' : (100.1 * quantasImagens) + '%'

});

$("div.slider ul.slide li:last").insertBefore($("div.slider ul.slide li:first"));

$("div.slider ul.slide").css("margin-left","-"+100+"%");

I try this form's but it not works

jakecigar

Re: change @keyframe CSS dynamically

5 years ago

  obj[ '100%'] = { 'margin-left':  '0%'};

Or whatever you need to show the first image.

JΛ̊KE

Carlos Ro..

Re: change @keyframe CSS dynamically

5 years ago

I understand!

But there is one more problem:

When the slide arrives at the end, it returns rolling to the next.

What I want is the rollover continue in the same direction.

Another problem is that when it starts again, it is having a time of about 10 seconds with a slide stopped ..

for (i = 0; i < quantasImagens; i++) {

tMin = tMax;

tMax += tamanhoIntervalos;

obj[tMin + '%'] = { 'margin-left': '-' + tempoImagens + '%'};

obj[tMax + '%'] = { 'margin-left': '-' + tempoImagens + '%'};

if(i == quantasImagens - 1) obj[ '100%'] = { 'margin-left': '0%'};

tempoImagens += 100;

}

jakecigar

Re: change @keyframe CSS dynamically

5 years ago

This kind of animation does not work that way. You can jump to the beginning or reverse.

To do that, you might copy the first image to the end of the list, then use javaScript to switch the last image to the first and repeat.

There are better ways to do a "slideshow".

JΛ̊KE

Carlos Ro..

Re: change @keyframe CSS dynamically

5 years ago

"copy the first image to the end of the list"?

Give-me a exemplo, please?

jakecigar

Re: change @keyframe CSS dynamically

5 years ago

$(".slide li:first").appendTo(".slide");

JΛ̊KE

Carlos Ro..

Re: change @keyframe CSS dynamically

5 years ago

Ok, but it will go to insider loop? or out this?

jakecigar

Re: change @keyframe CSS dynamically

5 years ago

before loop

JΛ̊KE

Carlos Ro..

Re: change @keyframe CSS dynamically

5 years ago

It not solved the problem: when arrive the second sequence again, the first image (li) show of abrupt form.

Therefore, happend a second minut of silence when the last li of first sequence show in the contêiner box, and next of this timer, then the second sequence, start.

I wish that after the last li of first sequence is showed, then the first li of seconde sequence is showed too.

jakecigar

Re: change @keyframe CSS dynamically

5 years ago

You have to adjust the percentages as well.

JΛ̊KE

jakecigar

Re: Re: change @keyframe CSS dynamically

5 years ago

You have the first slide in 2 positions. It has to show half the time in the last and half the time in the first, without any animation between them.

JΛ̊KE

jakecigar

Re: change @keyframe CSS dynamically

5 years ago

I was thinking about how complex this was getting last night. I got an idea on how to do it differently.

CSS Slide Plugin uses your image. What do you think? Do you see how it is done?

JΛ̊KE

Carlos Ro..

Re: change @keyframe CSS dynamically

5 years ago

Them i am having ery much dicultity to undestant the code that you make.

But, if you can help-me, see:

0%:{margin-left: "-0%"}

25%:{margin-left: "-100%"}

50%:{margin-left: "-200%"}

75%:{margin-left: "-300%"}

100%:{margin-left: "0%"}

Like this code, what is necessary change to that it works corretly?

This form, when it arrives in the end of first cycle, them it stop for a few second (+-3) thern next for the second cicle.

How can y do to that the first li of second cycle, start in the begining of 3 seconds???

So, we havent ths time of 3 seconds

jakecigar

Re: Re: change @keyframe CSS dynamically

5 years ago

Your code is too complex. It looks like the demo from the plugin’s page.

My code animates each side separately. At just the right time using animation-delay. Each slide waits in the front, slides off screen, invisibly jumps to the other side, then slides back in. They all repeat infinitely.

The trick I used is to immediately jump the position using 2 percentages that are very close in time.

Since my code works, you should read it until you understand it, or ask questions about it.

JΛ̊KE

PS the keyframe code you posted does not pause, and goes extremely quick back to the first image.

Carlos Ro..

Re: change @keyframe CSS dynamically

5 years ago

The code not pause cause i put it in the end of the for:

obj[ '100%'] = { 'margin-left': '0%'};

If i remove it, then it pause, give a few time, and then start the second sequence.

How antecipe the second sequence to it start toghther with las li of first cycle?

jakecigar

Re: change @keyframe CSS dynamically

5 years ago

I’ve already told you, that to make your code work, you need to copy the first to the end of the list. Then spend half the time on the last and half the time on the first without animation.

I doubt it’s worth trying to do it.

JΛ̊KE

PS your images are showing incorrectly. Each is a little more off than the previous. Look at the left side.

Carlos Ro..

Re: Re: change @keyframe CSS dynamically

5 years ago

O,

$(".slider .slide li:first").appendTo(".slider .slide");

Or

$("div.slider ul.slide li:first").insertAfter($("div.slider ul.slide li:last"));

Ok.

But,

spend half the time on the last and half the time on the first without animation.

It i dont know to do!

jakecigar

Re: change @keyframe CSS dynamically

5 years ago

It needs to be cloned

$("div.slider ul.slide li:first").clone().appendTo("div.slider ul.slide")

JΛ̊KE

jakecigar

Re: change @keyframe CSS dynamically

5 years ago

To spend half the time on the last and half the time on the first without animation.

You need to change your algorithm for allocating the time for each slide. Not so easy.

JΛ̊KE

jakecigar

Re: change @keyframe CSS dynamically

5 years ago

OR, you do a kludge like

<script>
$(document).ready(function(e) {
var tempoTransicao = 10;
$("div.slider ul.slide li:first").clone().appendTo("div.slider ul.slide")
var quantasImagens = $("div.slider ul.slide li img").length;
var tamanhoIntervalos = 100/quantasImagens;
var tempoImagens = 0;
var t = 0;
var obj ={ name: 'tocaSlide' };
for (i = 0; i < quantasImagens; i++) {
tMin = t + tempoTransicao;
tMax = t + tamanhoIntervalos;
t += tamanhoIntervalos;
if (i == 0) tMin = 0;
if (i == quantasImagens - 1) tMax = 100;
obj[tMin + '%'] = { 'margin-left': '-' + tempoImagens + '%'};
obj[tMax + '%'] = { 'margin-left': '-' + tempoImagens + '%'};
tempoImagens += 100;
}
console.log(obj);
$.keyframe.define([obj])
$("div.slider ul.slide").css({
'animation-duration' : tempoTransicao + 's',
}).on("animationiteration",function(e){
$(this).css("animation-delay", "-2s").removeClass("slide");
void this.offsetWidth;
$(this).addClass("slide");
})
});
</script>

JΛ̊KE

Carlos Ro..

Re: change @keyframe CSS dynamically

5 years ago

See you like be:

http://www.hotplateprensas.com.br/estilos/slide2.php

jakecigar

Re: change @keyframe CSS dynamically

5 years ago

<!doctype html>

<html>

<head>

<title>

Slide 8

</title>

<style>

* {

margin:0;

padding:0;

boder: none;

}

body {

width:1000px;

margin: auto;

}

div.slider {

width:100%;

overflow:hidden;

}

div.slider ul.slide {

width:9000%;

animation:tocaSlide infinite;

}

div.slider ul.slide li {

width:100%;

list-style:none;

}

div.slider ul.slide li img {

float:left;

}

</style>

</script>

</script>

$(document).ready(function(e) {

var tempoTransicao = 10;

$("div.slider ul.slide li:first").clone().appendTo("div.slider ul.slide")

var quantasImagens = $("div.slider ul.slide li img").length;

var tamanhoIntervalos = 100/quantasImagens;

var tempoImagens = 0;

var t = 0;

var obj ={ name: 'tocaSlide' };

for (i = 0; i < quantasImagens; i++) {

tMin = t + tempoTransicao;

tMax = t + tamanhoIntervalos;

t += tamanhoIntervalos;

if (i == 0) tMin = 0;

if (i == quantasImagens - 1) tMax = 100;

obj[tMin + '%'] = { 'margin-left': '-' + tempoImagens + '%'};

obj[tMax + '%'] = { 'margin-left': '-' + tempoImagens + '%'};

tempoImagens += 100;

}

console.log(obj);

$.keyframe.define([obj])

$("div.slider ul.slide").css({

'animation-duration' : tempoTransicao + 's',

}).on("animationiteration",function(e){

$(this).css("animation-delay", "-"+e.originalEvent.elapsedTime/quantasImagens+"s").removeClass("slide");

void this.offsetWidth;

$(this).addClass("slide");

})

});

</script>

</head>

<body>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</div>

</body>

</html>

JΛ̊KE

Carlos Ro..

Re: change @keyframe CSS dynamically

5 years ago

Well, now i will go study this.

Thank you!

jakecigar

Re: Re: change @keyframe CSS dynamically

5 years ago

Study my version too.

JΛ̊KE

Carlos Ro..

Re: change @keyframe CSS dynamically

5 years ago

Sim, com certeza:

ops sorry-me:

yes, have sure this

Response title

Attachments

Replies(55)

Statistics

Tags

Actions

Related Posts