Отзывчивая фоновая прокрутка с постоянной скоростью - PullRequest
Новая
       8

Отзывчивая фоновая прокрутка с постоянной скоростью

0 голосов
/ 05 января 2019

Я хочу использовать отзывчивый div с прокруткой фонового изображения.

В примере я показал его маленьким и большим. Я хочу, чтобы весь скролл был постоянным - поэтому маленький div должен занимать x секунд, а большой div также должен занимать x секунд (вместо маленького div, занимающего меньше времени для завершения панорамирования всего изображения, чем большего).

Я пытался использовать процентные значения в background-position-x, но он останавливает анимацию. 

.offset {
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png');
  background-size: 100%;
  animation: slideLeft768px 5s linear infinite;
}

.div1 {
  width: 76.8px;
  height: 57.6px;
}

.div2 {
  width: 768px;
  height: 576px;
}

@keyframes slideLeft768px {
  0% {
    background-position-x: 768px;
  }
  100% {
    background-position-x: 0px;
  }
}
<div class="offset div1"></div>
<div class="offset div2"></div>

====================

Это основано на ответе Темани Афифа: 

.offset {
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png');
  background-size: 100%;
  animation: slideLeft 5s linear infinite;
  width: var(--p);
  --p: 40vw;
  height: 30vw;
}
.div1 {
    --p: 12vw;
    height: 9vw;
}

@keyframes slideLeft {
  0% {
    background-position-x: var(--p);
  }
  100% {
    background-position-x: 0px;
  }
}  
<div class="offset div1"></div>
<div class="offset div2"></div>

Я сделал так, чтобы использовались только адаптивные юниты, поэтому он корректируется при изменении размера окна.

Ответы [ 2 ]

0 голосов
/ 05 января 2019

Хитрость заключается в том, чтобы использовать процент для фоновой позиции. Поскольку установка размера фона на 100% делает это невозможным, нам нужно установить для него другое значение.

Хитрость заключается в том, чтобы использовать для этого отступы. Создайте отступ справа того же размера, что и ширина. Делая фоновый источник прямоугольным блоком и обрезая содержимое блока, теперь мы можем установить размер до 50%. Визуально ничего не изменится. (В случае, если дополнительные отступы являются проблемой, вы можете установить отрицательное поле или путь клипа). И теперь, background-position можно перемещать в процентах: 

.offset {
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png');
  background-size: 50%;
  background-origin: border-box;
  background-clip: content-box;
  animation: slideLeft768px 5s linear infinite;
}

.div1 {
  width: 76.8px;
  padding-right: 76.8px;
  height: 57.6px;
}

.div2 {
  width: 768px;
  padding-right: 768px;
  height: 576px;
}

@keyframes slideLeft768px {
  0% {
    background-position-x: 100%;
  }
  100% {
    background-position-x: 0%;
  }
}
<div class="offset div1"></div>
<div class="offset div2"></div>
0 голосов
/ 05 января 2019

Вы можете рассмотреть переменную CSS, чтобы сделать анимацию динамической: 

.offset {
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png');
  background-size: 100%;
  animation: slideLeft768px 5s linear infinite;
  width: var(--p);
}

.div1 {
  --p: 76.8px;
  height: 57.6px;
}

.div2 {
  --p:768px;
  height: 576px;
}

@keyframes slideLeft768px {
  0% {
    background-position: var(--p,0px) 0px;
  }
  100% {
    background-position: 0px 0px;
  }
}
<div class="offset div1"></div>
<div class="offset div2"></div>

И поскольку вы используете одно и то же изображение с известным измерением, вы можете оптимизировать свой код, как показано ниже: 

.offset {
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/c/c4/PM5544_with_non-PAL_signals.png');
  background-size: 100%;
  animation: slideLeft768px 5s linear infinite;
  width: calc(768px * var(--p,1));
  height: calc(576px * var(--p,1));
}

.div1 {
  --p: 0.1;
}

.div2 {
  --p:0.2;
}

@keyframes slideLeft768px {
  0% {
    background-position: calc(768px * var(--p,1)) 0px;
  }
  100% {
    background-position: 0px 0px;
  }
}
<div class="offset div1"></div>
<div class="offset div2"></div>
<div class="offset" style="--p:0.8"></div>

Вы также можете проверить этот ответ (https://stackoverflow.com/a/51734530/8620333), чтобы понять, почему процентное значение не будет работать и как заставить его работать.

...