Фоновое изображение прокрутки параллакса с автоматическим увеличением и уменьшением масштаба

Question

Хотите уменьшить масштаб изображения Я пытаюсь сделать это с помощью CSS и обычного jQuery с эффектом прокрутки, но он не работает.

Прокрутка Я добавляю CSS для увеличения, но это не уменьшение.

http://ucanedu.in/uraban/

Любая помощь очень ценится.

Answer 1

Для эффекта прокрутки параллакса лучше всего использовать простую CSS-анимацию с 3 или 4 слоями, анимирующую фон от 0 до 100%, как показано в этом или этом примере.

@keyframes animatedBackground {
  from { background-position: 0 0; }
  to { background-position: 100% 0; }
}

animation: animatedBackground 80s linear infinite;

Для увеличения и уменьшения CSS-анимации это на самом деле не эффект параллакса, это просто увеличение и уменьшение масштаба, для этого вы можете использовать CSS-переход для элемента контейнера, как показано в этом примере.

transition:All 1s ease;
transform: scale(3) translateX(120px);