我在背景图片上有一个 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 ,尽可能简洁。感谢输入。
最佳答案
关于基本视差效果的问题已被问到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
函数)。
关于javascript - BG 图像上的视差 H1,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30687360/