Я увидел этот урок, который учит, как делать сложные многослойные свитки параллаксов и реализовать на моем веб -сайте. В то время как прототипирование я нашел несколько странных линий, которые появились бы при манипулировании PNG (я знаю, что размер файла большой, я исправлю его позже). Я думал, что это могут быть просто некоторые белые пиксели, которые просто нужно было очистить, но после очистки всех краев проблема сохранялась. Есть идеи, почему браузеры с этой проблемой рендеринга? из PNG, которые находятся внутри SVG. < /p>
html: < /p>
< /code>
css: < /p>
body {
margin: 0;
background-color: #000000;
}
#mountain {
width: 100%;
height: 100vh;
overflow: hidden;
}
#mountain svg {
width: 100%;
height: 100%;
object-position: center;
}
< /code>
js: < /p>
function loadSVG() {
fetch("https://raw.githubusercontent.com/astro ... scroll.svg")
.then(res => res.text())
.then(svg => {
const mountain = document.getElementById("mountain");
mountain.innerHTML = svg;
const svgEl = mountain.querySelector("svg");
svgEl.setAttribute("preserveAspectRatio", "xMidYMid slice");
createWrapper("#layer_1");
createWrapper("#layer_2");
setAnimationScroll();
setCloudAnimation();
});
}
function createWrapper(layerId) {
const layer = document.querySelector(`#mountain svg ${layerId}`);
if (!layer) return;
const wrapper = document.createElementNS("http://www.w3.org/2000/svg", "g");
wrapper.setAttribute("id", `${layerId.slice(1)}_wrapper`);
layer.parentNode.insertBefore(wrapper, layer);
wrapper.appendChild(layer);
}
loadSVG();
function setAnimationScroll() {
gsap.registerPlugin(ScrollTrigger);
let runAnimation = gsap.timeline({
scrollTrigger: {
trigger: ".banner",
start: "top top",
end: "+=1000",
scrub: true,
pin: true
}
});
runAnimation.add([
gsap.to("#cloud10_fixed", { y: -1500, duration: 2 }),
gsap.to("#cloud9_fixed", { y: -1500, duration: 2 }),
gsap.to("#cloud8_fixed", { y: -1500, duration: 2 }),
gsap.to("#cloud7_fixed", { y: -1500, duration: 2 }),
gsap.to("#cloud6_fixed", { y: -1500, duration: 2 }),
gsap.to("#cloud5_fixed", { y: -1500, duration: 2 }),
gsap.to("#cloud4_fixed", { y: -1500, duration: 2 }),
gsap.to("#cloud3_fixed", { y: -1500, duration: 2 }),
gsap.to("#cloud2_fixed", { y: -1500, duration: 2 }),
gsap.to("#cloud1_fixed", { y: -1500, duration: 2 }),
gsap.to("#cloud2b", { y: -1500, duration: 2 }),
gsap.to("#cloud1b", { y: -1500, duration: 2 }),
gsap.to("#cloud10", { y: -1500, duration: 2 }),
gsap.to("#cloud9", { y: -1500, duration: 2 }),
gsap.to("#cloud8", { y: -1500, duration: 2 }),
gsap.to("#cloud7", { y: -1500, duration: 2 }),
gsap.to("#cloud6", { y: -1500, duration: 2 }),
gsap.to("#cloud5", { y: -1500, duration: 2 }),
gsap.to("#cloud4", { y: -1500, duration: 2 }),
gsap.to("#cloud3", { y: -1500, duration: 2 }),
gsap.to("#cloud2", { y: -1500, duration: 2 }),
gsap.to("#cloud1", { y: -1500, duration: 2 })
])
.add([
gsap.to("#layer_1", {
scale: 1.4,
x: -250,
y: 0,
transformOrigin: "50% 0%",
duration: 2
}),
gsap.to("#layer_2", {
scale: 1.2,
transformOrigin: "50% 0%",
duration: 2
})
]);
}
Подробнее здесь: https://stackoverflow.com/questions/797 ... side-a-svg
