我目前正在开展一个项目,其中网站的背景有3个蒙版图像,当用户滚动时,这些图像的点随着滚动一起移动。我可以让它在Chrome中运行良好,但只是不能让它与其他任何浏览器都很好玩。由于时间限制,我目前只需要在Safari和Chrome中使用此功能(其他浏览器将获得静态图像)。
如果您在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();
}
答案 0 :(得分:0)
所以,我注意到在浏览器调整大小时,在Safari中滚动后,点数会更新。因此,我发现触发浏览器调整大小或重置offsetWidth
滚动查看具有剪切路径的图像就行了!所以基本上:
var img1 = document.getElementById("nodes-bg-3i-1");
img1.style.clipPath = "none";
img1.offsetWidth;
img1.style.clipPath = "url(#clipPolygon)";
将其应用于pointParallaxBackgrounds
工作中的每个图片!