сделать прокрутку содержимого страницы и изображение при прокрутке

Question

сделать прокрутку содержимого страницы и изображение при прокрутке

0

Я пытаюсь сделать это http://www.youtube.com/watch?v=dAUpiocVwMA, где контент будет охватывать изображение при прокрутке. Проблема, с которой я сталкиваюсь, заключается в том, что это не фоновое изображение. Это фактический тег изображения. Вот что у меня есть.

<section id="home" class="bgWrapper">
<img id="parallaxImg" class="bgImg" src="images/bg/bizlifter-design-bg.jpg">
<!--<div id="parallaxImg"></div>-->
<article id="signUp" class="areaMargin">
    <h1>Business smart</h1>
    <h3>One simple system for your business.</h3>
    <div class="purple"></div>
    <div id="signupRow">
        <input type="text" placeholder="    [email protected]">
        <a id="btn-start" class="btn btn-lg btn-primary btnWhite" href="#">Start</a>
        <a id="btn-free" class="btn btn-lg btn-primary btnWhite" href="#">It free!</a>
    </div>
    <p class="forwardSlash"><span class="purpleText">
        ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
    </span></p>
    <a class="btn btn-primary btn-lg googleBtn" href="#">Sign Up Using Google</a>
</article>

Изображение, которое я пытаюсь прикрыть, находится во второй строке с id = "parallaxImg".

Sakitsunebi 31 дек. 2013, в 02:56

Источник

Теги:

javascript

jquery

html

css

parallax

1 ответ

Ещё вопросы

patrick · Accepted Answer · 2013-12-30T23-05-00.000Z

Если вы хотите сделать это, как показано на видео, вы можете обернуть изображение в один div и обернуть свой контент, который должен покрывать изображение, в другой. Имея эти два div, вы можете работать с индексом CSS z. Если вы установите позицию img-divs на "fixed", текст будет прокручиваться вверх, и изображение останется в своем положении.

http://www.w3schools.com/cssref/pr_pos_z-index.asp

И кстати. По моему мнению, создать эффект, показанный в видео, было бы еще проще, если бы я превратил img в div и присвоил ему фоновое изображение в css. Затем оберните все элементы, которые должны прокрутить изображение, в один элемент div и задайте ему z-index.
Спасибо, что было намного проще. Я поместил изображение как bg в css, как вы предложили, и добавил background-attachment: исправлено и даже не нуждалось в z-index. Еще раз спасибо за ваш быстрый ответ, я действительно ценю это /
Это звучит неплохо! :) Это действительно приятная особенность.