我使用 Locomotive、ScrollTrigger 和 Gsap 来制作动画。平滑滚动会导致额外的页面意外地在末尾滚动。当我检查网页时显示“has-scroll-init+has-scroll-smooth”。我尝试了一些人工智能建议，但不起作用。尝试修复 CSS 和 JS
const locoMotive = () => {
gsap.registerPlugin(ScrollTrigger);
// Using Locomotive Scroll from Locomotive https://github.com/locomotivemtl/locomotive-scroll
const locoScroll = new LocomotiveScroll({
el: document.querySelector("#main"),
smooth: true,
});
// each time Locomotive Scroll updates, tell ScrollTrigger to update too (sync positioning)
locoScroll.on("scroll", ScrollTrigger.update);
// tell ScrollTrigger to use these proxy methods for the "#main" element since Locomotive Scroll is hijacking things
ScrollTrigger.scrollerProxy("#main", {
scrollTop(value) {
return arguments.length
? locoScroll.scrollTo(value, 0, 0)
: locoScroll.scroll.instance.scroll.y;
}, // we don't have to define a scrollLeft because we're only scrolling vertically.
getBoundingClientRect() {
return {
top: 0,
left: 0,
width: window.innerWidth,
height: window.innerHeight,
};
},
// LocomotiveScroll handles things completely differently on mobile devices - it doesn't even transform the container at all! So to get the correct behavior and avoid jitters, we should pin things with position: fixed on mobile. We sense it by checking to see if there's a transform applied to the container (the LocomotiveScroll-controlled element).
pinType: document.querySelector("#main").style.transform
? "transform"
: "fixed",
});
// each time the window updates, we should refresh ScrollTrigger and then update LocomotiveScroll.
ScrollTrigger.addEventListener("refresh", () => locoScroll.update());
// after everything is set up, refresh() ScrollTrigger and update LocomotiveScroll because padding may have been added for pinning, etc.
ScrollTrigger.refresh();
};
locoMotive();
const page1Animation = () => {
gsap.from("img", {
opacity: 0,
duration: 1,
y: -50,
// ease: "elastic(1, 0.3)",
});
gsap.from("h2", { opacity: 0, duration: 1, x: -100 });
gsap.from("ul", { opacity: 0, duration: 1, x: -90 });
};
page1Animation();
document.addEventListener("DOMContentLoaded", () => {
const joinPage = document.getElementById("join-page");
joinPage.addEventListener("click", () => {
document.getElementById("page3").scrollIntoView({ behavior: "smooth" });
});
});
gsap.registerPlugin(ScrollTrigger);
gsap.from("#page2-aboutus p", {
opacity: 0,
duration: 1,
y: 50,
scrollTrigger: {
trigger: "#page2-aboutus p",
start: "top 100%",
end: "bottom bottom",
},
});
gsap.from("#page2-aboutus hr", {
x: -100,
duration: 1,
opacity: 0,
ease: "power4.out",
scrollTrigger: {
trigger: "#page2-aboutus hr",
start: "top 100%",
end: "bottom bottom",
},
});
gsap.from("#work ul li", {
opacity: 0,
duration: 1,
x: -50,
scrollTrigger: {
trigger: "#work ul li",
start: "top 120%",
end: "bottom bottom",
},
});
var tl = new TimelineMax({
paused: true,
});
document.addEventListener("DOMContentLoaded", () => {
const glowButton = document.getElementById("btn-page2");
gsap.to(glowButton, {
boxShadow: "0 0 10px 5px #dc143c",
duration: 0.5,
repeat: -1,
yoyo: true,
ease: "linear",
});
});
gsap.to("#page3-title h1", {
x: "-700%",
duration: 25,
repeat: -1,
ease: "linear",
});
document.addEventListener("DOMContentLoaded", () => {
const btnPage2 = document.getElementById("btn-page2");
btnPage2.addEventListener("click", () => {
document.getElementById("page3").scrollIntoView({ behavior: "smooth" });
});
});
document.getElementById("event-page").addEventListener("click", function () {
document.getElementById("page4").scrollIntoView({ behavior: "smooth" });
});
document
.getElementById("board-memebers")
.addEventListener("click", function () {
document.getElementById("page6").scrollIntoView({ behavior: "smooth" });
});
gsap.from("#page3-box", {
opacity: 0,
duration: 1,
x: -50,
scrollTrigger: {
trigger: "#page3-box",
start: "top 150%",
},
});
gsap.from("#registration", {
opacity: 0,
duration: 1,
y: 50,
scrollTrigger: {
trigger: "#page4",
start: "top 150%",
},
});
gsap.from("#event-text", {
opacity: 0,
duration: 1,
x: -50,
scrollTrigger: {
trigger: "#page4",
start: "top 170%",
},
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>CXA</title>
<link rel="stylesheet" href="style.css" />
<link rel="stylesheet" href="media.css" />
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/fonts/remixicon.css"
rel="stylesheet"
/>
</head>
<body>
<div id="main">
<div id="page1">
<div id="navbar">
<img src="/logo/CODE X ARTISANS-logos_white.png" id="logo" />
<!-- <p>© 2024 CXA</p> -->
</div>
<video
id="mainVideo"
src="/videos/pexels-cottonbro-8721932 (2160p).mp4"
muted
autoplay
loop
></video>
<div class="overlay"></div>
<div id="tagline">
<h2>EMBARK ON A JOURNEY INTO CODING<span>...</span></h2>
</div>
<div id="nav-list">
<ul>
<li id="join-page">JOIN US</li>
<li id="event-page">EVENTS</li>
<li><a href="#">PROJECTS</a></li>
<li id="board-memebers">BOARD MEMBERS</a></li>
<li>
<a target="_blank" href="https://srmus.ac.in">
SRM UNIVERSITY SIKKIM
<i class="ri-arrow-right-up-line"></i>
</a>
</li>
</ul>
</div>
</div>
<div id="page2">
<img src="/images/page2-bg.jpg" />
<div class="overlay-page2"></div>
<div id="page2-aboutus">
<h1>
Welcome to<br />
CODE X ARTISANS<br />
</h1>
<hr />
<p>
Where innovation meets passion, and coding transforms into an art
form. At SRM University Sikkim, our mission is to cultivate a
vibrant coding culture within our campus, bridging the gap and
fostering a community of like-minded individuals driven by the love
for technology.
</p>
</div>
<div id="work">
<h1>What we do?</h1>
<ul>
<li>Full-Stack Development</li>
<li>Real-Time Projects</li>
<li>Freelance Projects</li>
<li>Industry Exposure</li>
<li>Hackathons</li>
</ul>
<button id="btn-page2">
JOIN US<span><i class="ri-arrow-down-double-line"></i></span>
</button>
</div>
</div>
<div id="page3">
<div id="page3-title">
<h1>
SCAN THE QR CODE OR CLICK ON THE LINK TO JOIN THE CLUB. SCAN THE QR
CODE OR CLICK ON THE LINK TO JOIN THE CLUB.
</h1>
</div>
<div id="page3-box">
<div id="discord-box">
<img id="discord-logo" src="/images/dicordLogo.png" />
<h4>Join our Discord server.</h4>
<img id="discord-qr" src="/images/discordQR.png" />
<a target="_blank" href="https://discord.gg/HYY6M2pF"
>Discord<i class="ri-arrow-right-up-line"></i
></a>
</div>
<div id="whatsapp-box">
<img id="whatsapp-logo" src="/images/whatsappLogo.png" />
<h4>Join our Whatsapp group.</h4>
<img id="whatsapp-qr" src="/images/whatsapp-qr.png" />
<a
target="_blank"
href="https://chat.whatsapp.com/IpXLyGufoiIK2oIfIrI2vA"
>Whatsapp<i class="ri-arrow-right-up-line"></i
></a>
</div>
<div id="phone-join">
<p>
<i class="ri-phone-fill"></i> +91 9635654674<br /><span
>Call us and join the community.</span
>
</p>
</div>
</div>
</div>
<div id="page4">
<video
id="page4-video"
src="/videos/page4-video.mp4"
muted
autoplay
loop
></video>
<div class="overlay"></div>
<div id="event-text">
<h1>
<span>EVENTS</span><br />
are coming soon <i class="ri-send-plane-line"></i>
</h1>
</div>
<div id="registration">
<div id="registration-text">
<p>Registration will start for upcoming event.</p>
</div>
</div>
</div>
<div id="page5">
<img
id="page5-logo"
src="/logo/CODE X ARTISANS-logos_transparent.png"
/>
<h1>Our Vision</h1>
<div id="ourVison-text">
<p>
At CODE X Artisans, in SRM University Sikkim, our vision is to
instill a vibrant coding culture by offering hackathons, projects,
and freelance work. We strive to empower students with practical
coding skills and foster innovation through hands-on experiences.
Our goal is to cultivate a community where members can collaborate,
learn, and grow together. By providing opportunities for real-world
application and professional development, we aim to equip our
members with the expertise and confidence to excel in the rapidly
evolving field of technology. At CODE X Artisans, we are committed
to shaping the future leaders of the coding world.
</p>
</div>
</div>
<div id="page6">
<video
id="page6-video"
src="/videos/page4-video.mp4"
muted
autoplay
loop
></video>
<div class="overlay6"></div>
<div id="memebers-cards">
<h1>Meet Board Members</h1>
<div id="tab-row1">
<div id="member1">
<img
id="member1-img"
src="/board-members-img/Pushkar Dutta.jpg"
/>
<h1>Pushkar Dutta</h1>
<h2>President</h2>
<h3>BCA - III</h3>
<h4>[email protected]</h4>
</div>
<div id="member2">
<img
id="member2-img"
src="/board-members-img/gaylsten bhutia.jpeg"
/>
<h1>Gaylsten Bhutia</h1>
<h2>Vice-President, Manager</h2>
<h3>BCA - III</h3>
<h4>[email protected]</h4>
</div>
</div>
<div id="tab-row2">
<div id="member3">
<img
id="member3-img"
src="/board-members-img/Irfan Ansari.jpeg"
/>
<h1>Irfan Ansari</h1>
<h2>Secretary, Event Coordinator</h2>
<h3>BCA - II</h3>
<h4>[email protected]</h4>
</div>
<div id="member4">
<img id="member4-img" src="/board-members-img/Rohit Singh.jpeg" />
<h1>Rohit Singh</h1>
<h2>Public Relations Officer</h2>
<h3>BCA - II</h3>
<h4>[email protected]</h4>
</div>
</div>
<div id="tab-row3">
<div id="member5">
<img
id="member5-img"
src="/board-members-img/Sonihang Subba.jpeg"
/>
<h1>Sonihang Subba</h1>
<h2>Membership Chair</h2>
<h3>BCA - II</h3>
<h4>[email protected]</h4>
</div>
<div id="member6">
<img
id="member6-img"
src="/board-members-img/Abhimanyu Sir.jpeg"
/>
<p>Special Mention</p>
<h1>Abhimanyu Sharma</h1>
<h2>Mentor & Guide</h2>
<h3>Assistant Professor</h3>
<h4>[email protected]</h4>
</div>
</div>
</div>
</div>
<div id="page7"></div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.1/gsap.min.js"
integrity="sha512-qF6akR/fsZAB4Co1QDDnUXWnaQseLGXoniuSuSlPQK6+aWhlMZcHzkasCSlnWoe+TJuudlka1/IQ01Dnhgq95g=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.1/ScrollTrigger.min.js"
integrity="sha512-IHDCHrefnBT3vOCsvdkMvJF/MCPz/nBauQLzJkupa4Gn4tYg5a6VGyzIrjo6QAUy3We5HFOZUlkUpP0dkgE60A=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
// Updating the background video here for smaller screen
<script>
function updateVideoSource() {
var videoElement = document.getElementById("mainVideo");
// Check the screen width using matchMedia
var isSmallScreen = window.matchMedia("(max-width: 767px)").matches;
// Log screen width for debugging
console.log("Screen Width:", window.innerWidth);
// Update video source based on screen width
videoElement.src = isSmallScreen
? "videos/pexels-cottonbro-8721926 (2160p).mp4"
: "videos/pexels-cottonbro-8721932 (2160p).mp4";
// Log updated video source for debugging
console.log("Updated Video Source:", videoElement.src);
// Reload the video to apply the changes
videoElement.load();
}
// Update the video source on page load and window resize
window.addEventListener("load", updateVideoSource);
window.addEventListener("resize", updateVideoSource);
</script>
<script src="app.js"></script>
</html>代码，尽管它不起作用。
我正在玩这个东西一点......
Locomotive Scroll这个解决方案并不完美，但它会给你进一步研究的机会。
据我所知，LS加GSAP的实现是可以的，而且他们自己也提到了，但是可能有点…要求高。这可能不应该让您感到惊讶，毕竟，他们有完全相同的产品......只是付费。如果你明白我的意思...;)
const locoMotive = () => {
gsap.registerPlugin(ScrollTrigger);
// Using Locomotive Scroll from Locomotive https://github.com/locomotivemtl/locomotive-scroll
const locoScroll = new LocomotiveScroll({
el: document.querySelector("#main"),
smooth: true,
// getDirection: true,
});
locoScroll.on("scroll", ScrollTrigger.update);
ScrollTrigger.scrollerProxy("#main", {
scrollTop(value) {
return arguments.length
? locoScroll.scrollTo(value, 0, 0)
: locoScroll.scroll.instance.scroll.y;
},
getBoundingClientRect() {
return {
top: 0,
left: 0,
width: window.innerWidth,
height: window.innerHeight,
};
},
pinType: document.querySelector("#main").style.transform
? "transform"
: "fixed",
});
ScrollTrigger.addEventListener("refresh", () => locoScroll.update());
ScrollTrigger.refresh();
};
locoMotive();
const page1Animation = () => {
gsap.from("img", {
opacity: 0,
duration: 1,
y: -50,
});
gsap.from("h2", { opacity: 0, duration: 1, x: -100 });
gsap.from("ul", { opacity: 0, duration: 1, x: -90 });
};
page1Animation();
gsap.registerPlugin(ScrollTrigger);
gsap.from("#page2-aboutus p", {
opacity: 0,
duration: 1,
y: 50,
scrollTrigger: {
trigger: "#page2-aboutus p",
start: "top 100%",
end: "bottom bottom",
},
});
gsap.from("#page2-aboutus hr", {
x: -100,
duration: 1,
opacity: 0,
ease: "power4.out",
scrollTrigger: {
trigger: "#page2-aboutus hr",
start: "top 100%",
end: "bottom bottom",
},
});
gsap.from("#work ul li", {
opacity: 0,
duration: 1,
x: -50,
scrollTrigger: {
trigger: "#work ul li",
start: "top 120%",
end: "bottom bottom",
},
});
var tl = new TimelineMax({
paused: true,
});
document.addEventListener("DOMContentLoaded", () => {
const glowButton = document.getElementById("btn-page2");
gsap.to(glowButton, {
boxShadow: "0 0 10px 5px #dc143c",
duration: 0.5,
repeat: -1,
yoyo: true,
ease: "linear",
});
});
gsap.to("#page3-title h1", {
x: "7%",
duration: 3,
repeat: -1,
yoyo: true,
ease: "linear",
});
gsap.from("#page3-box", {
opacity: 0,
duration: 1,
x: -50,
scrollTrigger: {
trigger: "#page3-box",
start: "top 150%",
},
});
gsap.from("#registration", {
opacity: 0,
duration: 1,
y: 50,
scrollTrigger: {
trigger: "#registration",
start: "top top",
},
});html,
body {
height: 100%;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="Style.css" />
</head>
<body>
<div id="main">
<div id="page1">
<div id="navbar">
<svg
id="logo"
width="400"
height="200"
xmlns="http://www.w3.org/2000/svg"
>
<rect
width="200"
height="100"
x="100"
y="50"
rx="20"
ry="20"
fill="blue"
/>
</svg>
</div>
<div class="overlay"></div>
<div id="tagline">
<h2>EMBARK ON A JOURNEY INTO CODING<span>...</span></h2>
</div>
<div id="nav-list">
<ul>
<li id="join-page">JOIN US</li>
<li id="event-page">EVENTS</li>
<li><a href="#">PROJECTS</a></li>
<li id="board-memebers"><a href="#">BOARD MEMBERS</a></li>
<li>
<a target="_blank" href="https://srmus.ac.in">
SRM UNIVERSITY SIKKIM
<i class="ri-arrow-right-up-line"></i>
</a>
</li>
</ul>
</div>
</div>
<div id="page2">
<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
<rect
width="200"
height="100"
x="100"
y="50"
rx="20"
ry="20"
fill="red"
/>
</svg>
<div class="overlay-page2"></div>
<div id="page2-aboutus">
<h1>
Welcome to<br />
CODE X ARTISANS<br />
</h1>
<hr />
<p>
Where innovation meets passion, and coding transforms into an art
form. At SRM University Sikkim, our mission is to cultivate a
vibrant coding culture within our campus, bridging the gap and
fostering a community of like-minded individuals driven by the love
for technology.
</p>
</div>
<div id="work">
<h1>What we do?</h1>
<ul>
<li>Full-Stack Development</li>
<li>Real-Time Projects</li>
<li>Freelance Projects</li>
<li>Industry Exposure</li>
<li>Hackathons</li>
</ul>
<button id="btn-page2">
JOIN US<span><i class="ri-arrow-down-double-line"></i></span>
</button>
</div>
</div>
<div id="page3">
<div id="page3-title">
<h1>
SCAN THE QR CODE OR CLICK ON THE LINK TO JOIN THE CLUB. SCAN THE QR
CODE OR CLICK ON THE LINK TO JOIN THE CLUB.
</h1>
</div>
<div id="page3-box">
<div id="discord-box">
<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
<rect
width="200"
height="100"
x="100"
y="50"
rx="20"
ry="20"
fill="orange"
/>
</svg>
<h4>Join our Discord server.</h4>
<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
<rect
width="200"
height="100"
x="100"
y="50"
rx="20"
ry="20"
fill="black"
/>
</svg>
<a target="_blank" href="https://discord.gg/HYY6M2pF"
>Discord<i class="ri-arrow-right-up-line"></i
></a>
</div>
<div id="whatsapp-box">
<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
<rect
width="200"
height="100"
x="100"
y="50"
rx="20"
ry="20"
fill="brown"
/>
</svg>
<h4>Join our Whatsapp group.</h4>
<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
<rect
width="200"
height="100"
x="100"
y="50"
rx="20"
ry="20"
fill="grey"
/>
</svg>
<a
target="_blank"
href="https://chat.whatsapp.com/IpXLyGufoiIK2oIfIrI2vA"
>Whatsapp<i class="ri-arrow-right-up-line"></i
></a>
</div>
<div id="phone-join">
<p>
<i class="ri-phone-fill"></i> +91 9635654674<br /><span
>Call us and join the community.</span
>
</p>
</div>
</div>
</div>
<div class="overlay"></div>
<div id="event-text">
<h1>
<span>EVENTS</span><br />
are coming soon <i class="ri-send-plane-line"></i>
</h1>
</div>
<div id="registration">
<div id="registration-text">
<p>Registration will start for upcoming event.</p>
</div>
</div>
<div id="page5">
<svg
id="page5-logo"
width="400"
height="200"
xmlns="http://www.w3.org/2000/svg"
>
<rect
width="200"
height="100"
x="100"
y="50"
rx="20"
ry="20"
fill="red"
/>
</svg>
<h1>Our Vision</h1>
<div id="ourVison-text">
<p>
At CODE X Artisans, in SRM University Sikkim, our vision is to
instill a vibrant coding culture by offering hackathons, projects,
and freelance work. We strive to empower students with practical
coding skills and foster innovation through hands-on experiences.
Our goal is to cultivate a community where members can collaborate,
learn, and grow together. By providing opportunities for real-world
application and professional development, we aim to equip our
members with the expertise and confidence to excel in the rapidly
evolving field of technology. At CODE X Artisans, we are committed
to shaping the future leaders of the coding world.
</p>
</div>
</div>
<div class="overlay6"></div>
<div id="memebers-cards">
<h1>Meet Board Members</h1>
<div id="tab-row1">
<div id="member1">
<svg
id="member1-img"
width="400"
height="200"
xmlns="http://www.w3.org/2000/svg"
>
<rect
width="200"
height="100"
x="100"
y="50"
rx="20"
ry="20"
fill="purple"
/>
</svg>
<h1>Pushkar Dutta</h1>
<h2>President</h2>
<h3>BCA - III</h3>
<h4>[email protected]</h4>
</div>
<div id="member2">
<svg
id="member2-img"
width="400"
height="200"
xmlns="http://www.w3.org/2000/svg"
>
<rect
width="200"
height="100"
x="100"
y="50"
rx="20"
ry="20"
fill="blue"
/>
</svg>
<h1>Gaylsten Bhutia</h1>
<h2>Vice-President, Manager</h2>
<h3>BCA - III</h3>
<h4>[email protected]</h4>
</div>
</div>
<div id="tab-row2">
<div id="member3">
<svg
id="member3-img"
width="400"
height="200"
xmlns="http://www.w3.org/2000/svg"
>
<rect
width="200"
height="100"
x="100"
y="50"
rx="20"
ry="20"
fill="yellow"
/>
</svg>
<h1>Irfan Ansari</h1>
<h2>Secretary, Event Coordinator</h2>
<h3>BCA - II</h3>
<h4>[email protected]</h4>
</div>
<div id="member4">
<svg
id="member4-img"
width="400"
height="200"
xmlns="http://www.w3.org/2000/svg"
>
<rect
width="200"
height="100"
x="100"
y="50"
rx="20"
ry="20"
fill="pink"
/>
</svg>
<h1>Rohit Singh</h1>
<h2>Public Relations Officer</h2>
<h3>BCA - II</h3>
<h4>[email protected]</h4>
</div>
</div>
<div id="tab-row3">
<div id="member5">
<svg
id="member5-img"
width="400"
height="200"
xmlns="http://www.w3.org/2000/svg"
>
<rect
width="200"
height="100"
x="100"
y="50"
rx="20"
ry="20"
fill="green"
/>
</svg>
<h1>Sonihang Subba</h1>
<h2>Membership Chair</h2>
<h3>BCA - II</h3>
<h4>[email protected]</h4>
</div>
<div id="member6">
<svg
id="member6-img"
width="400"
height="200"
xmlns="http://www.w3.org/2000/svg"
>
<rect
width="200"
height="100"
x="100"
y="50"
rx="20"
ry="20"
fill="purple"
/>
</svg>
<p>Special Mention</p>
<h1>Abhimanyu Sharma</h1>
<h2>Mentor & Guide</h2>
<h3>Assistant Professor</h3>
<h4>[email protected]</h4>
</div>
</div>
</div>
<div id="page7"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.js"></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.1/gsap.min.js"
integrity="sha512-qF6akR/fsZAB4Co1QDDnUXWnaQseLGXoniuSuSlPQK6+aWhlMZcHzkasCSlnWoe+TJuudlka1/IQ01Dnhgq95g=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.1/ScrollTrigger.min.js"
integrity="sha512-IHDCHrefnBT3vOCsvdkMvJF/MCPz/nBauQLzJkupa4Gn4tYg5a6VGyzIrjo6QAUy3We5HFOZUlkUpP0dkgE60A=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
<script src="App.js"></script>
</body>
</html>