Hello.
Do not tell me how to implement such a thing:

  1. We have a slider, where on one slide there are three elements (div for example).

  2. This slider scrolls through 3 elements at once, it turns out one slide at a time (1 slide = (contains) 3 elements).

So, how to make an animation when scrolling, similar to this description:

  1. These three elements on the active slide are moving one after another, for example, to the left.

  2. Then, on the right, three new elements come out one after the other, by paravozik. )))

And exactly one after the other, i.e. at first we see the first element of the slide, after a while the second one ... when the first one reaches the end and stops, the second one still goes to its place. => It turns out that the animation is applied with a delay to each element of the slide.

Like a stack or balls in the hole, roll up: 1 stop goes - 2nd stop goes (about the first). (And the second one appears when the first has not reached the end and at some point in time they both move to the final position on the slide.)

Maybe there is a ready-made slider with such an implementation? I do not ask for ready-made code, just an algorithm / approach, how to do it!

  • You need a .pause() method that adds a pause to the animation. A specific time can be calculated through [the difference in time of neighboring elements] * [element index]. - etki
  • one
    A million variants, for example, you can "hang" a class on the active slide, and prescribe the order of displaying elements within this slide, using css animations, or say transition-delay. - ferrari
  • I found what I meant - yootheme.com/demo/themes/joomla/2011/shelf/… The first slider (Slide Example). I also want to do this, only CAM! The idea with css-animation understood, there just the transform and delay are convenient, sort of like! - pankovalxndr
  • CSS handles this easily, good luck! - ferrari

0