缩放滚动时的视差
Parallax with zoom on scroll
我试图找到与此类似的 post,但没有找到。我想要做的是设置一个在滚动时具有适度缩放的视差背景。我降低了视差,这很简单,但是缩放滚动给我带来了困难。
if ($(".zoomImage").length == 0)
{
console.warn("You're attempting to set hero images without an existing class. '.heroImage'");
return;
}
$(document).scroll(function(){
var scrollpos = $(this).scrollTop();
var screenHeight = $(window).height();
var screenWidth = $(window).width();
$(".zoomImage").each(function(){
var offset = $(this).offset().top;
// Only modify when top is at top of browser on screen.
if (offset < scrollpos && scrollpos < offset + screenHeight)
{
var heroEffectPerc = 100 + 25 * (scrollpos - offset) / (screenHeight * 1.0);
$(this).css("background-size", heroEffectPerc + "% auto");
}
});
});
这是我对图像进行缩放的地方,视差是在纯 CSS 中完成的,如下所示。我遇到的问题是计算数学以确保当屏幕变得过宽或过高时图像不会超出其父级的边缘并且仍然达到相同的效果。 1:
CSS:
pageCanvas
{
position: relative;
background-repeat: no-repeat;
background-position: center;
background-size: auto 100%;
background-color: white;
display: block;
left: 0;
top: 0;
width: 100%;
height: 100vh;
}
pageCanvas.parallax
{
background-attachment: fixed;
}
.
<pageCanvas class="parallax zoomImage" style="background-image: url('./Images/DisplayBackground.png');">
<banner>
<header>
Company name
</header>
<description>
I don't want to<br><span style="margin-left: 200px;">advertise here.</span>
</description>
</banner>
</pageCanvas>
我已尝试让它正常工作,但要么遇到以下问题之一:
白色背景显示太宽。
白色背景显示太高。
图像拉伸。
我需要用这个或其他东西引入图像原始比例吗?如果我在给出答案之前找出解决方案,我会 post 它。
虽然原来是在一个名字中space,但我将把这个答案当作不是因为我没有指定。无论哪种方式,我都找到了解决方案。
第一步是找到原始图像的比例;
$(".zoomImage").each(function(index){
var bg = $(this).css('background-image');
bg = bg.replace('url(','').replace(')','').replace(/\"/gi, "");
// get image size.
var tmpImg = new Image();
tmpImg.src=bg;
$(tmpImg).one('load', function(){
orgWidth = tmpImg.width;
orgHeight = tmpImg.height;
bgImageRatios[index] = orgHeight / (orgWidth * 1.0);
});
});
为了让生活更轻松,我将它们放在一个数组中,该数组对于名称 space 是全局的。这样我就不必 A) 继续寻找图像的比率,并且 B) 可以像稍后初始化一样访问它。应该注意的是,如果实例中有或多或少的“.zoomImage”classes,则需要再次调用此方法,因为此时数组将不正确。
我接下来所做的是将循环 class 的原始代码放入一个函数中。
function zoomImage(scrollpos, screenHeight, screenWidth)
{
//console.log(screenHeight);
$(".zoomImage").each(function(index){
var offset = $(this).offset().top;
if (offset < scrollpos && scrollpos < offset + screenHeight)
{
var heroEffectPerc = 100 + 25 * (scrollpos - offset) / (screenHeight * 1.0);
if ((bgImageRatios[index] * screenWidth / screenHeight) > 1)
$(this).css("background-size", heroEffectPerc + "% auto");
else
$(this).css("background-size", "auto " + heroEffectPerc + "%");
}
});
}
我把它放在一个函数中,因为否则它会被放在两个不同的位置。 (那只是混乱的编码)。我更新了图片尺寸如下。
$(window).on("resize", function(){
var scrollpos = $(document).scrollTop();
var screenHeight = $(this).height();
var screenWidth = $(this).width();
pageCanvas.zoomImage(scrollpos, screenHeight, screenWidth);
});
$(document).on("scroll", function(){
var scrollpos = $(this).scrollTop();
var screenHeight = $(window).height();
var screenWidth = $(window).width();
pageCanvas.zoomImage(scrollpos, screenHeight, screenWidth);
});
以下资源帮助我解决了我的问题:
Can I get div's background-image url?
How to get image size from URL
功劳归功于他们。
我试图找到与此类似的 post,但没有找到。我想要做的是设置一个在滚动时具有适度缩放的视差背景。我降低了视差,这很简单,但是缩放滚动给我带来了困难。
if ($(".zoomImage").length == 0)
{
console.warn("You're attempting to set hero images without an existing class. '.heroImage'");
return;
}
$(document).scroll(function(){
var scrollpos = $(this).scrollTop();
var screenHeight = $(window).height();
var screenWidth = $(window).width();
$(".zoomImage").each(function(){
var offset = $(this).offset().top;
// Only modify when top is at top of browser on screen.
if (offset < scrollpos && scrollpos < offset + screenHeight)
{
var heroEffectPerc = 100 + 25 * (scrollpos - offset) / (screenHeight * 1.0);
$(this).css("background-size", heroEffectPerc + "% auto");
}
});
});
这是我对图像进行缩放的地方,视差是在纯 CSS 中完成的,如下所示。我遇到的问题是计算数学以确保当屏幕变得过宽或过高时图像不会超出其父级的边缘并且仍然达到相同的效果。 1:
CSS:
pageCanvas
{
position: relative;
background-repeat: no-repeat;
background-position: center;
background-size: auto 100%;
background-color: white;
display: block;
left: 0;
top: 0;
width: 100%;
height: 100vh;
}
pageCanvas.parallax
{
background-attachment: fixed;
}
.
<pageCanvas class="parallax zoomImage" style="background-image: url('./Images/DisplayBackground.png');">
<banner>
<header>
Company name
</header>
<description>
I don't want to<br><span style="margin-left: 200px;">advertise here.</span>
</description>
</banner>
</pageCanvas>
我已尝试让它正常工作,但要么遇到以下问题之一: 白色背景显示太宽。 白色背景显示太高。 图像拉伸。
我需要用这个或其他东西引入图像原始比例吗?如果我在给出答案之前找出解决方案,我会 post 它。
虽然原来是在一个名字中space,但我将把这个答案当作不是因为我没有指定。无论哪种方式,我都找到了解决方案。
第一步是找到原始图像的比例;
$(".zoomImage").each(function(index){
var bg = $(this).css('background-image');
bg = bg.replace('url(','').replace(')','').replace(/\"/gi, "");
// get image size.
var tmpImg = new Image();
tmpImg.src=bg;
$(tmpImg).one('load', function(){
orgWidth = tmpImg.width;
orgHeight = tmpImg.height;
bgImageRatios[index] = orgHeight / (orgWidth * 1.0);
});
});
为了让生活更轻松,我将它们放在一个数组中,该数组对于名称 space 是全局的。这样我就不必 A) 继续寻找图像的比率,并且 B) 可以像稍后初始化一样访问它。应该注意的是,如果实例中有或多或少的“.zoomImage”classes,则需要再次调用此方法,因为此时数组将不正确。
我接下来所做的是将循环 class 的原始代码放入一个函数中。
function zoomImage(scrollpos, screenHeight, screenWidth)
{
//console.log(screenHeight);
$(".zoomImage").each(function(index){
var offset = $(this).offset().top;
if (offset < scrollpos && scrollpos < offset + screenHeight)
{
var heroEffectPerc = 100 + 25 * (scrollpos - offset) / (screenHeight * 1.0);
if ((bgImageRatios[index] * screenWidth / screenHeight) > 1)
$(this).css("background-size", heroEffectPerc + "% auto");
else
$(this).css("background-size", "auto " + heroEffectPerc + "%");
}
});
}
我把它放在一个函数中,因为否则它会被放在两个不同的位置。 (那只是混乱的编码)。我更新了图片尺寸如下。
$(window).on("resize", function(){
var scrollpos = $(document).scrollTop();
var screenHeight = $(this).height();
var screenWidth = $(this).width();
pageCanvas.zoomImage(scrollpos, screenHeight, screenWidth);
});
$(document).on("scroll", function(){
var scrollpos = $(this).scrollTop();
var screenHeight = $(window).height();
var screenWidth = $(window).width();
pageCanvas.zoomImage(scrollpos, screenHeight, screenWidth);
});
以下资源帮助我解决了我的问题: Can I get div's background-image url? How to get image size from URL
功劳归功于他们。