我在背景图片上面有一个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。投入赞赏。
答案 0 :(得分: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 */
}
这里发生的事情是正在监听scroll
对象上的window
事件。触发此事件时,margin-top
值和opacity
将按比例更改为滚动的距离(请参阅scrollBanner
函数)。