Блог

Итак, я кодирую эффект параллакса в CSS3 с 3 слоями для заголовка страницы. Моя таблица стилей выглядит следующим образом:

 #graphic-layer { /* overall properties for graphic layers */
    position: absolute;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}
#graphic-layer.header { /* header-class */
    width: 100%;
    height: 150px;
    background-repeat: repeat-x;
    -webkit-animation-name: header;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}
#graphic-layer.header:nth-of-type(1) {  /* parallax layer 1 */
    background-image: url('images/header-background.jpg');
    -webkit-animation-duration: 100s;
}
#graphic-layer.header:nth-of-type(2) {  /* parallax layer 2 */
    background-image: url('images/header-middle.png');
    -webkit-animation-duration: 80s;
}
#graphic-layer.header:nth-of-type(3) { /* parallax layer 3 */
    background-image: url('images/header-foreground.png');
    -webkit-animation-duration: 60s;
}
@-webkit-keyframes header {  /* keyframes */
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 100% 0; /* <- PROBLEM HERE */
    }
}
 

РЕДАКТИРОВАТЬ: HTML, просто три экземпляра графического слоя с заголовком класса:

 <div id="graphic-layer" class="header"></div>
<div id="graphic-layer" class="header"></div>
<div id="graphic-layer" class="header"></div>
 

Пока все хорошо. Обратите внимание, что мой заголовок занимает 100% ширины экрана. Это прекрасно работает, если я установлю положение фона в ключевом кадре на 100% background-position: 1920px 0; равным (моя ширина экрана / окна), но как только разрешение окна изменится, это, очевидно, больше не будет работать. Если я установлю значение ниже, например, до 500 пикселей, изображение переместится на 500 пикселей и вернется к началу, но я хочу, чтобы оно непрерывно перемещалось без «прыжков».

Поэтому мне нужно решение, чтобы изображение перемещалось ровно на 100% ширины заголовка, а затем перезапускало анимацию. Но когда я устанавливаю положение фона в ключевом кадре на 100% background-position: 100% 0; , он вообще не перемещается.

В чем здесь проблема? Почему процентные значения не работают?

Редактировать:

Я сам нашел ответ!

Это была просто глупая ошибка в рассуждениях. #graphic-layer.header не обязательно должно быть 100% заголовка, но 100% изображения, что является статическим значением (в данном случае 1920 пикселей). Итак, если я установлю ширину в 3480 пикселей (1920×2), а затем изменю ключевые кадры на следующие:

 @-webkit-keyframes header {  /* keyframes */
    0% {
        left: 0;
    }
    100% {
        left: -1920px; /* <- Image size */
    }
}
 

… затем класс заголовка перемещается на 1920 пикселей влево и начинается снова, и из-за удвоенной ширины класса кажется, что это бесконечное изображение. Нет необходимости в относительных процентных значениях!