0

我需要重现在此站点上创建的关于 Team 的效果：

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

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

提前谢谢你

4

1 回答 1

2

如果您检查元素，您会发现它们使用的是 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 上提问时，请远离这样的泛型。尝试自己解决它并发布您迄今为止尝试过的内容以及给您带来麻烦的内容。给出细节并表达清楚。如果你这样做，你就不会被否决，你会得到相关的，周围都是好的答案

于 2013-07-23T17:42:23.927 回答