Выполняйте фоновую анимацию CSS для больших элементов без скрытого переполнения в теле и сохранения прокрутки. ⇐ CSS

[Anonymous]

Мне было интересно, существует ли метод, позволяющий анимировать большие объекты на заднем плане, не влияя на прокрутку страницы, потому что текущая ситуация, в которой я нахожусь, переполняет объекты при использовании позиции: абсолютное; на фоновых элементах, и если я хочу убрать прокрутку объектов с переполнением: скрыто; затем вся страница теряет прокрутку, и это еще одна вещь, которую я не хочу.

Есть идеи?

Рабочая скрипка:

https://jsfiddle.net/045pbrwk/9/

СКСС:

тело{ фон: серый; } .круги { &.закрытие { .bigCircle { анимация: bigCircleIn 1с 0с; количество итераций анимации: 1; режим анимации-заполнения: вперед; функция синхронизации анимации: кубический-безье (.86, 0, .07, 1); } .smallCircle { анимация: smallCircleIn 1с 0с; количество итераций анимации: 1; режим анимации-заполнения: вперед; функция синхронизации анимации: кубический-безье (.86, 0, .07, 1); } } &.opened { .bigCircle { анимация: bigCircleOut 1с 0с; количество итераций анимации: 1; режим анимации-заполнения: вперед; функция синхронизации анимации: кубический-безье (.86, 0, .07, 1); } .smallCircle { анимация: smallCircleOut 1с 0с; количество итераций анимации: 1; режим анимации-заполнения: вперед; функция синхронизации анимации: кубический-безье (.86, 0, .07, 1); } } .большойкруг, .smallCircle { позиция: абсолютная; белый цвет; } .bigCircle { ширина: 2947 пикселей; высота: 2947 пикселей; радиус границы: 2947 пикселей; выравнивание текста: по центру; фон: линейный градиент (204 градуса, #FFF 15,48%, rgba(255, 255, 255, 0,00) 62,97%); непрозрачность: 0,12; } .smallCircle { ширина: 1173 пикселей; высота: 1173 пикселей; радиус границы: 1173 пикселей; непрозрачность: 0,06; фон: линейный градиент (204 градуса, #FFF 15,48%, rgba(255, 255, 255, 0,00) 50,01%); } } @keyframes bigCircleOut { 0% { слева: -28%; верх: -70 пикселей; } 100% { слева: 100%; верх: -70 пикселей; } } @keyframes bigCircleIn { 0% { слева: 100%; верх: -70 пикселей; } 100% { слева: -28%; верх: -70 пикселей; } } @keyframes smallCircleOut { 0% { слева: -50%; верх: 50%; } 100% { слева: -82%; верх: 50%; } } @keyframes smallCircleIn { 0% { слева: -82%; верх: 50%; } 100% { слева: -50%; верх: 50%; } } JS:

$('.circles').toggleClass('открыто закрытие'); HTML:

Элемент заголовка Какой-то элемент парагра