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坐标创建一些几何形状，根据这些变量剪切图像以适应各自的几何区域，计算滚动多少（通过我认为的另一个插件），并根据用户滚动的距离重新绘制所有内容。

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

在StackOverflow上提问时，请远离这样的泛型。尝试自己解决它并发布你到目前为止所尝试的内容以及给你带来麻烦的东西。提供细节并表达清晰。如果你这样做，你将不会被投票，你会得到相关的，所有的好答案

Html5滚动效果图像

1 个答案: