视差缩小效果问题
Parallax zoom out effect issues
我正在尝试视差并尝试在滚动时获得很好的缩小效果,但是我正在努力解决图像变得小于浏览器宽度和 div
.
的高度的问题
正如您在我的示例中看到的那样,当您向下滚动时,可以看到包装部分的红色背景。
您可以在 www.adamkhourydesign 查看示例。com/test
HTML
<header id="header_container">
<div class="header_back"></div>
<div class="logo"></div>
</header>
CSS
#header_container {
position: relative;
height: 600px;
background-color: rgba(255, 100, 85, 0.5);
background-repeat: no-repeat;
background-size: auto 800px;
background-position: top center;
background-attachment: fixed;
overflow: hidden;
}
.logo {
height: 100px;
width: 100%;
background-image: url(../img/name.png);
background-position: center;
background-repeat: no-repeat;
position: absolute;
top: 50%;
margin-top: -50px;
}
.header_back {
position: relative;
height: 600px;
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
background-attachment: fixed;
background-image: url(../img/header_bg.jpg);
overflow: hidden;
}
jQuery
var pContainerHeight = $('#header_container').height();
$(window).scroll(function(){
var wScroll = $(this).scrollTop();
var wZoomIn = 1+(wScroll*.0005);
var wZoomOut = 1-(wScroll*.00005);
if (wScroll <= pContainerHeight) {
$('.header_back').css({
'transform' : 'scale('+ wZoomOut +')'
});
$('.logo').css({
'transform' : 'translate(0px, '+ wScroll /0.7 +'%)'
});
}
修改您的代码,我能够在滚动时获得平滑的视差缩小,但使用 background-size
属性 而不是 transform: scale()
。我通过最初稍微放大背景图像(例如 105%
)然后在向下滚动时逐渐将其缩小回 100%
来做到这一点。我还确保 background-size
不会低于 100%
,这样它就会覆盖整个 header 区域。
CSS
...
.header__back {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url("http://www.adamkhourydesign.com/test/img/header_bg.jpg") top center no-repeat fixed;
background-size: 105%; /** the initial zoom **/
overflow: hidden;
}
...
Javascript
var height = $('#header_container').height();
var logo = $('.logo');
var background = $('.header__back');
$(window).on('scroll', function() {
var scroll = $(this).scrollTop();
logo.css('transform', 'translateY(' + scroll / 0.7 + '%)');
var backgroundSize = 105 - (5 - (height - scroll) / height * 5);
backgroundSize = backgroundSize < 100 ? 100 : backgroundSize;
background.css('background-size', backgroundSize + '%');
});
查看这个 fiddle 以查看它的实际效果:parallax zoom out demo
感谢 Arnell Balance,根据您发布的答案,我设法稍微调整了我的代码以使其正常工作。
我将背景图像从背景 属性 中移出,并将其作为图像添加到 div 中。然后在 css 中,我制作了图像,例如 140% 宽度和高度自动。最后抵消本例中超过100%的左边距的一半-20%。
代码现在看起来像这样:
HTML
<header id="header_container">
<div class="header_back">
<img src="img/header_bg.jpg">
</div>
<div class="logo"></div>
</header>
JQUERY
var pContainerHeight = $('#header_container').height();
$(window).scroll(function(){
var wScroll = $(this).scrollTop();
var wZoomIn = 1+(wScroll*.0005);
var wZoomOut = 1-(wScroll*.0005);
if (wScroll <= pContainerHeight) {
$('.header_back img').css({
'transform' : 'scale('+ wZoomOut +')'
});
$('.logo').css({
'transform' : 'translate(0px, '+ wScroll /0.7 +'%)'
});
}
CSS
#header_container {
position: relative;
height: 600px;
width: 100%;
background-color: rgba(255, 100, 85, 0.5);
background-repeat: no-repeat;
background-size: auto 800px;
background-position: top center;
background-attachment: fixed;
overflow: hidden;
}
.logo {
height: 100px;
width: 100%;
background-image: url(../img/name.png);
background-position: center;
background-repeat: no-repeat;
position: absolute;
top: 50%;
margin-top: -50px;
}
.header_back {
position: relative;
height: 100%;
width: 100%;
background-repeat: no-repeat;
background-size: 100%;
background-position: top center;
background-attachment: fixed;
background-color: rgba(154, 100, 85, 0.5);
text-align: center;
overflow: hidden;
}
.header_back img {
height: auto;
width: 140%;
margin-left: -20%;
}
我正在尝试视差并尝试在滚动时获得很好的缩小效果,但是我正在努力解决图像变得小于浏览器宽度和 div
.
正如您在我的示例中看到的那样,当您向下滚动时,可以看到包装部分的红色背景。
您可以在 www.adamkhourydesign 查看示例。com/test
HTML
<header id="header_container">
<div class="header_back"></div>
<div class="logo"></div>
</header>
CSS
#header_container {
position: relative;
height: 600px;
background-color: rgba(255, 100, 85, 0.5);
background-repeat: no-repeat;
background-size: auto 800px;
background-position: top center;
background-attachment: fixed;
overflow: hidden;
}
.logo {
height: 100px;
width: 100%;
background-image: url(../img/name.png);
background-position: center;
background-repeat: no-repeat;
position: absolute;
top: 50%;
margin-top: -50px;
}
.header_back {
position: relative;
height: 600px;
background-repeat: no-repeat;
background-size: cover;
background-position: top center;
background-attachment: fixed;
background-image: url(../img/header_bg.jpg);
overflow: hidden;
}
jQuery
var pContainerHeight = $('#header_container').height();
$(window).scroll(function(){
var wScroll = $(this).scrollTop();
var wZoomIn = 1+(wScroll*.0005);
var wZoomOut = 1-(wScroll*.00005);
if (wScroll <= pContainerHeight) {
$('.header_back').css({
'transform' : 'scale('+ wZoomOut +')'
});
$('.logo').css({
'transform' : 'translate(0px, '+ wScroll /0.7 +'%)'
});
}
修改您的代码,我能够在滚动时获得平滑的视差缩小,但使用 background-size
属性 而不是 transform: scale()
。我通过最初稍微放大背景图像(例如 105%
)然后在向下滚动时逐渐将其缩小回 100%
来做到这一点。我还确保 background-size
不会低于 100%
,这样它就会覆盖整个 header 区域。
CSS
...
.header__back {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url("http://www.adamkhourydesign.com/test/img/header_bg.jpg") top center no-repeat fixed;
background-size: 105%; /** the initial zoom **/
overflow: hidden;
}
...
Javascript
var height = $('#header_container').height();
var logo = $('.logo');
var background = $('.header__back');
$(window).on('scroll', function() {
var scroll = $(this).scrollTop();
logo.css('transform', 'translateY(' + scroll / 0.7 + '%)');
var backgroundSize = 105 - (5 - (height - scroll) / height * 5);
backgroundSize = backgroundSize < 100 ? 100 : backgroundSize;
background.css('background-size', backgroundSize + '%');
});
查看这个 fiddle 以查看它的实际效果:parallax zoom out demo
感谢 Arnell Balance,根据您发布的答案,我设法稍微调整了我的代码以使其正常工作。
我将背景图像从背景 属性 中移出,并将其作为图像添加到 div 中。然后在 css 中,我制作了图像,例如 140% 宽度和高度自动。最后抵消本例中超过100%的左边距的一半-20%。
代码现在看起来像这样:
HTML
<header id="header_container">
<div class="header_back">
<img src="img/header_bg.jpg">
</div>
<div class="logo"></div>
</header>
JQUERY
var pContainerHeight = $('#header_container').height();
$(window).scroll(function(){
var wScroll = $(this).scrollTop();
var wZoomIn = 1+(wScroll*.0005);
var wZoomOut = 1-(wScroll*.0005);
if (wScroll <= pContainerHeight) {
$('.header_back img').css({
'transform' : 'scale('+ wZoomOut +')'
});
$('.logo').css({
'transform' : 'translate(0px, '+ wScroll /0.7 +'%)'
});
}
CSS
#header_container {
position: relative;
height: 600px;
width: 100%;
background-color: rgba(255, 100, 85, 0.5);
background-repeat: no-repeat;
background-size: auto 800px;
background-position: top center;
background-attachment: fixed;
overflow: hidden;
}
.logo {
height: 100px;
width: 100%;
background-image: url(../img/name.png);
background-position: center;
background-repeat: no-repeat;
position: absolute;
top: 50%;
margin-top: -50px;
}
.header_back {
position: relative;
height: 100%;
width: 100%;
background-repeat: no-repeat;
background-size: 100%;
background-position: top center;
background-attachment: fixed;
background-color: rgba(154, 100, 85, 0.5);
text-align: center;
overflow: hidden;
}
.header_back img {
height: auto;
width: 140%;
margin-left: -20%;
}