CSS прокрутка фона по горизонтали

Question

как сделать фон страницы прокручивать по горизонтали во время прокрутки страницы по вертикали ??

вот рабочий пример, иллюстрирующий, что я имею в виду.

http://www.hul.co.in/careers-jobs/

Answer 1

Это невозможно сделать с чистым CSS, вы должны использовать JavaScript.

Если вы используете JQuery, вы можете использовать это:

Просто основная HTML разметка:

<!-- HTML --> 
<div id="background"></div> 
<div id="content"> <!-- add some content here --> </div> 

CSS стиль:

/* css */ 
#background { 
    /* fixed position - aways on top of the screen */ 
    position: fixed; 
    top: 0; 
    left: 0; 

    /* set repeat-x so it doesn't run off */ 
    background: url(http://dummyimage.com/3000x100/333/999.png&text=foobarfoobarfoobarfoobarfoobar) repeat-x; 

    /* you MUST set width and height or it won't display */ 
    width: 100%; 
    height: 100px; 

    /* -1 to ensure it will always be in background */ 
    z-index: -1; 
} 

#content{ 
    width: 500px; 
    margin: 0 auto; 
    background: #b0b0b0; 
} 

JavaScript код:

// JavaScript (using jQuery) 
$(window).scroll(function() { 
    // parse the value of current background position and add window.scrollY - vertical scroll (divide this for slower background scroll) 
    var offset = parseInt($("#background").css("background-position-x")) + window.scrollY; 
    $("#background").css("background-position", offset + "px 0px"); 
}); 

Если вы хотите, чтобы увидеть этот код на работе, посмотрите на эту jsFiddle.

Если вы хотите избежать использования jQuery, я преобразовал этот же код для работы в чистом js: jsFiddle.

Answer 2

Они используют JavaScript (в частности jQuery библиотеки) для этой работы в этом script. Я бы рекомендовал использовать jQuery, поскольку он «нормализует» свойства браузера с префиксом.

Нечто подобное вы могли бы получить работу,

var lastTop = 0, 
    top = 0; 

$(window).scroll(function() { 
    top = $(document).scrollTop(); 

    if (lastTop !== top) { 
     // If it's scrolling vertically 
     // change background's x coordinate 
     $(this).animate({ 
      'background-position-x': top; 
     }, 1); 

     lastTop = top; 
    } 
});