Блог

Мне нравится слайдер / карусель на этом сайте, поэтому я пытаюсь его воспроизвести.

Моя проблема с масштабированием, я не могу заставить его масштабироваться таким же образом.

Я хочу, чтобы он масштабировался до центра снизу, как на примере веб-сайта.

Вот что у меня есть до сих пор: JSFiddle

jCarousel:

     // Initialize jCarousel
    carousel.jcarousel({
        vertical: true,
        center: true,
        wrap: 'circular',
        animation: {
            duration: 1500,
            easing:   'linear'
        }
    });

    // Bind events
    carousel.on('jcarousel:animate', function (event, carousel) {
        carousel.target().css('width', '160%').animate({
            width: '100%'
        }, carousel.options('animation').duration * 1.5, function () {
            canSlide = true;
        });
    });
  

CSS:

 .jcarousel-slide {
    background-clip: border-box;
    background-origin: padding-box;
    background-position: 50% 0%;
    background-repeat: no-repeat;
    background-size: cover;
}
  

(Полный проект в JSFiddle)

Положение фона, похоже, не имеет значения, оно по-прежнему масштабируется до верхнего левого угла.

Есть идеи, как это сделать?

Мое решение — установить левое поле перед анимацией, а затем анимировать до левого поля 0

 carousel.on('jcarousel:animate', function (event, carousel) {
  carousel.target().css('width', '160%').css('margin-left', -(carousel.target().width()/4) 'px').animate({
    width: '100%',
    marginLeft: '0'
  }, carousel.options('animation').duration * 1.5);
});
  

Возможно, есть лучший способ решить эту проблему, но это то, что у меня есть сейчас.

О, и последняя скрипка (с этим эффектом): JSFiddle.net