Как создать фиксированный эффект прокрутки фона без фонового изображения?

У меня есть горизонтальное и вертикально центрированное изображение на странице. Я бы так хотел, чтобы при прокрутке пользователя содержимое под ним действительно появилось, как если бы верхний контент был исправлен. Как этот эффект здесь ... http://tympanus.net/codrops/2013/05/02/fixed-background-scrolling-layout/Как создать фиксированный эффект прокрутки фона без фонового изображения?

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

Мой код здесь ... http://jsfiddle.net/5jphd/1/

HTML

<div class="image"> 
    <img src="http://upload.wikimedia.org/wikipedia/commons/3/36/Hopetoun_falls.jpg"> 
    <div class="text">Scroll down</div> 
</div> 
<div class="wrap"> 
    Here is some content 
</div>

CSS

html, body {height: 100%} 

body { 
    padding: 0; 
    margin:0; 
    font-family: sans-serif; 
} 
.image { 
    position: relative; 
    left: 0px;  
    height: 100%; 
    background-position: 50% 50%; 
    background-size: cover; 
    background-attachment: scroll; 
    text-align: center; 
} 
img { 
    max-width: 90%; 
    max-height: 70%; 
    margin: auto; 
    position: absolute; 
    top: 0; left: 0; bottom: 0; right: 0; 
} 

.text { 
    position: absolute; 
    bottom: 20px; 
    left:50%; 
    margin-left: -44px; 
} 
.wrap { 
    background-color: lightblue; 
    text-align: center; 
    padding: 100px; 
    font-size: 30px; 
    min-height: 1000px; 
}

Возможно ли это сделать с этой разметкой? Поэтому, когда вы прокручиваете вниз, контент будет расти и перекрывать изображение.

источник

2014-01-26 Adam

Я отчасти смущен .. почему бы просто не использовать фиксированный HTML5 видео тогда? Вы просто сделаете контент фоном прозрачным. * Кстати *, многие компьютеры будут отставать, как сумасшедшие, если вы используете фоновые изображения HD HTML5 .. даже 5-секундный повторяющийся клип похож на 5 МБ и почти сбивает старые ПК/ноутбуки и множество телефонов. –

это вы пытаетесь достичь? http://jsfiddle.net/5jphd/2/ –

Да GCyrillus, который я получил после, за исключением того, что изображение должно быть в теге изображения, а не использовать фоновое изображение. – Adam

Хорошо, я сделал это, этого я и хотел достичь. Я просто сделал видео и прокрутка текста позиции: фиксированный, и сделал основную позицию содержимого тела: относительный - http://jsfiddle.net/5jphd/4/

html, body {height: 100%} 

body { 
    padding: 0; 
    margin:0; 
    font-family: sans-serif; 
} 
.image { 
    position: relative; 
    left: 0px;  
    height: 100%; 
    background-position: 50% 50%; 
    background-size: cover; 
    background-attachment: scroll; 
    text-align: center; 
} 
img { 
    max-width: 90%; 
    max-height: 70%; 
    margin: auto; 
    position: fixed; 
    top: 0; left: 0; bottom: 0; right: 0; 
} 

.text { 
    position: fixed;  
    bottom: 20px; 
    left:50%; 
    margin-left: -44px; 
} 
.wrap { 
    background-color: lightblue; 
    text-align: center; 
    padding: 100px; 
    font-size: 30px; 
    min-height: 1000px; 
    position:relative; 
}

источник

2014-01-26 20:56:58 Adam

JSFiddle

Я думаю, что это то, что вы, по сути просят. Учитывайте пропорции, это то, что hd vieo, вероятно, будет выглядеть на 320x480 или около того.

#bg { 
    position:absolute; 
    position:fixed; 
    top:0; 
    width:100%; 
    height:100%; 
    margin:auto; 
    overflow:hidden; 
    z-index:-1; 
} 
#bg img { max-width:100%; }

источник

2014-01-26 20:46:52

Как создать фиксированный эффект прокрутки фона без фонового изображения?

ответ

Смежные вопросы