图像上的 Html5 滚动效果

Question

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

http://www.case-3d.com/#about

我尝试在网上查找，但找不到有关此 html5 效果的教程或网站....我想知道是否有人可以帮助我？

提前谢谢你

Answer 1

如果您检查元素，您会发现他们使用a canvas。进一步看，您可以看到使用画布的脚本（通过在检查器中搜索 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();
   }

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

检查元素是一个非常有用的工具，学习使用它

在 StackOverflow 上提问时，请远离此类泛型。尝试自己解决它并发布您迄今为止尝试过的内容以及给您带来麻烦的内容。给出细节并表达清楚。如果你这样做，你就不会被否决，你会得到相关的，所有的好答案