Html5对图像的滚动效果

我需要复制在这个网站上创建的关于团队的效果：

http://www.case-3d.com/#about 我试图在网上寻找，但我找不到一个教程或网站，谈论这个html5的效果。。。。我想知道是否有人能帮我

---

如果您检查了元件，您会发现它们在使用，请提前向您表示感谢。进一步看，您可以看到使用画布的脚本（通过在inspector中搜索ID或类似技术）称为“1”。我提取了一些基本结构，以便您可以遵循它：

//This part sets up the canvas and gets the pictures
function setupCanvas() {
  // Get canvas and context references
  teamCanvas = document.getElementById("stage1");
  teamContext = teamCanvas.getContext("2d");
  // Get images references
  img1 = document.getElementById("01");
  img2 = document.getElementById("02");
  ...

   // This part sets the initial position of the shapes
   // You can see that it is based of the window size and in reference to each other
   // Shape #1
   x1_1 = teamCanvas.width / 2;
   x1_2 = teamCanvas.width;
   x1_3 = teamCanvas.width;
   x1_4 = 0;
   x1_5 = 0;
   y1_1 = ssp1_1 = 929 + diff;
   y1_2 = ssp1_2 = 2000 + diff;
   y1_3 = ssp1_3 = 4000;
   y1_4 = ssp1_4 = 4000;
   y1_5 = ssp1_5 = 2000 + diff;
   // Shape #2
   x2_1 = 0;
   x2_2 = teamCanvas.width / 2;
   x2_3 = teamCanvas.width;
   x2_4 = teamCanvas.width;
   x2_5 = 0;
   y2_1 = ssp2_1 = 3000;
   y2_2 = ssp2_2 = 4000;
   y2_3 = ssp2_3 = 3000;
   y2_4 = ssp2_4 = 6000;
   y2_5 = ssp2_5 = 6000;
   ...
   // Some other stuff goes here, I didn't copy all of it       
 }

 // Then it goes into this function to handle the scroll and redraw it on the canvas
 function redrawAbout(scrollPosition) {
   // Refresh canvas
   teamContext.clearRect(0, 0, teamCanvas.width, teamCanvas.height);
   var scrollAmt = scrollPosition / maskModifier;
   // Redraw
   // Mask #1
   if (scrollPosition > -4000) {
     teamContext.save();
     teamContext.beginPath();
     teamContext.moveTo(x1_1, ssp1_1 + scrollAmt);
     teamContext.lineTo(x1_2, ssp1_2 + scrollAmt);
     teamContext.lineTo(x1_3, ssp1_3 + scrollAmt);
     teamContext.lineTo(x1_4, ssp1_4 + scrollAmt);
     teamContext.lineTo(x1_5, ssp1_5 + scrollAmt);
     teamContext.lineTo(x1_1, ssp1_1 + scrollAmt);
     teamContext.clip();
     teamContext.drawImage(img1, 0, -200);
     teamContext.restore();
   }
   // Mask #2
   if (scrollPosition <= -2100 && scrollPosition > -5900) {
     teamContext.save();
     teamContext.beginPath();
     teamContext.moveTo(x2_1, ssp2_1 + scrollAmt);
     teamContext.lineTo(x2_2, ssp2_2 + scrollAmt);
     teamContext.lineTo(x2_3, ssp2_3 + scrollAmt);
     teamContext.lineTo(x2_4, ssp2_4 + scrollAmt);
     teamContext.lineTo(x2_5, ssp2_5 + scrollAmt);
     teamContext.lineTo(x2_1, ssp2_1 + scrollAmt);
     teamContext.clip();
     teamContext.drawImage(img2, 0, -200);
     teamContext.restore();
   }

//此部分设置画布并获取图片
函数setupCanvas（）{
//获取画布和上下文引用
teamCanvas=document.getElementById（“stage1”）；
teamContext=teamCanvas.getContext（“2d”）；
//获取图像引用
img1=document.getElementById（“01”）；
img2=document.getElementById（“02”）；
...
//此零件设置形状的初始位置
//您可以看到，它是基于窗口大小并相互参照的
//形状#1
x1_1=1.5米宽/2；
x1_2=宽度；
x1_3=宽度；
x1_4=0；
x1_5=0；
y1_1=ssp1_1=929+diff；
y1_2=ssp1_2=2000+diff；
y1_3=ssp1_3=4000；
y1_4=ssp1_4=4000；
y1_5=ssp1_5=2000+diff；
//形状#2
x2_1=0；
x2_2=1.5米宽/2；
x2_3=宽度；
x2_4=宽度；
x2_5=0；
y2_1=ssp2_1=3000；
y2_2=ssp2_2=4000；
y2_3=ssp2_3=3000；
y2_4=ssp2_4=6000；
y2_5=ssp2_5=6000；
...
//还有一些东西放在这里，我没有全部复制
}
//然后它进入这个函数来处理滚动并在画布上重新绘制它
函数重绘关于（滚动位置）{
//刷新画布
teamContext.clearRect（0,0，teamCanvas.width，teamCanvas.height）；
var scrollmat=scrollPosition/maskModifier；
//重画
//面具#1
如果（滚动位置>-4000）{
teamContext.save（）；
teamContext.beginPath（）；
teamContext.moveTo（x1_1，ssp1_1+scrollmat）；
teamContext.lineTo（x1_2，ssp1_2+scrollmat）；
teamContext.lineTo（x1_3，ssp1_3+scrollmat）；
teamContext.lineTo（x1_4，ssp1_4+scrollmat）；
teamContext.lineTo（x1_5，ssp1_5+scrollmat）；
teamContext.lineTo（x1_1，ssp1_1+scrollmat）；
teamContext.clip（）；
teamContext.drawImage（img1，0，-200）；
teamContext.restore（）；
}
//面具#2
如果（滚动位置-5900）{
teamContext.save（）；
teamContext.beginPath（）；
teamContext.moveTo（x2_1，ssp2_1+scrollmat）；
teamContext.lineTo（x2_2，ssp2_2+scrollmat）；
teamContext.lineTo（x2_3，ssp2_3+scrollmat）；
teamContext.lineTo（x2_4，ssp2_4+scrollmat）；
teamContext.lineTo（x2_5，ssp2_5+scrollmat）；
teamContext.lineTo（x2_1，ssp2_1+scrollmat）；
teamContext.clip（）；
teamContext.drawImage（img2，0，-200）；
teamContext.restore（）；
}

本质上，他们根据x和y坐标创建一些几何图形，根据这些变量将图像剪切到各自的几何区域内，计算滚动量（我相信是通过另一个插件），并根据用户滚动的距离重新绘制所有内容

Inspect元素是一个非常有用的工具，请学习如何使用它

---

当问关于StackOverflow的问题时，不要使用像这样的泛型。试着自己解决它，并发布你迄今为止的尝试以及给你带来麻烦的原因。提供详细信息并清晰表达。如果你这样做，你不会被否决，你会得到相关的、全面的好答案

非常感谢你的帮助，泽克卢斯我尝试使用e javascript代码case-3d.com，但它会生成任何数据：image/png；base64…画布和图像仍然非常逼真…如果你需要这里是我测试Zeaklous的url，当然，这只是给我的，我知道它是如何工作的。我是一个初学者，我只是认为html5会恢复他们的脚本以更好地理解它的工作原理…这是这也是为什么有人问我是否有教程……我不是小偷，更不用说吃力不讨好，但没有其他来源可以进行实验了。利用这个作为基础似乎更合适……他们（和大多数商业网站）的方式结构化他们的网站您无法复制/粘贴代码并使其正常工作。您必须使用他们使用的技术并向其中添加您自己的内容。根据需要复制部分（如我在答案中发布的部分-它们是您想要的部分）好的，我改变了唯一不使用我需要的脚本部分的方法谢谢@Zeaklous-你的答案的平衡方法是StackOverflow上的一个令人耳目一新的改变。为什么有人会因为这个问题投票否决你只是让我震惊。老兄，这个网站上有一些白痴-这是一个合理的问题，这有助于我理解该网站是如何运作的同样有效。