opengl滚动显示图像_英雄图像的滚动到焦点效果

opengl滚动显示图像

I’ve long appreciated a fun little touch on the Twitter iPhone app: as you drag down on the “Me” screen, the header illustration simultaneously zooms and blurs, in proportion to the amount of drag. I thought that might be a useful technique to replicate in browsers, particularly for banner images in articles…

我一直很欣赏Twitter iPhone应用程序上的一个有趣的小触摸：当您在“我”屏幕上向下拖动时，标题插图会根据拖动的量同时缩放和模糊。 我认为这可能是在浏览器中复制的有用技术，尤其是对于文章中的标语图片…

The markup is very simple:

标记非常简单：

<article>
	<header>
		<img src="placid-pond.jpg" alt>
	</header>
…
</article>

On the same page, we add some SVG:

在同一页面上，我们添加一些SVG ：

<svg xmlns="http://www.w3.org/2000/svg" width="0" height="0">
  <filter id="blur">
    <feGaussianBlur stdDeviation="0" />
  </filter>
</svg>

This SVG is to achieve the blur effect for Firefox, which doesn’t yet support CSS filters. Note that the inline svg tag is given 0 width and height, so it doesn’t affect the page layout.

该SVG旨在实现Firefox的模糊效果，而Firefox还不支持CSS过滤器 。 请注意，内联svg标记的宽度和高度为0，因此不会影响页面布局。

This blur effect is called upon in the page’s stylesheet:

在页面的样式表中将调用此模糊效果：

header {
	overflow: hidden;
	font-size: 0;
}
article header img {
	width: 100%;
	height: auto;
	filter: url(#blur);
}

The JavaScript is quite a bit more complex. First, everything goes inside a function  that is called when the browser window is scrolled:

JavaScript相当复杂。 首先，一切都在滚动浏览器窗口时调用的函数内部：

window.onscroll = function (event) {  
 
}

We need quite a bit of information inside this function. The variables used are:

我们在此函数中需要大量信息。 使用的变量是：

var headerImg = document.querySelector("article header img"),
headerImgOffset = headerImg.getBoundingClientRect(),
imgTop = headerImgOffset.top,
imgBottom = headerImgOffset.bottom,
imgHeight = headerImg.offsetHeight,
viewportHeight = document.documentElement.clientHeight,
blur = document.getElementById("blur"),
svgblur = blur.getElementsByTagName("feGaussianBlur")[0],
topEffectStart = Math.abs((viewportHeight - imgHeight)/5);

Reading through them, the variables should make sense:

通读它们，变量应该有意义：

• headerImg references the header image at the top of the article. (For the sake of simplicity, I am assuming the page has only one article and header element).

  headerImg引用文章顶部的标题图像。 (为简单起见，我假设页面只有一个文章和标题元素)。

• headerImgOffset allows us to reference the image’s position and dimensions: in our case, imgTop, imgBottom and imgHeight.

  headerImgOffset允许我们引用图像的位置和尺寸：在本例中为imgTop, imgBottom和imgHeight 。

• viewportHeight is just that: the height of the open browser window.

  viewportHeight就是：打开的浏览器窗口的高度。

• blur references the SVG code on the page; svgblur is the specific element that causes the blur effect in Firefox.

  blur引用页面上的SVG代码； svgblur是导致Firefox模糊效果的特定元素。

• topEffectStart is the difference between the current viewport height and the height of the image, divided by 5. This will ensure that the blur effect only starts when the header image is in the top fifth of the browser window. I’ve used Math.abs to ensure that this number is always positive, as it’s possible for the image to be taller than the current viewport height.

  topEffectStart是当前视口高度与图像高度之差除以5。这将确保仅当标题图像位于浏览器窗口的前五分之一时才开始模糊效果。 我使用Math.abs来确保该数字始终为正，因为图像可能会高于当前视口的高度。

Having determined all this, we add a conditional statement inside the function:

确定了所有这些条件之后，我们在函数内部添加了一条条件语句：

if (imgTop < topEffectStart && imgBottom > 0 ) { 
	blurFactor = Math.abs(imgTop / 100);
	scaleFactor = 1+Math.abs(imgTop / 1000);
	headerImg.style.webkitFilter = "blur(" + blurFactor + "px)";
	svgblur.setAttribute("stdDeviation", blurFactor);
	headerImg.style.webkitTransform = "scale(scaleFactor)";
	headerImg.style.transform = "scale(scaleFactor)";
}

Meaning if the top of the image is at least in the top fifth of the viewport window, and the image is still in view, do the following:

意思是如果图像的顶部至少在视口窗口的顶部五分之一， 并且图像仍在视图中，请执行以下操作：

• Take the current position of the top of the image, relative to the top of the viewport, divide it by 100, and turn it into a positive floating point value we’ll call blurFactor.

  取图像顶部相对于视口顶部的当前位置，将其除以100，然后将其转换为正浮点值，我们将其称为blurFactor 。

• Similarly, take the same difference, divide it by 1000 (as scale is much more sensitive) and add the result to 1, making scaleFactor.

  类似地，采用相同的差异，将其除以1000(因为scale更敏感)，然后将结果加1，使scaleFactor成为可能。

• Apply blurFactor, in pixels, to the header image, as the value of the Webkit blur filter.

  blurFactor像素为单位的blurFactor应用于标题图像，作为Webkit模糊过滤器的值。

• Similarly, change the value of stdDeviation in the SVG to match (for Firefox).

  同样，更改SVG中的stdDeviation值以使其匹配(对于Firefox)。

• Finally, apply scaleFactor to a CSS transform for the header image.

  最后，将scaleFactor应用于标题图片CSS转换。

One advantage of using both scale and blur together is that the blur on the outside edges of the image is obscured: even overflow: hidden can’t hide that, under normal circumstances.

同时使用scale和blur一个优点是可以消除图像外侧边缘的模糊：即使overflow: hidden在正常情况下， overflow: hidden也无法将其隐藏。

With a few small changes, this same script could be used to focus the image only when it is in the center of the page, working to the user’s own central vision and focus of attention.

进行一些小的更改，仅当图像位于页面中心时，才可以使用同一脚本来聚焦图像，以达到用户自己的中心视觉和关注焦点。

翻译自: https://thenewcode.com/808/Scroll-to-Focus-Effect-For-Hero-Images

opengl滚动显示图像