javascript - BG 图像上的视差 H1

Question

我在背景图片上有一个 h1，

<section class="cd-intro">
    <h1>Content</h1>
</section>`

使用以下 CSS:

.cd-intro {
    position: relative;
    height: 100%;
    background: url("../img/buff.jpg") no-repeat center center;
    background-size: cover;
    z-index: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

我希望或多或少准确地复制 this effect here ，尽可能简洁。感谢输入。

Answer 1

关于基本视差效果的问题已被问到before如果您仍然对此感到疑惑，请查看 stackoverflow。

至于视差头移动，简短的回答是:

jQuery(window).scroll(function() {
    //Get the scoll position of the page
    scrollPos = jQuery(this).scrollTop();

    //Scroll and fade out the banner text
    jQuery('.featured-title').css({
      'margin-top' : -(scrollPos/3)+"px",
      'opacity' : 1-(scrollPos/300)
    });    
});

我是通过查看网站上的源代码 javascript 来找到它的。您将在 main.js 中看到:

///////////////////////////////
// Parallax Scrolling
///////////////////////////////

// Calcualte the home banner parallax scrolling
function scrollBanner() {
    //Get the scoll position of the page
    scrollPos = jQuery(this).scrollTop();

    //Scroll and fade out the banner text
    jQuery('.featured-title').css({
      'margin-top' : -(scrollPos/3)+"px",
      'opacity' : 1-(scrollPos/300)
    });
}


jQuery(document).ready(function(){
///////////////////////////////
// Initialize Parallax 
/////////////////////////////// 
    if(!isMobile()) {
        jQuery(window).scroll(function() {        
                scrollBanner();       
        });
    }
    else {
        jQuery('#banner-text').css({
            'position': 'relative',
            'text-align': 'center',
            'margin': 'auto',
            'padding': '0',
            'top':'0'
        });
    }
    /* bunch of other stuff */
}

这里发生的事情是正在监听 window 对象上的 scroll 事件。当此事件触发时，margin-top 值和 opacity 将根据滚动距离按比例更改(请参阅 scrollBanner 函数)。