Создание эффекта параллакса с использованием изображения, которое не является фоном

Question

Создание эффекта параллакса с использованием изображения, которое не является фоном

0

Я пытаюсь создать эффект прокрутки, который предпочтительно не использует javascript (только CSS), но я понимаю, если это невозможно, просто исследуя параметры.

Моя страница выглядит так:

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

Здесь образец кода для работы с:

http://jsfiddle.net/J8fFa/7/

HTML

<body>
    <div class="border-bg">
        <div class="image-bg"></div>
    </div>
    <div class="border-bg">
        <div class="spacer">
        </div>
    </div>
</body>

CSS

body{
    background-color:#aaa;
}

.border-bg{
    width:80%;
    margin:30px auto;
    background-color:#fff;
    padding:40px;
}

.image-bg{
     background:url('http://i.imgur.com/7cM1oL6.jpg');   
    height:400px;
        background-size:cover;
}

.spacer{
    height:900px;
}

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

Jascination 17 фев. 2014, в 23:16

Источник

Теги:

javascript

html

css

css-animations

parallax

1 ответ

Ещё вопросы

Eeji · Accepted Answer · 2014-02-17T20-38-00.000Z

измените класс.image-bg на:

.image-bg{
     background:url('http://i.imgur.com/7cM1oL6.jpg') fixed;   
    height:400px;
        background-size:cover;
}

это предотвратит прокрутку изображения

обновленная скрипка: http://jsfiddle.net/J8fFa/9/