Question

我目前正在开展一个项目，其中网站的背景有3个蒙版图像，当用户滚动时，这些图像的点随着滚动一起移动。我可以让它在Chrome中运行良好，但只是不能让它与其他任何浏览器都很好玩。由于时间限制，我目前只需要在Safari和Chrome中使用此功能（其他浏览器将获得静态图像）。

Codepen

如果您在Chrome中滚动，则会看到所需的效果。我在其他地方读过有关SVG如何与SVG有很多问题以及我应该使用Object标签的问题，但我不确定如何应用Object标签，因为我需要内联点以便我可以更改它们通过JS，还是我错过了什么？

HTML

<div id="site-wrap" class="c-site c-images">
  <img id="nodes-bg-3i-1" width="100%" src="http://via.placeholder.com/1500x2800">
  <img id="nodes-bg-3i-2" width="100%" src="http://via.placeholder.com/1500x2800">
  <img id="nodes-bg-3i-3" width="100%" src="http://via.placeholder.com/1500x2800">
  <svg id="nodes-mask-desk" width="0" height="0">
    <defs>
      <clipPath id="clipPolygon" clipPathUnits="objectBoundingBox">
        <polygon id="poly1" points="0.35 0.23,1 0.28,1 0,0.6 0">
        </polygon>
      </clipPath>
      <clipPath id="clipPolygon2" clipPathUnits="objectBoundingBox">
        <polygon id="poly2" points="0.0 0.26,0.35 0.23,0.6 0.62,0.0 0.62">
        </polygon>
      </clipPath>
      <clipPath id="clipPolygon3" clipPathUnits="objectBoundingBox">
        <polygon id="poly3" points="0.3 1,1 1,1 0.62,0.6 0.62">
        </polygon>
      </clipPath>
    </defs>
  </svg>
</div>

CSS（SCSS）

#nodes-bg-3i-1 { -webkit-clip-path: url(#clipPolygon); clip-path: url(#clipPolygon); }
#nodes-bg-3i-2 { -webkit-clip-path: url(#clipPolygon2); clip-path: url(#clipPolygon2); }
#nodes-bg-3i-3 { -webkit-clip-path: url(#clipPolygon3); clip-path: url(#clipPolygon3); }

#mob-img-1 { -webkit-clip-path: url(#clipMob1); clip-path: url(#clipMob1); }
#mob-img-2 { -webkit-clip-path: url(#clipMob2); clip-path: url(#clipMob2); }
#mob-img-3 { -webkit-clip-path: url(#clipMob3); clip-path: url(#clipMob3); }

img {
  display: block;
  width: 100%;

  &:nth-child(2),
  &:nth-child(3){
    position: absolute;
    top: 0;
    left: 0;
  }
}

JS

var animPoints = {

  init: function() {
    var isScrolling;
    var scrollingDone = false;

    animPoints.pointParallaxBackgrounds();

    // Init backgrounds on scroll, but wait for a period of time after scroll starts before init
    window.addEventListener('scroll', function ( event ) {
      animPoints.pointParallaxBackgrounds();
    }, false);
  },

  pointParallaxBackgrounds: function(){
    var el = document.getElementById('site-wrap');
    var scrollPos = window.pageYOffset;

    var poly1 = document.getElementById("poly1"); // Points element within SVG
    var poly1Points = poly1.getAttribute("points"); // Points attribute containing position values
    var poly1PointsArr = poly1Points.split(","); // We only need the fourth point's coordinates
    var poly1PointPair1Arr = poly1PointsArr[3].split(" "); // We only need the first point's coordinates

    var poly2 = document.getElementById("poly2"); // Points element within SVG
    var poly2Points = poly2.getAttribute("points"); // Points attribute containing position values
    var poly2PointsArr = poly2Points.split(","); // We only need the second point's coordinates
    var poly2PointPair2Arr = poly2PointsArr[1].split(" "); // We only need the first point's coordinates
    var poly2PointPair3Arr = poly2PointsArr[2].split(" "); // We only need the first point's coordinates


    var poly3 = document.getElementById("poly3"); // Points element within SVG
    var poly3Points = poly3.getAttribute("points"); // Points attribute containing position values
    var poly3PointsArr = poly3Points.split(","); // We only need the fourth point's coordinates
    var poly3PointPair4Arr = poly3PointsArr[3].split(" "); // We only need the fourth point's coordinates

    // Update polygon 2 Y axis
    poly2PointPair2Arr[1] = (0.2 + (scrollPos * .4)  / el.offsetHeight);
    poly1PointPair1Arr[1] = poly2PointPair2Arr[1];
    poly1PointPair1Arr[0] = poly2PointPair2Arr[0];
    poly2PointPair3Arr[1] = (0.4 + (scrollPos * .4)  / el.offsetHeight);
    poly3PointPair4Arr[1] = poly2PointPair3Arr[1];


    // Set some boundss
    if(poly2PointPair2Arr[1] <= 0.23){
      poly2PointPair2Arr[1] = 0.23;
      poly1PointPair1Arr[1] = 0.23;
    }


    if(poly2PointPair3Arr[1] <= 0.61){
      poly2PointPair3Arr[1] = 0.61;
      poly3PointPair4Arr[1] = 0.61;
    }

    // Convert modified array of points back to string, and update var
    poly1PointsArr[0] = poly1PointPair1Arr.join(" ");
    poly2PointsArr[1] = poly2PointPair2Arr.join(" ");
    poly2PointsArr[2] = poly2PointPair3Arr.join(" ");
    poly3PointsArr[3] = poly3PointPair4Arr.join(" ");


    poly1.setAttribute('points', poly1PointsArr);
    poly2.setAttribute('points', poly2PointsArr);
    poly3.setAttribute('points', poly3PointsArr);
  }
};

var chrome   = navigator.userAgent.indexOf('Chrome') > -1;
var explorer = navigator.userAgent.indexOf('MSIE') > -1;
var firefox  = navigator.userAgent.indexOf('Firefox') > -1;
var safari   = navigator.userAgent.indexOf("Safari") > -1;

if(chrome || safari) {
  console.log("test");
  animPoints.init();
}

Answer 1

所以，我注意到在浏览器调整大小时，在Safari中滚动后，点数会更新。因此，我发现触发浏览器调整大小或重置offsetWidth滚动查看具有剪切路径的图像就行了！所以基本上：

var img1 = document.getElementById("nodes-bg-3i-1");
img1.style.clipPath = "none";
img1.offsetWidth;
img1.style.clipPath = "url(#clipPolygon)";

将其应用于pointParallaxBackgrounds工作中的每个图片！

剪辑中的剪切路径点动画无法在Safari中工作

1 个答案: